BitstylesPhoenix.Component.Tabs (bitstyles_phoenix v2.2.0) View Source

The Tabs component.

Link to this section Summary

Functions

Rendering a tab button.

Render a tab navigation header, optionnally with selected tabs.

Link to this section Functions

Rendering a tab button.

Render a tab navigation header, optionnally with selected tabs.

Attributes

  • variant — Variant of the badge you want, from those available in the CSS classes e.g. brand-1, danger
  • class - Extra classes to pass to the badge. See BitstylesPhoenix.Helper.classnames/1 for usage.
  • active - A value that represents the active tab. In order to be active, the tab has to have a ref attribute equal to this value.
  • All other attributes are passed to the span tag.

Attributes - tab slot

  • ref - Sets the active attribute for the tab button if the parent active attribute matches it's value.
  • show - If the tab should be rendered. Defaults to true.
  • All other attributes are passed to ui_tab_button/1

See bitstyles badge docs for examples, and for the default variants available.

Tabs without active tab

iex> assigns = %{}
...> render ~H"""
...> <.ui_tabs>
...>   <:tab>Foo</:tab>
...>   <:tab>Bar</:tab>
...>   <:tab>Baz</:tab>
...>   <:tab show={false}>Hidden</:tab>
...> </.ui_tabs>
...> """
"""
<ul class="a-list-reset u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
  <li class="u-margin-s-right">
    <button type="button" class="a-button a-button--tab">
      Foo
    </button>
  </li>
  <li class="u-margin-s-right">
    <button type="button" class="a-button a-button--tab">
      Bar
    </button>
  </li>
  <li class="u-margin-s-right">
    <button type="button" class="a-button a-button--tab">
      Baz
    </button>
  </li>
</ul>
"""

Tabs with active attribute references (string)

iex> assigns = %{}
...> render ~H"""
...> <.ui_tabs active="foo">
...>   <:tab ref="foo">Foo</:tab>
...>   <:tab ref="bar">Bar</:tab>
...>   <:tab ref="baz">Baz</:tab>
...> </.ui_tabs>
...> """
"""
<ul class="a-list-reset u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
  <li class="u-margin-s-right">
    <button type="button" aria-selected="true" class="a-button a-button--tab">
      Foo
    </button>
  </li>
  <li class="u-margin-s-right">
    <button type="button" aria-selected="false" class="a-button a-button--tab">
      Bar
    </button>
  </li>
  <li class="u-margin-s-right">
    <button type="button" aria-selected="false" class="a-button a-button--tab">
      Baz
    </button>
  </li>
</ul>
"""

Tabs with active attribute references (atom)

iex> assigns = %{}
...> render ~H"""
...> <.ui_tabs active={:foo}>
...>   <:tab ref={:foo}>Foo</:tab>
...>   <:tab ref={:bar}>Bar</:tab>
...>   <:tab ref={:baz} class="extra" href="#">Baz</:tab>
...> </.ui_tabs>
...> """
"""
<ul class="a-list-reset u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
  <li class="u-margin-s-right">
    <button type="button" aria-selected="true" class="a-button a-button--tab">
      Foo
    </button>
  </li>
  <li class="u-margin-s-right">
    <button type="button" aria-selected="false" class="a-button a-button--tab">
      Bar
    </button>
  </li>
  <li class="u-margin-s-right">
    <a href="#" aria-selected="false" class="a-button a-button--tab extra">
      Baz
    </a>
  </li>
</ul>
"""