edge-components

Tab: Sizes 

<div>
    <!-- xs -->
    <div class="tabs">
        <a class="tab  tab-xs">
            Tab 1
        </a>

        <a class="tab  tab-active tab-xs">
            Tab 2
        </a>

        <a class="tab  tab-xs">
            Tab 3
        </a>

    </div>

    <!-- sm -->
    <div class="tabs">
        <a class="tab  tab-sm">
            Tab 1
        </a>

        <a class="tab  tab-active tab-sm">
            Tab 2
        </a>

        <a class="tab  tab-sm">
            Tab 3
        </a>

    </div>

    <!-- md -->
    <div class="tabs">
        <a class="tab">
            Tab 1
        </a>

        <a class="tab  tab-active">
            Tab 2
        </a>

        <a class="tab">
            Tab 3
        </a>

    </div>

    <!-- lg -->
    <div class="tabs">
        <a class="tab  tab-lg">
            Tab 1
        </a>

        <a class="tab  tab-active tab-lg">
            Tab 2
        </a>

        <a class="tab  tab-lg">
            Tab 3
        </a>

    </div>
</div>
 
<div>
  <!-- xs -->
  @jrmc.tabs()
    @!jrmc.tabs.tab({ text: 'Tab 1', class: 'tab-xs' })
    @!jrmc.tabs.tab({ text: 'Tab 2', class: 'tab-xs', active: true })
    @!jrmc.tabs.tab({ text: 'Tab 3', class: 'tab-xs' })
  @end

  <!-- sm -->
  @jrmc.tabs()
    @!jrmc.tabs.tab({ text: 'Tab 1', class: 'tab-sm' })
    @!jrmc.tabs.tab({ text: 'Tab 2', class: 'tab-sm', active: true })
    @!jrmc.tabs.tab({ text: 'Tab 3', class: 'tab-sm' })
  @end

  <!-- md -->
  @jrmc.tabs()
    @!jrmc.tabs.tab({ text: 'Tab 1' })
    @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
    @!jrmc.tabs.tab({ text: 'Tab 3' })
  @end

  <!-- lg -->
  @jrmc.tabs()
    @!jrmc.tabs.tab({ text: 'Tab 1', class: 'tab-lg' })
    @!jrmc.tabs.tab({ text: 'Tab 2', class: 'tab-lg', active: true })
    @!jrmc.tabs.tab({ text: 'Tab 3', class: 'tab-lg' })
  @end
</div>

Tab

Doc : daisyui tab

Tabs can be used to show a list of links in a tabbed format.

Class name Type
tabs Component Container of tab items
tab Component A tab item
tab-active Modofier For the active tab
tab-bordered Modofier Adds bottom border to tab item
tab-lifted Modofier Adds lifted style to tab item
tabs-boxed Modofier Adds a box style to tabs container
tab-xs Responsive Shows tab in extra small size
tab-sm Responsive Shows tab in small size
tab-md Responsive Shows tab in medium (default) size
tab-lg Responsive Shows tab in large size