Tabs

Basic tabs example demonstrating core behavior.

Package: @solidiom/tabs
Version: 0.0.1-next.0
Status: stable

Examples

import * as Tabs from "@solidiom/tabs"

;<Tabs.Root>Tabs content</Tabs.Root>

General settings and preferences.

View source

        export function TabsExample(props: TabsExampleProps) {
  const copy = () => COPY[props.locale]

  return (
    <div ref={(el) => el.setAttribute("data-hydrated", "true")} class="tabs-example">
      <Tabs.Root defaultValue="general">
        <Tabs.List aria-label="Settings">
          {copy().tabs.map((tab) => (
            <Tabs.Trigger value={tab.value}>{tab.label}</Tabs.Trigger>
          ))}
        </Tabs.List>
        {copy().tabs.map((tab) => (
          <Tabs.Content value={tab.value}>{tab.content}</Tabs.Content>
        ))}
      </Tabs.Root>
    </div>
  )
}