View Source Shino.UI.Tabs (shino v0.2.0-alpha.1)

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 (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a wrapper for tabs' triggers.

Attributes

  • class (:any) - Defaults to nil.
  • 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 (:any) - Defaults to nil.
  • 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 (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)