Thank you for the suggestions! These would be good improvements to the tabs component and make it possible to build interesting UIs. We will try adding this in our next update.
I’ve been trying to create a interactive section where 3 cards in one column, if one card is hovered over it changes the the image content in a second column, and I thought I’d try it with the tab control but the bootstrap studio tab component is locked. I’ve been able to get the effect by copying in the code snippets for
nav-tab and nav-tabContent from Bootstrap documentation and converting them to Bootstrap Studio components and adding in the cards to the nav-tab items.
Then I had to create a copy of the js snippit and change the click to mouse over.
It’s working, but I just think if it could be achieved without the need of copying in code to convert, that would be good.
As long as this is all possible with the existing Bootstrap JS and classes, I’m in favour of these changes .
I do actually have two designs I have created that use the Tab component where the links to change the tab content are separated. It wasn’t something I could do with the app, and I did have to use custom code snippets. So, if we can at least get that flexibility that would be fun as the Tab component is super useful and I’m often reaching for it when making designs.
I wouldn’t like to see a custom Tab component made for the application though, I feel that strays from the philosophy of the application being a tool for the Bootstrap css library.
" The issue is that when an item is not active, it’s display property is set to display:none , and therefore is being hidden before any animation can be applied."
I would like a nicer fade effect, so a slower face out of the active tab to match the fade in of the new tab.