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

Introduce the b-nav-item-toggle component that works with v-b-toggle #5391

Closed
thebspin opened this issue May 18, 2020 · 6 comments · Fixed by #5396
Closed

Introduce the b-nav-item-toggle component that works with v-b-toggle #5391

thebspin opened this issue May 18, 2020 · 6 comments · Fixed by #5396
Assignees
Projects

Comments

@thebspin
Copy link

Is your feature request related to a problem? Please describe...

Working with a vertical b-nav component i want to have options that are hidden by a toggle.
I found the v-b-toggle directive but that does not work with the b-nav-item component.
You can work around that using the b-nav-text component instead. That however comes without the styling of a nav item.
I could also go for a v-model solution or a method based solution but that's more lines of code, less flexible and defeats the purpose of the directive itself.

I understand this is because the b-nav-item component works with evt.preventDefault().

Describe the solution you'd like

If there would be an b-nav-item-toggle component that would be expected to be used with the directive, then you would no longer need the preventDefault() check and i could do something like:

<b-nav-item-toggle v-b-toggle.secret>Dropdown</b-nav-item>
<b-collapse id="secret">
    <b-nav-item>Do you see me?</b-nav-item>
</b-collapse>

And there would be no need for v-model and thus data opbjects or a method.

Describe alternatives you've considered

An alternative could be that the b-nav-text component could be styled to look like the b-nav-item

I think vertical navbar's would greatly benefit from this (and thusfor makes it easier to make admin themes, something i have not found using this otherwise great framework)

@thebspin
Copy link
Author

If i uderstand this correctly it will no longer check for the defaultPrevend event right? Having a dedicated component would allow for more flexibility. Lets say i have an vertical nav that shows a chevron when something is toggleable. This chevron then would change once something is toggeled open or closed. My understanding is that this is only possible right now with a lot of custom code.

@tmorehouse
Copy link
Member

tmorehouse commented May 19, 2020

<b-nav-item. is based on b-link, which calls evt.preventDefault() if the href is # (to prevent scroll to top behaviour). PR #5396 changes v-b-toggle so that it doesn't check for defaultPrevented, which will make v-b-toggle for on <b-nav-item> that doesn't' have a an explicit link i.e. href is not set)

@thebspin
Copy link
Author

I see, so if i want to keep the toggle state for example i could so something like:

toggle(e) {
      e.target.classList.toggle("toggled")
}

Because there is no other method implemented for this in the framework?

@tmorehouse
Copy link
Member

v-b-toggle controls the collapsed and not-collapsed classes on the element that is the trigger for the collapse (or sidebar). You can use these classes to style the content in your toggle element.

@thebspin
Copy link
Author

Ah that is nice! Can't wait for the next release then, thanks for the fast action you took! :)

@tmorehouse
Copy link
Member

tmorehouse commented May 19, 2020

The classes are available in 2.14.0, but there are issues with default href of #. Setting the b-nav-item href to something other than # (the default) will get around this issue (i.e. set prop href to #id-of-collapse is a temporary fix).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v2.15.0
  
Done
Development

Successfully merging a pull request may close this issue.

3 participants