列表行
一行文本，前后各有一些内容。一个标题、其上方的一行短文本和下方的一两行文本；起始处是字形、图片或控件，末尾是一个简短的值、字形或控件。放在列表项中时适配列表的每种模式，也可以单独使用。
- 类别
- 容器
- 令牌
comp.list-row- 层级
- 基础
- Web
tanrei-list-rowclock_loader_40 - SwiftUI
TanreiListRowradio_button_unchecked - Jetpack Compose
TanreiListRowradio_button_unchecked - Flutter
TanreiListRowradio_button_unchecked - React Native
ListRowradio_button_unchecked
生成自 docs/status/status.json, specs/list-row.spec.json
列表中的行：带开关的静态行、打开某物的行，以及作为链接的行
列表行是大多数列表由之构成的那种行：一个名称、关于它的一两行文字，以及放在它前面和后面的内容。列表是一个容器，负责排列各项并把它们变成操作、链接或选项；列表行是某一项显示的内容。把它放在列表项中，或者在只需要一行的地方单独使用。
行只绘制文本和字形。它没有自己的填充、边框、悬停和焦点，本身也从不可按：这由它所在的列表项决定。
在 Web 上它是 <tanrei-list-row>。其他平台尚未实现。
<!-- 在列表中：行是列表项的直接子元素。列表项把它变成操作、链接或选项。 -->
<tanrei-list dividers>
<tanrei-list-item interactive>
<tanrei-list-row leading-icon="wifi" headline="Wi-Fi" 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="冈" 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>行从它所在的列表项得知这一项是什么，并据此绘制自己：
- 静态项，或单独使用的行。 行绘制自己的内边距和自己的颜色。起始或末尾插槽中的控件保留自己的焦点和按下。
- 交互项、链接项或选项。 列表项为内容加内边距，所以行不绘制自己的内边距，只保持自己的高度：静态项和可按的项混排的一列仍保持同一高度。列表项以行的标题命名，并以行的其他文本描述。被选中的选项会以其选中时的内容颜色绘制行的文本和字形。
- 可重新排序的列表。 列表的手柄位于该项起始处、行的前面，取代行起始侧的内边距。
- 有字形和没有字形的行。 当列表的
iconSpace要求时（默认情况下，即列表中另有一行画了前置字形时），没有前置部分的行会为字形保留空间并留空，使其标题与其他行的标题从同一位置开始。单独使用的行不保留。 - 水平列表或换行的列表。 排成一行时，行的宽度等于其各部分的宽度，从不截断；换行时，行不会比列表更宽，必要时文本会被截断。
请把行作为列表项的直接子元素。在列表项中被其他元素包裹的行得不到任何信息，会像单独使用时那样绘制。
一行、两行和三行；图片和值；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 形式写成的需求。每个平台的实现都按这些 ID 逐条测试。需求原文取自规格文件，原样以英文呈现。
| ID | 需求 |
|---|---|
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. |
各平台名称对照
对等并不意味着 API 完全相同。同一份契约，由各平台以自己的惯用方式表达。
| 规格 | 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 | |
--tanrei-comp-list-row-leading-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-list-row-leading-icon-size | sys.icon.medium | 24px |
--tanrei-comp-list-row-overline-color | sys.color.on-surface-variant | |
--tanrei-comp-list-row-supporting-text-color | sys.color.on-surface-variant | |
--tanrei-comp-list-row-trailing-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-list-row-trailing-icon-size | sys.icon.medium | 24px |
--tanrei-comp-list-row-trailing-text-color | sys.color.on-surface-variant | |
--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 |
测试样例
作为基准的渲染结果。所有平台都以相同的 ID 为每个样例截取快照，以便相互比较。
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/
当列表中的人、地点、设置、消息或文件都显示同样的几个部分时，为每一项使用列表行。如果各项是图块、卡片或图片，就在列表项中放入你自己的内容；正在发送的文件使用文件项。
| 部分 | 用途 |
|---|---|
| 标题 | 该项的名称。辅助技术、可重新排序列表的手柄和输入查找都用它来称呼这一列表项。 |
| 上标文本 | 名称上方的简短类别、来源或时间。 |
| 辅助文本 | 该项的内容、状态、消息的开头：一行，或用 supportingLines 设为两行。 |
| 前置字形或插槽 | 该项是哪一类东西（leadingIcon），或它的头像或图片（leading 插槽）。 |
| 后置文本 | 一个简短的值：数量、大小、时间、设置的当前值。 |
| 末尾插槽 | 徽章；在静态行中可以是开关、复选框或纯图标按钮。 |
| 后置字形 | 表示该行会打开某物的 V 形箭头，或一个状态。 |
标题、上标文本和辅助文本放不下时会以省略号截断；被截断的标题和辅助文本在悬停和键盘聚焦时由工具提示显示全文。后置文本从不超过行宽的一半。
在默认系统中，regular 行在一行、两行、三行时分别高 56、72、88，适用于既用触摸又用指针的产品。compact 行（40、56、72）适用于用指针操作的工具。操作、链接或选项无论密度如何，都不会低于列表自己的最小高度和触摸目标。
- 为每一行提供标题。上标文本保持为简短的类别，后置文本保持为简短的值。
- 在列表中，没有字形可显示的行就不要放字形：列表会保留它的空间，标题仍然对齐。图片的空间不会被保留，所以同一列中的行要么都有图片，要么都没有。
- 会打开某物的行，应作为交互项或链接项的内容。
- 不要在作为交互项、链接项或选项内容的行中放控件。这样的项是一个元素，辅助技术无法到达其中的控件。这样的行应保持静态。
- 不要自己给行加点击处理来让它可按。请使用带有焦点、状态和最小目标的列表项。
- 不要只靠后置字形来说明行的作用。说明它的是标题和列表项的角色。
- 角色
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
- 行的文本按绘制顺序作为文本朗读：上标文本、标题、辅助文本、后置文本。字形被隐藏。
- 包含该行的列表项在没有标签时以行的标题命名；操作、链接或选项以行的上标文本、辅助文本和后置文本描述。
- 被截断的文本对辅助技术始终是完整的。工具提示对辅助技术隐藏，在悬停和列表项获得键盘焦点时打开，指针停在其上时保持显示，按 Escape 关闭。
- 在从右到左的布局中，行会镜像，每段文本保持自己的方向。
- 在强制颜色模式下，文本和字形使用系统的文本颜色，禁用项中使用系统的禁用颜色。
- 调试构建会报告没有标题的行、既不是 1 也不是 2 的
supportingLines、被前置插槽取代的前置字形，以及未知的密度。
- 为行提供
headline。 - 用行的标题为静态行中的控件命名：开关叫“蓝牙”，按钮叫“删除 brief.pdf”。
- 为前置插槽中的头像或图片提供替代文本，或者在标题已经说出这个人时将其隐藏。