View Source BitstylesPhoenix.Component.Tabs (bitstyles_phoenix v2.3.1)
The Tabs component.
Summary
Functions
Rendering a tab button.
active
- If set, setsaria-selected
on the button (boolean).- All other attributes are passed to
BitstylesPhoenix.Component.Button.ui_button/1
.
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. SeeBitstylesPhoenix.Helper.classnames/1
for usage.active
- A value that represents the active tab. In order to be active, the tab has to have aref
attribute equal to this value.- All other attributes are passed to the
span
tag.
Attributes - tab
slot
ref
- Sets theactive
attribute for the tab button if the parentactive
attribute matches it's value.show
- If the tab should be rendered. Defaults totrue
.- 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>
"""