التبويبات العمودية

تُنظّم التبويبات العمودية المحتوى في لوحات تبويب مُكدَّسة رأسياً، متاحة بأنماط الأساسي والمحايد والخط والخطّي عبر ثلاثة أحجام.

Loading demo: vertical-tabs-real-world

التثبيت

npx sdaia-ui@latest add vertical-tabs

import { VerticalTabs } from "@/components/ui/vertical-tabs"

<VerticalTabs type="primary" size="large" />

تبويبات عمودية مع مؤشر نشط ممتلئ.

Loading demo: vertical-tabs-primary

تبويبات عمودية محاطة بحاوية مؤطَّرة.

Loading demo: vertical-tabs-outline

تبويبات عمودية بنمط رمادي محايد.

Loading demo: vertical-tabs-neutral

خصائص مكوّن Tab.

Prop	Type	Default	Required
items	VerticalTabItem[]	—	required
type	'primary' \| 'neutral' \| 'line-vertical' \| 'outline'	—	optional
value	string	—	optional
defaultValue	string	—	optional
onValueChange	(value: string) => void	—	optional
disabled	boolean	false	optional