View Source Shino.UI.Tabs (shino v0.1.0-alpha.0)
Provides tabs related components.
Displays a set of layered sections of content-known as tab panels—that are displayed one at a time.
Examples
<Tabs.root
:let={{root, default_value}}
id="settings"
default_value="account"
class="w-[400px]"
>
<Tabs.list class="w-full grid grid-cols-2">
<Tabs.trigger root={root} value="account">account</Tabs.trigger>
<Tabs.trigger root={root} value="password">password</Tabs.trigger>
</Tabs.list>
<Tabs.content value="account">
Account
</Tabs.content>
<Tabs.content value="password">
Password
</Tabs.content>
</Tabs.root>
Above tabs should be usable, but to avoid of the flash of unstyled content, extra classes should be added for tabs content.
<Tabs.root
:let={{root, default_value}}
id="settings"
default_value="account"
class="w-[400px]"
>
<Tabs.list class="w-full grid grid-cols-2">
<Tabs.trigger root={root} value="account">account</Tabs.trigger>
<Tabs.trigger root={root} value="password">password</Tabs.trigger>
</Tabs.list>
<Tabs.content value="account" class={if default_value != "account", do: "hidden"}>
Account
</Tabs.content>
<Tabs.content value="password" class={if default_value != "password", do: "hidden"}>
Password
</Tabs.content>
</Tabs.root>
References
Summary
Functions
Renders the content associated to a tab.
Renders a wrapper for tabs' triggers.
The root contains all the parts of a form.
Renders a tab trigger.
Functions
Renders the content associated to a tab.
Attributes
value
(:string
) (required) - unique for tab content.class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a wrapper for tabs' triggers.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The root contains all the parts of a form.
Attributes
id
(:string
) (required)default_value
(:string
) (required)class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a tab trigger.
Attributes
root
(:string
) (required) - id of root tabs tag.value
(:string
) (required) - target value of tab content.class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)