Components

Component

Tabs

Switches between related content sections within one screen.

ReactReact Native11 props
PreviewReact

Content 1

Imports

import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "@hozorica/hods-react/tabs";
import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "@hozorica/hods-react-native/tabs";

Props

PropTypeDescription
triggerLayoutfill | hugControls whether triggers fill available width or hug content.
contentLayoutfill | hugControls whether content fills the root area.
sizesmall | mediumTrigger height and text density.
stickyListbooleanPins the tab list to the top on web.
orientationhorizontal | verticalTab list direction.
value / defaultValuestringControlled and uncontrolled active tab value.
onValueChange(value) => voidCalled when a trigger changes the selected value.
lazyMount / unmountOnExitbooleanControls inactive content mounting.
notificationbooleanShows a notification dot on TabsTrigger.
disabledbooleanDisables a TabsTrigger.
swipeablebooleanCompatibility prop on TabsCarousel. Full swipe physics is not implemented yet.

Platform Support

React

Accessible tablist, tab, and tabpanel primitives with keyboard navigation, layout modes, sticky list, and optional content mounting policy.

React Native

Pressable tablist with matching trigger/content API and horizontal scrolling list behavior.

Usage

<TabsRoot defaultValue="1"><TabsList><TabsTrigger value="1">라벨1</TabsTrigger></TabsList><TabsContent value="1">Content 1</TabsContent></TabsRoot>

Notes

  • Use TabsRoot with matching TabsTrigger value and TabsContent value.
  • Arrow keys move focus and selection on web.
  • TabsCarousel currently provides a transition wrapper; drag/swipe physics is deferred.