التبويبات الأفقية

تتيح التبويبات الأفقية للمستخدمين التنقّل بين الأقسام داخل العرض ذاته. متوفّرة بخمسة أنماط بصرية وثلاثة أحجام مع دعم كامل لـ RTL.

Loading demo: horizontal-tabs-real-world

التثبيت

npx sdaia-ui@latest add horizontal-tabs

import { HorizontalTabs } from "@/components/ui/horizontal-tabs"

<HorizontalTabs type="primary" size="medium" />

النمط الافتراضي للتبويب مع مؤشر نشط ممتلئ.

Loading demo: horizontal-tabs-primary

تبويبات مع خطّ سفلي أسفل التبويب النشط.

Loading demo: horizontal-tabs-underline

تبويبات محاطة بإطار خطّي.

Loading demo: horizontal-tabs-outline

تبويبات مع ظلّ مُطبَّق على التبويب النشط.

Loading demo: horizontal-tabs-shadow

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

Loading demo: horizontal-tabs-neutral

التبويبات الأفقية متوفّرة بأحجام صغير ومتوسط وكبير.

Loading demo: horizontal-tabs-sizes

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

Prop	Type	Default	Required
items	HorizontalTabItem[]	-	required
type	'primary' \| 'neutral' \| 'underline' \| 'shadow' \| 'outline'	'primary'	optional
size	'sm' \| 'md' \| 'lg'	'md'	optional
value	string	-	optional
defaultValue	string	-	optional
onValueChange	(value: string) => void	-	optional
disabled	boolean	false	optional