القائمة المنظَّمة
مكوّن لعرض البيانات المنظَّمة مع صفوف ورؤوس وفواصل قابلة للتخصيص، ووضع مدمج، ونمط محاط، ودعم RTL.
Loading demo: structuredlist-real-world
التثبيت
npx sdaia-ui@latest add structuredlist
الاستخدام
import { StructuredList } from "@/components/ui/structured-list"<StructuredList />الأمثلة
الافتراضي
القائمة المنظَّمة الافتراضية مع فواصل الصفوف والأعمدة بتخطيط LTR.
Loading demo: structuredlist-default
محاط
استخدم `contained={true}` لإضافة حدود حول القائمة بأكملها.
Loading demo: structuredlist-contained
مدمج
استخدم `compact={true}` لتقليل ارتفاع الصف لعرض البيانات الكثيف.
Loading demo: structuredlist-compact
بلا فواصل
اضبط `dividerRow={false}` و`dividerColumn={false}` لإزالة الفواصل.
Loading demo: structuredlist-no-dividers
مرجع الواجهة البرمجية
StructuredListProps
القائمة المنظَّمة short description
Prop | Type | Default | Required |
|---|---|---|---|
columns | StructuredListColumn[] | — | required |
compact | boolean | false | optional |
contained | boolean | false | optional |
dividerRow | boolean | true | optional |
dividerColumn | boolean | true | optional |
dividerHeader | boolean | true | optional |
rtl | boolean | false | optional |
className | string | — | optional |