Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Navigation, NavigationList, NavigationItem, NavigationContent } from "@hua-labs/hua";

Pills (default)

Underline

Cards

  • • NavigationList -
  • • NavigationItem -
  • • NavigationContent -

valuestring-docs:components.navigation.props.value
defaultValuestring-docs:components.navigation.props.defaultValue
onValueChange(value: string) => void-docs:components.navigation.props.onValueChange
variant"pills" | "underline" | "cards""pills"docs:components.navigation.props.variant
scale"small" | "medium" | "large""medium"docs:components.navigation.props.scale

docs:common.basicUsagetsx
1import { Navigation, NavigationList, NavigationItem, NavigationContent } from '@hua-labs/hua';
2 
3<Navigation defaultValue="tab1">
4  <NavigationList>
5    <NavigationItem value="tab1">Tab 1</NavigationItem>
6    <NavigationItem value="tab2">Tab 2</NavigationItem>
7  </NavigationList>
8  <NavigationContent value="tab1">Content 1</NavigationContent>
9  <NavigationContent value="tab2">Content 2</NavigationContent>
10</Navigation>
docs:components.navigation.examples.variantstsx
1// Pills (기본)
2<Navigation variant="pills">...</Navigation>
3 
4// Underline
5<Navigation variant="underline">...</Navigation>
6 
7// Cards
8<Navigation variant="cards">...</Navigation>
docs:components.navigation.examples.controlledtsx
1const [active, setActive] = useState("tab1");
2 
3<Navigation value={active} onValueChange={setActive}>
4  <NavigationList>
5    <NavigationItem value="tab1">Tab 1</NavigationItem>
6    <NavigationItem value="tab2">Tab 2</NavigationItem>
7  </NavigationList>
8</Navigation>

  • •docs:common.accessibility.keyboard: docs:components.navigation.accessibility.keyboardDesc
  • •docs:components.navigation.accessibility.focusVisible: ring-1 ring-blue-400 ring-offset-2
TimelineBreadcrumb