Suggestions for tab control

Ideas
1

1, The ability to remove the default bootstrap styling on the tab control.

2, Breaking up the tab control so you can move the tab content away from the tab items, but still have them connected with ID.

3, The option to trigger the change of tab content via a hover on the tab items not just the click.

2

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.

3

Great stuff.

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.

4

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.

5
2 Likes
6

That onmouseenter=“new bootstrap.Tab(this).show()” is new to me. Didn’t know you could do that.

7

Also, if there was some way of getting a nicer fade out on the active tab pane that would be good!

The bootstrap default fade just looks like a flash, it’s really harsh on the eyes

8

I changed the transition between the tabs to a rotation effect. It’s easily done—take a look at the example above.

9

Hi Kuligaposten,

I’m looking at this example https://stackoverflow.com/questions/38957131/how-to-change-bootstrap-tabs-fade-out-speed

" 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.

10

I finally got it working by using css grid

.tab-content {
display: grid;
grid-template: 1fr / 1fr;
}

.tab-content > .tab-pane {
display: block;
grid-column-start: 1;
grid-row-start: 1;
opacity: 0;
transition: opacity 2s;
}

.tab-content > .tab-pane.active {
opacity: 1;
}

.fade {
opacity: 0;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}

11

Hi @kuligaposten

That onmouseenter=“new bootstrap.Tab(this).show()”

can that be used with the carousel control as well?

12

Tabs and Carousels don’t work the same way, so no — you can’t use onmouseenter="new bootstrap.Tab(this).show()" on a Carousel.

If you want your own controls, you can do something like this:

<button 
  class="btn btn-primary" 
  type="button"
  data-bs-target="#carousel-1"
  data-bs-slide="prev"
  onmouseenter="this.click()"
>Prev</button>

<button 
  class="btn btn-primary" 
  type="button" 
  data-bs-target="#carousel-1"
  data-bs-slide="next"
  onmouseenter="this.click()"
>Next</button>

If you want the carousel to cycle on hover, you can do this:

<div id="carousel-1" 
  class="carousel slide" 
  data-bs-ride="false" 
  onmouseenter="bootstrap.Carousel.getOrCreateInstance(this).next()" 
  onmouseleave="bootstrap.Carousel.getOrCreateInstance(this).next()">
  ...
</div>

Or, you can create a custom CarouselController like this: