DaisyUIComponents.Tabs (DaisyUIComponents v0.9.3)

View Source

Tab 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

tab(assigns)
tab_button(assigns)
tab_content(assigns)
tab_label(assigns)
tab_link(assigns)
tab_radio(assigns)
tabs(assigns)

Functions

tab(assigns)

Attributes

  • title (:string)
  • class (:any) - Defaults to nil.
  • type (:string) - Defaults to "link". Must be one of "link", "button", "radio", or "label".
  • name (:string) - Defaults to nil.
  • active (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • Global attributes are accepted. Supports all globals plus: ["href"].

Slots

  • inner_block

tab_button(assigns)

Attributes

  • title (:string)
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

tab_content(assigns)

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

tab_label(assigns)

Attributes

  • title (:string)
  • name (:string) (required)
  • class (:any) - Defaults to nil.
  • active (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block

tab_link(assigns)

Attributes

  • title (:string)
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["href"].

Slots

  • inner_block

tab_radio(assigns)

Attributes

  • title (:string) (required)
  • name (:string) (required)
  • class (:any) - Defaults to nil.
  • active (:boolean) - Defaults to false.
  • Global attributes are accepted.

tabs(assigns)

Attributes

  • class (:any) - Defaults to nil.
  • size (:string) - Must be one of "xs", "sm", "md", "lg", or "xl".
  • box (:boolean) - Defaults to false.
  • border (:boolean) - Defaults to false.
  • lift (:boolean) - Defaults to false.
  • position (:string) - Must be one of "top", or "bottom".
  • Global attributes are accepted.

Slots

  • inner_block