Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Need prop for inactive-class #2648

Closed
Christhofernatalius opened this Issue Mar 14, 2019 · 4 comments

Comments

Projects
None yet
3 participants
@Christhofernatalius
Copy link

Christhofernatalius commented Mar 14, 2019

What problem does this feature solve?

We already have prop active-class that will be appended to the element when the route is active.
But what if that we need to specify class only when the route is not active?

example:
when active => .btn-primary
when inactive => .btn-secondary

What does the proposed API look like?

<router-link
    :to="{name: 'purchase'}"
    class="btn"
    active-class="btn-primary"
    inactive-class="btn-secondary">
    Purchase
</router-link>

image

@martiendt

This comment has been minimized.

Copy link

martiendt commented Mar 14, 2019

You can use class binding and compare it with your routes

<router-link
    to="/purchase/purchase-request"
    class="btn"
    :class="{'btn-secondary': this.$route.path != '/purchase/purchase-request'}"
    active-class="btn-primary">
    <span><i class="si si-folder-alt"></i> Purchase Request</span>
</router-link>
@Christhofernatalius

This comment has been minimized.

Copy link
Author

Christhofernatalius commented Mar 14, 2019

You can use class binding and compare it with your routes

<router-link
    to="/purchase/purchase-request"
    class="btn"
    :class="{'btn-secondary': this.$route.path != '/purchase/purchase-request'}"
    active-class="btn-primary">
    <span><i class="si si-folder-alt"></i> Purchase Request</span>
</router-link>

Still need additional logic if want to match purchase/purchase-request/create and other link
You need indexOf !== -1 for this

@posva

This comment has been minimized.

Copy link
Member

posva commented Mar 15, 2019

Add a regular class to those specific links and override them with the active class: class="btn btn-secondary" active-class="btn-primary"

@posva posva closed this Mar 15, 2019

@Christhofernatalius

This comment has been minimized.

Copy link
Author

Christhofernatalius commented Mar 15, 2019

Add a regular class to those specific links and override them with the active class: class="btn btn-secondary" active-class="btn-primary"

@posva but that will be rendered as class="btn btn-secondary btn-primary"
instead of class="btn btn-primary"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.