صف القائمة

نظرة عامة

link

Web

tanrei-list-row

clock_loader_40

SwiftUI

TanreiListRow

radio_button_unchecked

Jetpack Compose

TanreiListRow

radio_button_unchecked

Flutter

TanreiListRow

radio_button_unchecked

React Native

ListRow

radio_button_unchecked

مولَّد من docs/status/status.json, specs/list-row.spec.json

صفوف في قائمة: صف ثابت فيه مفتاح، وصف يفتح شيئًا، وصف هو رابط

صف القائمة هو الصف الذي تتألف منه معظم القوائم: اسم، وسطر أو سطران عنه، وشيء قبله وشيء بعده. القائمة صندوق يرتّب عناصره ويجعلها إجراءات أو روابط أو خيارات؛ وصف القائمة هو ما يعرضه عنصر واحد. ضعه في عنصر قائمة، أو استخدمه وحده حيث يلزم صف واحد.

لا يرسم الصف إلا النص والرموز. ليس له تعبئة ولا حدّ ولا تمرير مؤشر ولا تركيز خاص به، ولا يصبح قابلًا للضغط بنفسه أبدًا: يقرّر ذلك عنصرُ القائمة الذي يحتويه.

في الويب هو <tanrei-list-row>. ولم تنفّذه المنصات الأخرى بعد.

الاستخدام

link

<!-- في القائمة يكون الصف ابنًا مباشرًا للعنصر. والعنصر يجعله إجراءً أو رابطًا أو خيارًا. -->
<tanrei-list dividers>
  <tanrei-list-item interactive>
    <tanrei-list-row leading-icon="wifi" headline="واي فاي" supporting-text="متصل بشبكة Harbour"
                     trailing-icon="chevron_right"></tanrei-list-row>
  </tanrei-list-item>
  <tanrei-list-item>
    <!-- يمكن للصف الثابت أن يحمل عنصر تحكم خاصًا به؛ سمِّه بالعنوان الرئيسي للصف. -->
    <tanrei-list-row headline="بلوتوث">
      <tanrei-switch slot="trailing" label="بلوتوث" label-hidden></tanrei-switch>
    </tanrei-list-row>
  </tanrei-list-item>
</tanrei-list>

<!-- صورة في البداية، وثلاثة أسطر من النص. -->
<tanrei-list-row overline="أمس" headline="ميرا أوكادا" supporting-text="صور الميناء في المجلد المشترك الآن." supporting-lines="2">
  <tanrei-avatar slot="leading" initials="MO" decorative></tanrei-avatar>
</tanrei-list-row>

<script type="module">
  import '@tanrei/web/components/list';
  import '@tanrei/web/components/list-row';
  import '@tanrei/web/components/switch';
  import '@tanrei/web/components/avatar';
</script>

import { List, ListItem, ListRow } from '@tanrei/react';

<List dividers>
  {networks.map((network) => (
    <ListItem key={network.id} interactive onClick={() => open(network)}>
      <ListRow leadingIcon="wifi" headline={network.name} supportingText={network.status} trailingIcon="chevron_right" />
    </ListItem>
  ))}
</List>

الصف في كل نوع من عناصر القائمة

link

يعرف الصف من عنصر القائمة الذي يحتويه ما هذا العنصر، فيرسم نفسه ليلائمه:

• عنصر ثابت، أو صف وحده. يرسم الصف حشوته وألوانه بنفسه. ويحتفظ عنصر التحكم في فتحته الأولى أو الأخيرة بتركيزه وضغطه.
• عنصر تفاعلي، أو عنصر رابط، أو خيار. يضيف العنصر حشوة إلى محتواه، فلا يرسم الصف حشوة خاصة به ويحتفظ بارتفاعه: يبقى ارتفاع العمود الذي تختلط فيه العناصر الثابتة والقابلة للضغط واحدًا. ويأخذ العنصر اسمه من العنوان الرئيسي للصف، ووصفه من نصوصه الأخرى. ويرسم الخيار المختار نصوص الصف ورموزه بلون محتواه المختار.
• قائمة يُعاد ترتيبها. يقف مقبض القائمة في بداية العنصر، قبل الصف، في مكان الحشوة الأولى للصف.
• صفوف لها رمز وصفوف بلا رمز. حيث تطلب ذلك الخاصية iconSpace للقائمة (افتراضيًا، ما دام صف آخر في القائمة يرسم رمزًا في البداية)، يحتفظ الصف الذي ليس له جزء في البداية بمساحة رمز فارغة، ليبدأ عنوانه الرئيسي حيث تبدأ عناوين الصفوف الأخرى. والصف الذي يقف وحده لا يحتفظ بأي مساحة.
• قائمة أفقية، أو قائمة تلتف أسطرها. في سطر واحد يكون الصف بعرض أجزائه ولا يُقصّ أبدًا؛ وفي أسطر تلتف لا يكون أعرض من القائمة، ويُقصّ نصه حيث يلزم.

اجعل الصف ابنًا مباشرًا للعنصر. أما الصف الملفوف في عنصر آخر داخل عنصر القائمة فلا يُخبَر بشيء، ويُرسم كما يُرسم وحده.

المواصفات

link

سطر واحد وسطران وثلاثة أسطر؛ صورة وقيمة؛ compact

البنية

الجزء	الوصف
1 container	The row's box: as wide as its layout gives it, at least the height of its number of lines, padded at its start, its end, above and below — or, inside a list item that is an action, a link or an option, padded by that item. It draws no fill, no edge, no divider and no state of its own.
2 leading · اختياري	The part at the row's start: the product's content of the leading slot (an avatar, a picture, a checkbox, a radio button, a switch), or else the glyph leadingIcon names; or, where the row draws neither and the list it is in asks for it (LRW-16), an empty room of a glyph's size.
3 overline · اختياري	A short line above the headline: a category, a source, a time. One line.
4 headline	The row's name, on one line. The list item the row is in is named by it.
5 supporting-text · اختياري	The line or two under the headline: what the row is about, its state, a preview of a message.
6 trailing-text · اختياري	A short value at the row's end: a count, a size, a time, the current value of a setting. One line, never more than half of the row.
7 trailing · اختياري	The product's content of the trailing slot, after the trailing text: a switch, a checkbox, an icon-only Button, a badge.
8 trailing-icon · اختياري	A glyph at the row's very end: a chevron that says the row opens something, a status glyph. Decorative.
9 tooltip · اختياري	The whole of a headline or a supporting text that is cut (LRW-7): a plain tooltip with the headline, or a rich one with the headline as its title and the supporting text, over the row's text on hover and on the keyboard focus of the list item the row is in. Only while something is cut.

الخصائص

الخاصية	النوع	القيمة الافتراضية	الوصف
headline	string	""	The row's name, drawn on one line and cut with an ellipsis where it does not fit (the whole in the tooltip). The list item the row is in is named by it where the item has no label of its own.
overline	string	""	A short line above the headline: a category, a source, a time. One line, cut where it does not fit. Empty: none.
supportingText	string	""	The text under the headline, on as many lines as supportingLines says and cut on the last of them with an ellipsis (the whole in the tooltip). Empty: none.
supportingLines	number	1	How many lines the supporting text may take: 1 or 2. Two lines make the row a three-line row (LRW-3). Another number is read as the nearer of the two.
leadingIcon	string	""	The name of a glyph of the system's icon set drawn at the row's start: what the row is (a place, a setting, a kind of file). Decorative. The leading slot's content is drawn in its place where the slot holds any. Empty: none — or, in a List that asks for it (its iconSpace), the glyph's room, empty (LRW-16).
trailingText	string	""	A short value at the row's end: a count, a size, a time, a setting's current value. One line, never more than half of the row's inner width. Empty: none.
trailingIcon	string	""	The name of a glyph of the system's icon set drawn at the row's very end: a chevron that says the row opens something (chevron_right), a status. Decorative, and mirrored in a right-to-left layout where the icon set says the glyph points. Empty: none.
density	regular | compact	"regular"	How much room the row takes: its least heights and the space above and below its text. regular (56, 72 and 88 for one, two and three lines in the default system) is for a product used by touch as well as by pointer; compact (40, 56 and 72) is for a tool used with a pointer. An item that is an action, a link or an option is never lower than the list's own minimum height and the target. Inside an item of a List, the list's density is drawn in place of this one (LRW-17). A design system may add values.

المنافذ

المنفذ	الوصف
leading	Content at the row's start in place of leadingIcon: an avatar, a picture, or — while the row is static — a checkbox, a radio button or a switch. Drawn at its own size and given no style.
trailing	Content at the row's end, after the trailing text and before the trailing glyph: a badge, or — while the row is static — a switch, a checkbox or an icon-only Button. Drawn at its own size and given no style.

الحالات

السلوك

متطلبات بصيغة EARS. يُختبر تنفيذ كل منصة مقابل هذه المعرّفات. يُعرض نص المتطلبات كما ورد في ملف المواصفة، بالإنجليزية.

المعرّف	المتطلب
LRW-1	THE list row SHALL be as wide as its layout gives it — and WHERE its layout sizes it to its content (an item of a horizontal list) as wide as its parts on one line — and SHALL lay out from its start edge: the leading part (LRW-4), the text (LRW-2), which takes the width that is left, and the trailing part (LRW-6), comp.list-row.container.gap apart, an absent part taking no room and no gap. WHILE it draws its own paddings (LRW-8) it SHALL keep comp.list-row.container.padding-inline-start before its first part, comp.list-row.container.padding-inline-end after its last, and the padding of its density (comp.list-row.container.padding-block.regular for regular, comp.list-row.container.padding-block.compact for compact) above its first line and below its last. THE list row SHALL draw no fill, no edge, no divider and no state of its own, SHALL take no focus and SHALL emit no event: it is never pressable by itself.
LRW-2	THE list row SHALL draw its headline in comp.list-row.headline.typescale and comp.list-row.headline.color on one line, cut at the end of its own direction with an ellipsis where it does not fit; WHILE overline is not empty, the overline above it in comp.list-row.overline.typescale and comp.list-row.overline.color, on one line cut the same way; WHILE supportingText is not empty, the supporting text below it in comp.list-row.supporting-text.typescale and comp.list-row.supporting-text.color, starting where the headline starts, on at most as many lines as supportingLines says — wrapping at the spaces of its words and cut with an ellipsis at the end of its last line where it takes more. The overline, the headline and the supporting text SHALL follow one another with no space between their lines. WHEN supportingLines is not 1 or 2 THE list row SHALL read it as the nearer of the two (1 for anything less than 1.5 or not a number) and in debug builds report it. The whole of every text SHALL be in what assistive technology is given (LRW-10), cut or not.
LRW-3	THE list row SHALL count its lines of text: one line WHILE it has a headline alone; two lines WHILE it has an overline or a supporting text of one line besides the headline; three lines WHILE it has both an overline and a supporting text, or a supporting text WHILE supportingLines is 2. It SHALL be at least the height of that count in its density — comp.list-row.container.height.one-line.regular, comp.list-row.container.height.two-line.regular or comp.list-row.container.height.three-line.regular for regular, comp.list-row.container.height.one-line.compact, comp.list-row.container.height.two-line.compact or comp.list-row.container.height.three-line.compact for compact — growing with its text and never clipping it, and SHALL centre its text in the height it has. WHILE it has one or two lines it SHALL centre the leading and the trailing part on the text; WHILE it has three it SHALL align them with the top of the text, so that a picture beside three lines stays with the headline.
LRW-4	WHERE the leading slot holds content THE list row SHALL draw that content at the row's start, at its own size and given no style, and SHALL NOT draw leadingIcon; WHERE it holds none and leadingIcon is not empty, THE list row SHALL draw that glyph of the system's icon set in a box of comp.list-row.leading-icon.size in comp.list-row.leading-icon.color, hidden from assistive technology, nothing in its place until the icon set can draw it, mirrored in a right-to-left layout WHERE the icon set says the glyph points. WHEN both are given THE list row SHALL draw the slot's content and in debug builds report that leadingIcon is not drawn.
LRW-6	WHILE trailingText is not empty THE list row SHALL draw it after the text, on one line, in comp.list-row.trailing-text.typescale and comp.list-row.trailing-text.color; it SHALL NOT wrap, and WHILE it would take more than half of the row's inner width it SHALL be cut at the end of its own direction with an ellipsis, so that the text keeps at least half. After it THE list row SHALL draw the trailing slot's content, at its own size and given no style, and after that, WHILE trailingIcon is not empty, that glyph of the system's icon set in a box of comp.list-row.trailing-icon.size in comp.list-row.trailing-icon.color, hidden from assistive technology, nothing in its place until the icon set can draw it, and mirrored in a right-to-left layout WHERE the icon set says the glyph points (a chevron_right points to the start there). The trailing text, the slot's content and the glyph SHALL be comp.list-row.container.gap apart.
LRW-7	WHILE a row's headline or its supporting text is cut (LRW-2) THE list row SHALL show the whole of it in a Tooltip component over the row's text WHEN a fine pointer rests on the row for the tooltip's show delay and WHEN the list item the row is the content of receives keyboard focus, and SHALL hide it WHEN the pointer leaves the row and the tooltip for the hide delay, WHEN that focus leaves, WHEN the user presses Escape (which then does nothing else), and WHEN the row is pressed; the tooltip SHALL stay while the pointer is over it (WCAG 1.4.13: dismissible, hoverable, persistent). It SHALL hold the headline alone WHERE the row has no supporting text, and the headline as the title and the supporting text as the text of a rich tooltip WHERE it has one. WHILE neither is cut THE list row SHALL show no tooltip. The tooltip SHALL be hidden from assistive technology, which is given the whole text (LRW-10); no touch long-press opens it, because a long press on a row is the platform's (and the List's, which lifts an item of a reorderable list).
LRW-8	WHILE a list row is the content of a list item that is an action, a link or an option (LST-48) THE list row SHALL draw no padding of its own — the item's paddings are the row's (LST-8) — and SHALL be at least its height (LRW-3) less twice comp.list.container.padding-block.regular tall, so that the item is as tall as the row standing alone and a column that mixes static items and actions keeps one height; WHILE it stands alone, or is the content of a static item or of an item of a reorderable list, THE list row SHALL draw its own paddings (LRW-1). The row SHALL fit every arrangement of the List: in a column it is as wide as the list; in a line it is as wide as its parts and never cut; in lines that wrap it is never wider than the list, and cut where it must be; in a reorderable list the List's handle stands before it, the item's gap away, and THE list row SHALL draw no padding before its first part, the handle and that gap standing in its place.
LRW-9	WHILE a list row is the content of a list item that is a selected option (LST-48) THE list row SHALL draw every text and glyph it draws in the content color the item hands its content (comp.list.selected.content.color, LST-8) instead of its own colors, so that the row reads on the selected fill as the item's own text does; the opacity of a disabled item (LST-15) SHALL apply to the whole row, its slots' content included, unchanged. THE list row SHALL leave the color of its slots' content to that content.
LRW-10	THE list row SHALL expose its texts to assistive technology as text, in the order they are drawn — the overline, the headline, the supporting text, the trailing text — whole, whether cut or not, and its glyphs not at all; it SHALL add no role, name or state of its own. WHILE it is the content of a list item, the item SHALL be named by the row's headline and described by its overline, supporting text and trailing text where the item is an action, a link or an option (LST-49). WHILE headline is empty THE list row SHALL still draw the rest, and in debug builds report that it has no headline, so that the item it is in has no name.
LRW-11	WHILE a list row stands alone, or is the content of a static item or of an item of a reorderable list, THE list row SHALL leave a control in its leading or trailing slot its own semantics, focus, keys and press, in the order the row draws them; the product names such a control with the row's headline ("Wi-Fi" for a switch, "Remove Inter" for a button). WHILE it is the content of an action, a link or an option, a control in its slots is the List's to report (LST-20), and THE list row SHALL draw it as given.
LRW-12	THE list row SHALL lay out its overline, its headline, its supporting text and its trailing text each as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right name, an address or a number with its unit keeps its order in a right-to-left layout; THE list row SHALL still place them and align their lines by the layout direction, so that in a right-to-left layout the leading part stands at the right edge and the trailing part at the left, and SHALL cut each at the end of its own direction.
LRW-13	WHILE the text size is enlarged THE list row SHALL grow its texts with it, keep its paddings and gaps and grow in height; a headline and a supporting text SHALL still be cut with an ellipsis and shown whole in the tooltip of LRW-7, the trailing text SHALL keep to half of the row, and THE list row SHALL set no fixed height, SHALL lose no content when the reader raises line height, paragraph spacing, letter spacing or word spacing (a cut text is whole in its tooltip and in what assistive technology is given), and SHALL need no horizontal scrolling at a width of 320 points with text at 200 %.
LRW-14	WHEN density names a value that the active design system does not have THE list row SHALL render with the default density's tokens and in debug builds report the unknown value; a density a design system added SHALL be drawn from that density's tokens, as the core values are. WHEN headline, overline, supportingText, trailingText, leadingIcon, trailingIcon, supportingLines or density changes while the row is shown THE list row SHALL draw the new form at once, without a motion of its own, and the list item it is in SHALL take the new name and description (LST-49).
LRW-15	WHILE forced colors are active THE list row SHALL draw its texts and its glyphs in the system's text color, and in the system's color for disabled text WHILE it is the content of a disabled item; it SHALL draw nothing that carries meaning in a color alone.
LRW-16	WHILE a list row has no leading part (LRW-4) THE list row SHALL begin its text at its start padding — except WHILE the list item it is the direct child of tells it to keep the room of a leading glyph (LST-48, LST-50), where it SHALL keep before its text a box of comp.list-row.leading-icon.size, comp.list-row.container.gap from the text, which draws nothing and is nothing to assistive technology, so that its headline starts where the headline of a row with a glyph does. WHILE it has no trailing part its text SHALL reach its end padding. It SHALL keep no other room for a part it does not draw: a row that draws a leading part keeps none besides it, and a row standing alone, or nested deeper in an item's content, keeps none, lining itself up with no other row.
LRW-17	WHILE the row is the direct child of an item of a List THE list row SHALL draw at the density the list tells it (LST-51) and SHALL NOT read its own density, so that the rows of one list are of one density; standing anywhere else it SHALL draw at its own. WHEN the density the list tells it changes THE list row SHALL draw the new form at once, as LRW-14 says of its own.

مطابقة الأسماء بين المنصات

التكافؤ لا يعني واجهات برمجية متطابقة. تعبّر كل منصة عن العقد نفسه بأسلوبها.

المواصفة	Web	SwiftUI	Jetpack Compose	Flutter	React Native
المكوّن	tanrei-list-row	TanreiListRow	TanreiListRow	TanreiListRow	ListRow
headline · الخاصية	headline	headline	headline	headline	headline
overline · الخاصية	overline	overline	overline	overline	overline
supportingText · الخاصية	supportingText	supportingText	supportingText	supportingText	supportingText
supportingLines · الخاصية	supportingLines	supportingLineLimit	supportingMaxLines	supportingMaxLines	supportingLines
leadingIcon · الخاصية	leadingIcon	leadingIcon	leadingIcon	leadingIcon	leadingIcon
trailingText · الخاصية	trailingText	trailingText	trailingText	trailingText	trailingText
trailingIcon · الخاصية	trailingIcon	trailingIcon	trailingIcon	trailingIcon	trailingIcon
density · الخاصية	density	density	density	density	density
ملاحظات	<tanrei-list-row headline="Wi-Fi" supporting-text="Connected" leading-icon="wifi">, placed as the direct child of a tanrei-list-item or on its own. The attributes are supporting-text, supporting-lines, leading-icon, trailing-text and trailing-icon. The slots are leading and trailing (slot="leading" on the product's element). The item tells the row what it is through an internal property it sets on its direct children; a row nested deeper in an item's content draws itself as standing alone. The tooltip is a tanrei-tooltip in the row's shadow root, made when it first opens.	TanreiListRow(headline:, overline:, supportingText:, leadingIcon:, trailingText:, trailingIcon:) { leading } trailing: { trailing } with view builders for the two slots. It reads what its TanreiListItem is from the environment the item sets. The tooltip is the platform's .help(_:) on macOS and nothing on iOS, where a cut text is whole in the accessibility label.	TanreiListRow(headline = "Wi-Fi", supportingText = …, leading = { … }, trailing = { … }) with composable lambdas for the two slots. It reads what its TanreiListItem is from a CompositionLocal the item provides.	TanreiListRow(headline: 'Wi-Fi', supportingText: …, leading: …, trailing: …) with widgets for the two slots. It reads what its TanreiListItem is from an InheritedWidget the item places above its content.	<ListRow headline="Wi-Fi" supportingText="…" leading={…} trailing={…} /> with React nodes for the two slots. It reads what its ListItem is from a context the item provides.

الرموز

الرمز	يشير إلى	القيمة المحلولة (فاتح)
--tanrei-comp-list-row-container-gap	sys.space.space200	16px
--tanrei-comp-list-row-container-height-one-line-compact	—	40px
--tanrei-comp-list-row-container-height-one-line-regular	—	56px
--tanrei-comp-list-row-container-height-three-line-compact	—	72px
--tanrei-comp-list-row-container-height-three-line-regular	—	88px
--tanrei-comp-list-row-container-height-two-line-compact	—	56px
--tanrei-comp-list-row-container-height-two-line-regular	—	72px
--tanrei-comp-list-row-container-padding-block-compact	—	4px
--tanrei-comp-list-row-container-padding-block-regular	—	8px
--tanrei-comp-list-row-container-padding-inline-end	sys.space.space200	16px
--tanrei-comp-list-row-container-padding-inline-start	sys.space.space200	16px
--tanrei-comp-list-row-headline-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-list-row-leading-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-list-row-leading-icon-size	sys.icon.medium	24px
--tanrei-comp-list-row-overline-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-list-row-supporting-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-list-row-trailing-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-list-row-trailing-icon-size	sys.icon.medium	24px
--tanrei-comp-list-row-trailing-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-list-row-headline-typescale	sys.typescale.body	400 14px/1.5714
--tanrei-comp-list-row-overline-typescale	sys.typescale.label-small	500 12px/1.3333
--tanrei-comp-list-row-supporting-text-typescale	sys.typescale.body-small	400 13px/1.5385
--tanrei-comp-list-row-trailing-text-typescale	sys.typescale.body-small	400 13px/1.5385

نماذج الاختبار

عروض مرجعية. تلتقط كل المنصات لقطة لكل نموذج بالمعرّف نفسه حتى يمكن مقارنة النتائج.

density: regular (12)

one-line

headline: Wi-Fi

two-line

headline: Wi-Fi supportingText: Connected to Harbour

three-line

headline: Wi-Fi overline: Network supportingText: Connected to Harbour

supporting-two-lines

headline: Mira Okada supportingText: The harbour photos are in the shared fol… supportingLines: 2

leading-icon

headline: Wi-Fi supportingText: Connected to Harbour leadingIcon: wifi

leading-picture

headline: Mira Okada supportingText: Online slots: leading

trailing-text

headline: Storage supportingText: Photos, documents and backups trailingText: 12 GB

trailing-icon

headline: Display trailingIcon: chevron_right

trailing-control

headline: brief.pdf supportingText: 820 KB leadingIcon: description slots: trailing

all-parts

headline: Harbour photos overline: Shared supportingText: 48 items, edited today leadingIcon: folder trailingText: 2.4 GB trailingIcon: chevron_right

long-text

headline: Re: the harbour photos, the market stree… supportingText: The captions are in the shared document… leadingIcon: mail trailingText: 09:41

rtl

headline: صور الميناء supportingText: 48 عنصرًا leadingIcon: folder trailingText: 2.4 GB trailingIcon: chevron_right direction: rtl

density: compact (2)

compact

headline: brief.pdf supportingText: 820 KB leadingIcon: description density: compact

compact-one-line

headline: brief.pdf trailingText: 820 KB density: compact

مولَّد من specs/list-row.spec.json, tokens/comp/list-row.tokens.json, design/tokens/

الإرشادات

link

متى تُستخدم

link

استخدم صف القائمة لكل عنصر في قائمة أشخاص أو أماكن أو إعدادات أو رسائل أو ملفات تعرض كلها الأجزاء نفسها. وضع محتواك أنت في عنصر القائمة حين تكون العناصر مربعات أو بطاقات أو صورًا، واستخدم عنصر الملف لملف يُرسَل.

الأجزاء

link

الجزء	الاستخدام
العنوان الرئيسي	اسم العنصر. به يُنادى عنصر القائمة لدى التقنيات المساعدة، وفي مقبض القائمة التي يُعاد ترتيبها، وفي البحث بالكتابة.
السطر العلوي	فئة أو مصدر أو وقت قصير فوق الاسم.
النص المساعد	ما يدور حوله العنصر، أو حالته، أو بداية رسالة: سطر واحد، أو سطران مع supportingLines.
الرمز أو الفتحة في البداية	نوع الشيء الذي يمثله العنصر (leadingIcon)، أو صورته الرمزية أو صورته (الفتحة leading).
النص في النهاية	قيمة قصيرة: عدد، أو حجم، أو وقت، أو القيمة الحالية لإعداد.
الفتحة في النهاية	شارة، أو في الصف الثابت مفتاح أو مربع اختيار أو زر بأيقونة فقط.
الرمز في النهاية	سهم يقول إن الصف يفتح شيئًا، أو حالة.

يُقصّ العنوان الرئيسي والسطر العلوي والنص المساعد بعلامة حذف حيث لا تتسع لها المساحة، ويعرض التلميح العنوان الرئيسي والنص المساعد المقصوصين كاملين عند تمرير المؤشر وعند تركيز لوحة المفاتيح. ولا يأخذ النص في النهاية أكثر من نصف الصف أبدًا.

الكثافة

link

في النظام الافتراضي ترتفع صفوف regular إلى 56 و72 و88 لسطر واحد وسطرين وثلاثة أسطر، لمنتج يُستخدم باللمس وبالمؤشر معًا. وصفوف compact (40 و56 و72) لأداة تُستخدم بالمؤشر. ولا يكون الإجراء أو الرابط أو الخيار أبدًا أدنى من الحد الأدنى لارتفاع القائمة نفسها ومن هدف اللمس، أيًّا كانت الكثافة.

افعل

link

• أعطِ كل صف عنوانًا رئيسيًا. واجعل السطر العلوي فئة قصيرة، والنص في النهاية قيمة قصيرة.
• في القائمة، لا تعطِ رمزًا للصف الذي ليس لديه رمز يعرضه: تحتفظ القائمة بمساحته، فتبقى العناوين الرئيسية مصطفّة. أما مساحة الصورة فلا يُحتفظ بها، فأعطِ كل صفوف العمود الواحد صورة، أو لا تعطِ أيًّا منها.
• اجعل الصف الذي يفتح شيئًا محتوى عنصر تفاعلي أو عنصر رابط.

لا تفعل

link

• لا تضع عنصر تحكم في صف هو محتوى عنصر تفاعلي أو عنصر رابط أو خيار. فذلك العنصر عنصر واحد، ولا تستطيع التقنيات المساعدة الوصول إلى عنصر تحكم داخله. أبقِ هذا الصف ثابتًا.
• لا تجعل الصف قابلًا للضغط بنفسك (بمعالج نقر على الصف). استخدم عنصر القائمة، الذي يحمل التركيز والحالات والهدف الأدنى.
• لا تعتمد على الرمز في النهاية وحده لتقول ما يفعله الصف. يقول ذلك العنوانُ الرئيسي ودورُ العنصر.

إمكانية الوصول

link

الدور

none of its own: its texts are text (the content of a list item, or of the page)

التسمية

The row's texts are read in the order they are drawn: overline, headline, supporting text, trailing text. Its glyphs are decorative and hidden. A list item that holds the row is named by the row's headline where the item has no label, and an item that is an action, a link or an option is described by the row's overline, supporting text and trailing text (LST-49). A control in a slot is named by the product, with the row's headline.

الحد الأدنى للهدف

تستوفي مساحة اللمس الحد الأدنى لحجم الهدف حتى لو كان الحجم المرئي أصغر. minimum 32px · pointer 44px · spacing 8px · touch 48px

لوحة المفاتيح

المفاتيح	الإجراء

ملاحظات

• The row is never pressable. Pressing, focus, hover, selection, the check, the handle and the dividers are the List's: a row that opens something is the content of an interactive item or a link item, and a row that is chosen is the content of an option. This keeps one element per item for assistive technology, and one target per item for a pointer.
• The row learns from the list item it is in what that item is (LST-48): inside an action, a link or an option it leaves the paddings to the item, and inside a selected option it takes the item's selected content color. Standing alone, or in a static item, it pads itself and draws its own colors.
• A control in a slot (a switch, a checkbox, an icon-only Button) belongs only in a static row — standing alone, or in a static or reorderable item — where it keeps its own semantics and focus. An action, a link or an option is one element to assistive technology and cannot hold another one.
• The headline, the overline and the supporting text are cut where they do not fit and shown whole in a tooltip; assistive technology always gets the whole text.
• Wherever a row stands in a column of rows that some have a leading glyph and some do not, give every row a glyph or none, so that the texts line up.

مولَّد من specs/list-row.spec.json, tokens/sys/measure.tokens.json

ما يتكفل به المكوّن

link

• تُقرأ نصوص الصف نصًّا، بالترتيب الذي تُرسم به: السطر العلوي، ثم العنوان الرئيسي، ثم النص المساعد، ثم النص في النهاية. وتُخفى رموزه.
• يأخذ عنصر القائمة الذي يحتوي الصف اسمه من العنوان الرئيسي للصف إن لم تكن له تسمية خاصة، ويوصف الإجراء أو الرابط أو الخيار بالسطر العلوي والنص المساعد والنص في النهاية.
• يصل النص المقصوص كاملًا دائمًا إلى التقنيات المساعدة. ويُخفى تلميحه عنها، ويُفتح عند تمرير المؤشر وعند تركيز لوحة المفاتيح على العنصر، ويبقى ما دام المؤشر فوقه، ويُغلق بمفتاح Escape.
• في التخطيط من اليمين إلى اليسار يُعكس الصف، ويحتفظ كل نص باتجاهه.
• في الألوان المفروضة تأخذ النصوص والرموز لون نص النظام، ولون النص المعطّل في العنصر المعطّل.
• تُبلغ إصدارات التصحيح عن صف بلا عنوان رئيسي، وعن supportingLines ليس 1 ولا 2، وعن رمز في البداية تحلّ محله الفتحة الأولى، وعن كثافة غير معروفة.

ما عليك فعله

link

• أعطِ الصف headline.
• سمِّ عنصر التحكم في الصف الثابت بالعنوان الرئيسي للصف: «بلوتوث» للمفتاح، و«إزالة brief.pdf» للزر.
• أعطِ الصورة الرمزية أو الصورة في الفتحة الأولى بديلًا نصيًّا خاصًا بها، أو أخفِها حين يكون العنوان الرئيسي قد سمّى الشخص.