Tabs inside tabs?

Is it possible to have tabs within tabs? For example:

tabs

Реализовать логику внутренних табов можно только самостоятельно.
Владимир говорил о том, что будет view во view - в этом случае можно будет делать такие штуки.

1 Like

I have got it working, however the line showing the active tab is going through the text:

tabs%20view

Simplified code is:

//Main tabs
<div class="tabs">
  <div id="appliances" class="page-content tab tab-active">
    //Card
    <div class="card margin-bottom margin-top">
      //Secondary tab control        
      <div class="toolbar tabbar">
        <div class="toolbar-inner">
          <a href="#applianceA" class="tab-link tab-link-active">Appliance A</a>
          <a href="#applianceB" class="tab-link">Appliance B</a>
        </div>
      </div>
      <div class="tabs">
        <div id="applianceA" class="tab tab-active">
          ...

I think this toolbar/tabbar should have extra class ‘toolbar-top’ or ‘toolbar-bottom’

  //Secondary tab control        
  <div class="toolbar tabbar toolbar-top">
1 Like

Both of these solutions help, but create other small issues…

Toolbar-top fixes the issue but creates white space at the top of the card for some reason:
toolbar-top

Toolbar-bottom works well but now the line indicating active state is at the top of the control:
toolbar-bottom

It must be toolbar-top to have active “underline” on bottom and apperently you will need to tweak/add some custom styles to make it positioned correctly

My CSS isn’t very advanced but I will give it a try :sweat_smile: