Tabs - programmatic selection about shoelace HOT 7 CLOSED

You can also apply the active class to the appropriate tab nav and tab pane, just be sure to remove any existing classes.

It might make sense to use mutation observers to watch for the active class on tab navs and then update the tab navs and tab panes automatically. I'll look into it, but I'd prefer to avoid turning this into an entire tab plugin.

from shoelace.

You can also apply the active class to the appropriate tab nav and tab pane, just be sure to remove any existing classes.

I tried that however I'm duplicating all of your code and I also need to fire the 'show' event. So I refactored my code and sent a click event to avoid that duplication.

I agree that using a mutation observer might be a cool way to handle this and removes the need for an explicit api.

from shoelace.

I tried that however I'm duplicating all of your code and I also need to fire the 'show' event. So I refactored my code and sent a click event to avoid that duplication.

Yeah, admittedly it's not as easy as it sounds since you have to traverse the DOM to remove other active classes.

I played with mutation observers a bit and they seem to work great for this. There are a couple edge cases I still need to work out (e.g. restricting disabled tabs from obtaining the active class) but I think it's a good approach overall. Ultimately, you'd be able to just:

$('#tab-nav-id').addClass('active');

And everything else would happen automatically. This could be a great way to handle complex interactions in extensions too.

Let me play with it a bit more — this is basically a completely rewrite of the tabs plugin. 😄

from shoelace.

This has been addressed in 7c2a0fc but it could use some testing (dist has been updated in master as well).

I'm using a mutation observer to detect class changes on tabs. When this occurs, other tabs are made inactive and the appropriate tab panes are shown/hidden automatically. Events still work as expected. Works for me even in IE11 which is the lowest target browser for scripts.

Tab docs have also been updated in the repo. Here's the relevant section:

To activate a tab programmatically, just add the active class to it. We use a mutation observer to remove the active class on other tabs and to show/hide the appropriate tab panes automatically.

$('#tab-id').addClass('active');

To disable a tab, add the disabled class to the appropriate tab.

Please try it out and report back.

from shoelace.

An interesting side effect of using mutation observers is that they let us prevent the active class from being applied to a disabled tab. We basically block it and maintain the existing tab state. Good stuff.

from shoelace.

Looks good. Only tested on Chrome so far. Certainly a novel and nice way to do this.

from shoelace.

No reports of bugs, and it's testing out pretty solid for me. If any issues come up, please file as a bug :)

from shoelace.