Tab: Lifted

Ready

HTML
View
Info
Notes


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

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

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

</div>


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

Handle: @tab--lifted
Variants (5): Default , Bordered , Lifted , Boxed , Sizes
Preview:
- With layout
- Component only
Filesystem Path: fractal/components/04-navigation/tab/03-tab--lifted.edge

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