قائمة منظمة
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 يسمي مجموعة البيانات.