activationMode for Radix tabs and autoplay possible ?

At a glance

The community members are discussing how to set the activationMode or onHover functionality for Radix tabs, and whether it's possible to autoplay tabs without too much custom code. The comments indicate that the activationMode property is available in the Radix tabs API, but it's not working as expected, and the community members are unable to get it to function as an onHover trigger. They also explore alternative solutions like using custom JavaScript or the SwiperJS library, but conclude that these may not be the most elegant or simple approach for their use case, which involves a subtle autorotation and smooth transitions between tab content. The community members also mention a related resource from Greenshift and discuss potential issues or bugs with the Radix tabs implementation.

Useful resources

JJacob

Where do I set activationMode or some kind of onHover for Radix tabs ?

Found this activationMode under API reference -> Root here:

https://www.radix-ui.com/primitives/docs/components/tabs

And is autoplaying tabs possible without too much custom code?

20 comments

OOleg Isonen

seems like its there, haven't tried it myself though

Attachment

JJacob

ahh sorry yes, I found it related to the Tabs component, not the list, triggers and content.

JJacob

But it is not working as onHover does

JJacob

nothing happens

JJacob

I started a blank project and tried, does it require publishing or some time ? The docs say it activates when the tab receives focus

JJacob

Do you have a solution for autoplaying tabs ?

OOleg Isonen

with custom js you could click on tab triggers

OOleg Isonen

or use swiperjs instead, it has autoplay and what not

OOleg Isonen

tabs is not a gallery thing

JJacob

gallery thing ? I need it for explainer stuff

JJacob

I could just use the nav component if I could have the first "tab" opened by default maybe. But that would not give me autoplay.

OOleg Isonen

swiperjs is not only for images, you can have anything in there

OOleg Isonen

if you want an autoplay and transitions, you probably want swiperjs not tabs

JJacob

seems like stuff I would perhaps put into tabs ... but it really should be a much more elegant and simple solution to have auto rotation/play of the Radix tabs - not what I am looking for anyways - thank a lot though. Will find some other solution for this

I do not need animation stuff and the flashy annoying stuff, but a subtle autoration when the user is scanning the hero section where the tabs content smoothly transitions to other content to tell the viewer that there is more to see is practical. Preferrably with Ken Burns-effect - which is similarly engaging with out being annoying, but sosmetimes just annoying.

OOleg Isonen

autorotation without soft transition is also not nice for the human eye

OOleg Isonen

tabs has a lot to do with accessibility, I think in this case its a slideshow/gallery

JJacob

just for reference - Greenshift has a very practical approach here - https://greenshiftwp.com/advanced-tabs/

JJacob

also I still could not make activationMode do anything - is it a bug or ?

JJacob

See perhaps also no. 9 for Ken Burns - https://greenshiftwp.com/advanced-slider-and-carousel/

JJacob

Did you make a ticket for the activationMode on github ? Or some general checkup on the radix components ?

It is not working for me. Doesnt matter what I choose on the setting, automatic or manual, when applying to tve Tabs.

Also it seems to break after having added the property in a setup with radix tabs and two videos.

This did not fix it, but not sure how to read the ticket. It says closed.

https://github.com/webstudio-is/webstudio/issues/2124

Add a reply

Join the Webstudio community

activationMode for Radix tabs and autoplay possible ?