Tabs

Unterstrichene Tabs für Detailseiten und Pill-Tabs für Seitenköpfe.

The gateway answered in 1.2 s.

<Tabs defaultValue="overview" className="w-480">
      <Tabs.List aria-label="Request">
        <Tabs.Tab value="overview">Overview</Tabs.Tab>
        <Tabs.Tab value="conversation">Conversation</Tabs.Tab>
        <Tabs.Tab value="request">Request</Tabs.Tab>
        <Tabs.Tab value="response">Response</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="overview" className="pt-16 text-body text-fg-secondary">
        The gateway answered in 1.2 s.
      </Tabs.Panel>
    </Tabs>

import { Tabs, PillTabs } from "@logicplanes/kaeso-ui";

Props

children
ReactNode
Die Tab-Liste und die Bereiche.
defaultValue
string
Der ausgewählte Tab beim ersten Rendern.
onValueChange
((value: string) => void)
Wird mit dem ausgewählten Tab aufgerufen.
value
string
Der ausgewählte Tab, bei gesteuertem Wert.
variant
"pill" | "underline"
Unterstrichene Tabs für Seiten oder Pillen für kleine Gruppen.