リスト行
前と後ろに何かを添えた 1 行分のテキストです。見出しと、その上の短い行、その下の 1〜2 行。先頭にはグリフ、画像またはコントロール、末尾には短い値、グリフまたはコントロール。リスト項目の中に置くとリストのどのモードにも合わせて描かれ、単独でも使えます。
- カテゴリ
- コンテインメント
- トークン
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
リストの中の行：スイッチを持つ静的な行、何かを開く行、リンクである行
リスト行は、多くのリストを形づくる行です。名前、それについての 1〜2 行、そしてその前と後ろに置くもの。リストは項目を並べ、項目をアクション、リンク、選択肢にする箱であり、リスト行は 1 つの項目に表示する中身です。リスト項目の中に置くか、1 行だけが必要な場所では単独で使います。
行が描くのはテキストとグリフだけです。塗り、枠、ホバー、フォーカスを持たず、行自体が押せるものになることもありません。それを決めるのは行を入れたリスト項目です。
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="Bluetooth">
<tanrei-switch slot="trailing" label="Bluetooth" label-hidden></tanrei-switch>
</tanrei-list-row>
</tanrei-list-item>
</tanrei-list>
<!-- 先頭に画像、3 行のテキスト。 -->
<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>行は、自分が入っているリスト項目がどの種類かをその項目から知り、それに合わせて自分を描きます。
- 静的な項目、または単独の行。 行は自分の余白と自分の色を描きます。先頭や末尾のスロットのコントロールは、それ自身のフォーカスと押下を保ちます。
- インタラクティブな項目、リンク項目、選択肢。 項目が中身に余白を付けるので、行は自分の余白を描かず、高さだけを保ちます。静的な項目と押せる項目が混ざった列でも高さはそろいます。項目は行の見出しで名前が付き、ほかのテキストで説明されます。選択された選択肢では、行のテキストとグリフが選択時のコンテンツ色で描かれます。
- 並べ替えられるリスト。 リストのハンドルが項目の先頭、行の前に立ち、行の先頭の余白の代わりになります。
- グリフのある行とない行。 リストの
iconSpaceが求めるとき（既定では、リストのほかの行が先頭のグリフを描いている間）、先頭の部分のない行はグリフの幅を空けておき、見出しをほかの行と同じ位置から始めます。単独の行は幅を空けません。 - 横並びのリスト、折り返すリスト。 1 行に並ぶときは行は中身の幅になり、切り詰められません。折り返すときはリストより広くならず、必要な分だけテキストが切り詰められます。
行は項目の直接の子にします。項目の中で別の要素に包まれた行には何も伝わらず、単独のときと同じように描かれます。
1 行、2 行、3 行。画像と値。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/
人、場所、設定、メッセージ、ファイルなど、どの項目も同じ部品を示すリストの各項目にリスト行を使います。項目がタイル、カード、画像であれば、リスト項目にプロダクト自身のコンテンツを入れます。送信中のファイルにはファイル項目を使います。
| 部品 | 用途 |
|---|---|
| 見出し | 項目の名前。支援技術、並べ替えられるリストのハンドル、タイプアヘッドで、リスト項目はこの名前で呼ばれます。 |
| オーバーライン | 名前の上に置く短い分類、出どころ、時刻。 |
| 補足テキスト | 項目の内容、状態、メッセージの書き出し。1 行、または supportingLines で 2 行。 |
| 先頭のグリフまたはスロット | 項目の種類（leadingIcon）、またはそのアバターや画像（leading スロット）。 |
| 末尾テキスト | 短い値。件数、サイズ、時刻、設定の現在値。 |
| 末尾スロット | バッジ。静的な行ではスイッチ、チェックボックス、アイコンのみのボタン。 |
| 末尾のグリフ | 行が何かを開くことを示すシェブロン、または状態。 |
見出し、オーバーライン、補足テキストは収まらないところで省略記号付きで切り詰められます。切り詰められた見出しと補足テキストは、ホバーとキーボードフォーカスでツールチップに全文が表示されます。末尾テキストが行の半分を超えることはありません。
regular の行は、デフォルトシステムで 1 行、2 行、3 行のときそれぞれ 56、72、88 の高さで、タッチとポインターの両方で使うプロダクト向けです。compact の行（40、56、72）は、ポインターで使うツール向けです。アクション、リンク、選択肢は、密度の指定にかかわらず、リスト自身の最小の高さとタッチターゲットより低くなりません。
- どの行にも見出しを付けます。オーバーラインは短い分類に、末尾テキストは短い値にとどめます。
- リストの中では、見せるグリフのない行にはグリフを付けずにおきます。リストがその幅を空けておくので、見出しはそろったままです。画像の幅は空けられないので、1 つの列の行には、すべてに画像を付けるか、どれにも付けないかにします。
- 何かを開く行は、インタラクティブな項目かリンク項目の中身にします。
- インタラクティブな項目、リンク項目、選択肢の中身である行にコントロールを入れないでください。その項目は 1 つの要素なので、中のコントロールに支援技術は届きません。そうした行は静的なままにします。
- 行に自分でクリック処理を付けて押せるようにしないでください。フォーカス、状態、最小ターゲットを持つリスト項目を使います。
- 行が何をするかを末尾のグリフだけで伝えないでください。それを伝えるのは見出しと項目の役割です。
- ロール
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を付けます。 - 静的な行のコントロールには、行の見出しで名前を付けます。スイッチなら「Bluetooth」、ボタンなら「brief.pdf を削除」のようにします。
- 先頭スロットのアバターや画像には代替テキストを付けるか、見出しがすでにその人を名指ししているなら隠します。