قائمة مُنظّمة
StructuredListقائمة مُنظّمة خفيفة في React لصفوف الترويسة والنص، مع صفوف قابلة للاختيار وكثافة مضغوطة وبلا عبء فرز. تعرض جدولًا حقيقيًا.
StructuredList أخف من Table: بلا فرز أو تصفية. أضف selectable لخانات اختيار في الصفوف تتبدل بالنقر على الصف.
متى تستخدمه
استخدم StructuredList لبيانات الصفوف البسيطة التي لا تحتاج فرزًا أو تصفية: قائمة مستندات أو جهات اتصال أو خيارات بصفات قليلة. أضف selectable حين يختار المستخدم صفوفًا.
حين تحتاج البيانات فرزًا أو تصفية أو أعمدة كثيرة، استخدم Table.
أمثلة
الخصائص
الخصائص التي يعرّفها StructuredList. سمات العنصر الأصلي تمرّ كما هي.
<StructuredList>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
compact | boolean | ||
contained | boolean | ||
rowDivider | boolean | ||
colDivider | boolean | ||
selectable | boolean |
<StructuredListRow>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
selected | boolean | Selected state of a selectable row (controlled). Drives the row's
auto-rendered checkbox + data-state="selected". | |
onSelectedChange | (selected: boolean) => void | Fired when a selectable row toggles - by its checkbox, a click anywhere
on the row, or keyboard on the checkbox. | |
disabled | boolean | Visually + interactively mutes the row and its checkbox. | |
selectionLabel | string | Accessible name for a selectable row's auto-rendered checkbox. |
<StructuredListHead>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
align | Align |
<StructuredListCell>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
align | Align | ||
__control | react.ReactNode |
إمكانية الوصول
تعرض القائمة <table> أصليًا بخلايا ترويسة، فتُعلن الأعمدة مع كل قيمة. تعرض الصفوف القابلة للاختيار role="checkbox" بحالة التحديد وتتبدّل بالنقر أو Space.
أعطِ الجدول aria-label يسمّي مجموعة البيانات.