search

muicss / mui

Lightweight CSS framework
https://www.muicss.com
Other
4.51k stars 426 forks source link

Make tab hidden/visible on some criteria #332

Closed mball213 closed 3 years ago

mball213 commented 3 years ago

Hi

I'm just using straightforward JS & CSS. Is there a way of making a tab hidden/visible and enabled/disabled based on some criteria?

I've made it hidden with visibility but next and previous still work

Great tool Mike

amorey commented 3 years ago

You can disable/enable a tab by adding/removing a disabled attribute on the toggle element in the tabs bar. For example, here's the example from the documentation with "Tab 2" disabled: 

<ul class="mui-tabs__bar">
  <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-default-1">Tab-1</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-default-2" disabled>Tab-2</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-default-3">Tab-3</a></li>
</ul>
<div class="mui-tabs__pane mui--is-active" id="pane-default-1">Pane-1</div>
<div class="mui-tabs__pane" id="pane-default-2">Pane-2</div>
<div class="mui-tabs__pane" id="pane-default-3">Pane-3</div>

You can style your own disabled tabs by selecting on the [disabled] attribute:

.mui-tabs__bar > li > a[disabled] {
  color: #bbb;
}
mball213 commented 3 years ago

Thank you so much, obvious now you show me :-)