Module Solidtype_heroui.Tabs

HeroUI's Tabs: a list of tabs, each showing its panel while it is selected, Kobalte's Tabs, with HeroUI's classes from Styles.Tabs.

  <Tabs>
    <Tabs.List_container>
      <Tabs.List aria_label="Options">
        <Tabs.Tab id="overview">"Overview" <Tabs.Indicator /></Tabs.Tab>
        <Tabs.Tab id="analytics">
          <Tabs.Separator /> "Analytics" <Tabs.Indicator />
        </Tabs.Tab>
      </Tabs.List>
    </Tabs.List_container>
    <Tabs.Panel id="overview">"Your project at a glance."</Tabs.Panel>
    <Tabs.Panel id="analytics">"Metrics over time."</Tabs.Panel>
  </Tabs>

The tab selected is the one selected_key names where it is given, else the one it keeps, default_selected_key at first, or the first not disabled; selecting another calls on_selection_change with its id. A panel is on the page while its tab, of the same id, is selected.

The arrows of its orientation move focus between the tabs, round from the last to the first, and Home and End to the first and the last, skipping a disabled tab; focus selects the tab it reaches, or, with keyboard_activation=`manual, Enter and Space do.

A tab's indicator is drawn in the selected tab alone, and slides from the tab selected before as HeroUI's styles animate it.

A part is used inside a Tabs, an indicator and a separator inside a Tabs.Tab: elsewhere it raises Invalid_argument as it is made.

module List_container : sig ... end

What holds the list when its tabs may overflow it: a <div> that scrolls the list, fading at the edge content is hidden past, with a button at each end that scrolls it on by most of a view, shown while it can.

module List : sig ... end

The tabs: Kobalte's list, a <div> of role tablist.

module Tab : sig ... end

One tab: Kobalte's trigger, a <button> of role tab, which selects the panel of its id.

module Indicator : sig ... end

The selected tab's background, or its line in the secondary variant: a <div> in the tab while it is selected.

module Separator : sig ... end

A line before a tab, hidden beside the selected one: a <span>.

module Panel : sig ... end

A tab's content: Kobalte's content, a <div> of role tabpanel, on the page while the tab of its id is selected.

module Props : sig ... end