DaisyUIComponents.Tabs (DaisyUIComponents v0.8.5)
View SourceTab component used to show a list of links in a tabbed format.
Renders a list of tab links or toggles with radio toggle and content or label with radio toggle and content
https://daisyui.com/components/tab/
Basic Example:
<.tabs>
<.tab title="Tab 1" />
<.tab title="Tab 2" active />
<.tab title="Tab 3" disabled />
</.tabs>
Renders:
<div role="tablist" class="tabs">
<a role="tab" class="tab">Tab 1</a>
<a role="tab" class="tab tab-active">Tab 2</a>
<a role="tab" class="tab tab-disabled">Tab 3</a>
</div>
Basic Example with inner block content
NOTE: if title attribute is provided, the inner block will not be rendered
<.tabs>
<.tab>
<span>extra content</span>
Tab 1
</.tab>
<.tab active>
Tab 2
</.tab>
<.tab disabled>
Tab 3
</.tab>
</.tabs>
Renders:
<div role="tablist" class="tabs">
<a role="tab" class="tab">
<span>extra content</span>
Tab 1
</a>
<a role="tab" class="tab tab-active">
Tab 2
</a>
<a role="tab" class="tab tab-disabled">
Tab 3
</a>
</div>
Tabs with button type
<.tabs>
<.tab type="button" title="Tab 1" />
<.tab type="button" title="Tab 2" active />
<.tab type="button" title="Tab 3" disabled />
</.tabs>
Renders:
<div role="tablist" class="tabs">
<button class="tab">Tab 1</button>
<button class="tab tab-active">Tab 2</button>
<button class="tab tab-disabled">Tab 3</button>
</div>
Tabs with radio type
These tabs must provide a title attribute
<.tabs>
<.tab type="radio" title="Tab 1" name="tabs" />
<.tab type="radio" title="Tab 2" name="tabs" active />
<.tab type="radio" title="Tab 3" name="tabs" disabled />
</.tabs>
Renders:
<div role="tablist" class="tabs">
<input type="radio" name="tabs" class="tab" aria-label="Tab 1" />
<input type="radio" name="tabs" class="tab" aria-label="Tab 2" checked="checked" />
<input type="radio" name="tabs" class="tab tab-disabled" aria-label="Tab 3" />
</div>
Tabs with label type
These tabs could have a title attribute or inner block content
<.tabs>
<.tab type="label" title="Tab 1" name="tabs" />
<.tab type="label" title="Tab 2" name="tabs" active />
<.tab type="label" title="Tab 3" name="tabs" disabled />
</.tabs>
Renders:
<div role="tablist" class="tabs">
<label class="tab">
<input type="radio" name="tabs" />
Tab 1
</label>
<label class="tab">
<input type="radio" name="tabs" checked="checked" />
Tab 2
</label>
<label class="tab tab-disabled">
<input type="radio" name="tabs" />
Tab 3
</label>
</div>
Tabs with label type and and content
<.tabs lift position="bottom">
<.tab type="label" title="Tab 1" name="my_tabs_with_content" />
<.tab_content class="bg-base-100 border-base-300 p-6">Tab content 1</.tab_content>
<.tab type="label" title="Tab 2" name="my_tabs_with_content" active />
<.tab_content class="bg-base-100 border-base-300 p-6">Tab content 2</.tab_content>
<.tab type="label" title="Tab 3" name="my_tabs_with_content" disabled />
<.tab_content class="bg-base-100 border-base-300 p-6">Tab content 3</.tab_content>
</.tabs>
Renders:
<div role="tablist" class="tabs tabs-lift tabs-bottom">
<label class="tab">
<input type="radio" name="my_tabs_with_content" /> Tab 1
</label>
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
<label class="tab tab-active">
<input type="radio" name="my_tabs_with_content" checked="checked" /> Tab 2
</label>
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
<label class="tab tab-disabled">
<input type="radio" name="my_tabs_with_content" /> Tab 3
</label>
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
Summary
Functions
Attributes
title
(:string
)class
(:any
) - Defaults tonil
.type
(:string
) - Defaults to"link"
. Must be one of"link"
,"button"
,"radio"
, or"label"
.name
(:string
) - Defaults tonil
.active
(:boolean
) - Defaults tofalse
.disabled
(:boolean
) - Defaults tofalse
.- Global attributes are accepted.
Slots
inner_block
Attributes
title
(:string
)class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
Attributes
title
(:string
)name
(:string
) (required)class
(:any
) - Defaults tonil
.active
(:boolean
) - Defaults tofalse
.- Global attributes are accepted.
Slots
inner_block
Attributes
title
(:string
)class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
Attributes
title
(:string
) (required)name
(:string
) (required)class
(:any
) - Defaults tonil
.active
(:boolean
) - Defaults tofalse
.- Global attributes are accepted.
Attributes
class
(:any
) - Defaults tonil
.size
(:string
) - Must be one of"xs"
,"sm"
,"md"
,"lg"
, or"xl"
.box
(:boolean
) - Defaults tofalse
.border
(:boolean
) - Defaults tofalse
.lift
(:boolean
) - Defaults tofalse
.position
(:string
) - Must be one of"top"
, or"bottom"
.- Global attributes are accepted.
Slots
inner_block