Fila de lista
Una fila de texto con algo antes y algo después. Un titular, una línea corta encima y una o dos debajo; un glifo, una imagen o un control al inicio; un valor corto, un glifo o un control al final. Dentro de un elemento de lista se adapta a cada modo de la lista, y también se usa sola.
- Categoría
- Contención
- Tokens
comp.list-row- Nivel
- Base
- Web
tanrei-list-rowclock_loader_40 - SwiftUI
TanreiListRowradio_button_unchecked - Jetpack Compose
TanreiListRowradio_button_unchecked - Flutter
TanreiListRowradio_button_unchecked - React Native
ListRowradio_button_unchecked
Generado a partir de docs/status/status.json, specs/list-row.spec.json
Filas en una lista: una fila estática con un interruptor, una fila que abre algo y una fila que es un enlace
Una fila de lista es la fila de la que están hechas la mayoría de las listas: un nombre, una o dos líneas sobre él, algo antes y algo después. La lista es una caja que dispone sus elementos y los convierte en acciones, enlaces u opciones; la fila de lista es lo que muestra un elemento. Ponla dentro de un elemento de lista, o úsala sola donde haga falta una única fila.
La fila dibuja solo texto y glifos. No tiene relleno, borde, hover ni foco propios, y nunca se puede pulsar por sí misma: eso lo decide el elemento de lista que la contiene.
En la web es <tanrei-list-row>. Las demás plataformas todavía no lo han implementado.
<!-- En una lista, la fila es hija directa del elemento. El elemento la convierte en acción, enlace u opción. -->
<tanrei-list dividers>
<tanrei-list-item interactive>
<tanrei-list-row leading-icon="wifi" headline="Wi-Fi" supporting-text="Conectado a Harbour"
trailing-icon="chevron_right"></tanrei-list-row>
</tanrei-list-item>
<tanrei-list-item>
<!-- Una fila estática puede tener un control propio; nómbralo con el titular de la fila. -->
<tanrei-list-row headline="Bluetooth">
<tanrei-switch slot="trailing" label="Bluetooth" label-hidden></tanrei-switch>
</tanrei-list-row>
</tanrei-list-item>
</tanrei-list>
<!-- Una imagen al inicio y tres líneas de texto. -->
<tanrei-list-row overline="Ayer" headline="Mira Okada" supporting-text="Las fotos del puerto ya están en la carpeta compartida." 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>La fila sabe por el elemento de lista que la contiene qué es ese elemento, y se dibuja para encajar en él:
- Un elemento estático, o una fila sola. La fila dibuja sus propios márgenes interiores y sus propios colores. Un control en su ranura inicial o final conserva su propio foco y su propia pulsación.
- Un elemento interactivo, un elemento enlace o una opción. El elemento añade margen interior a su contenido, así que la fila no dibuja el suyo y conserva su altura: una columna que mezcla elementos estáticos y elementos que se pulsan mantiene una sola altura. El elemento toma su nombre del titular de la fila y su descripción de los demás textos. Una opción seleccionada dibuja los textos y los glifos de la fila en su color de contenido seleccionado.
- Una lista que se reordena. El asa de la lista queda al inicio del elemento, antes de la fila, en lugar del margen inicial de la fila.
- Filas con glifo y sin él. Donde el
iconSpacede la lista lo pide (por defecto, mientras otra fila de la lista dibuja un glifo inicial), una fila sin parte inicial guarda el espacio de un glifo, vacío, para que su titular empiece donde empiezan los de las demás. Una fila sola no guarda ninguno. - Una lista horizontal, o una que salta de línea. En una línea, la fila es tan ancha como sus partes y nunca se corta; en líneas que saltan, nunca es más ancha que la lista, y su texto se corta donde haga falta.
Pon la fila como hija directa del elemento. Una fila envuelta en otro elemento dentro del elemento de lista no recibe nada y se dibuja como si estuviera sola.
Una, dos y tres líneas; una imagen y un valor; compact
Anatomía
| Parte | Descripción |
|---|---|
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 · opcional | 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 · opcional | 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 · opcional | The line or two under the headline: what the row is about, its state, a preview of a message. |
6 trailing-text · opcional | 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 · opcional | 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 · opcional | A glyph at the row's very end: a chevron that says the row opens something, a status glyph. Decorative. |
9 tooltip · opcional | 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. |
Propiedades
| Propiedad | Tipo | Valor predeterminado | Descripción |
|---|---|---|---|
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. |
Slots
| Slot | Descripción |
|---|---|
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. |
Estados
Comportamiento
Requisitos en formato EARS. Cada implementación de plataforma se prueba contra estos identificadores. El texto de los requisitos se muestra tal como está en la especificación, en inglés.
| ID | Requisito |
|---|---|
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. |
Correspondencia de nombres por plataforma
Paridad no significa API idénticas. Cada plataforma expresa el mismo contrato con su propio estilo.
| Especificación | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| Componente | tanrei-list-row | TanreiListRow | TanreiListRow | TanreiListRow | ListRow |
headline · Propiedad | headline | headline | headline | headline | headline |
overline · Propiedad | overline | overline | overline | overline | overline |
supportingText · Propiedad | supportingText | supportingText | supportingText | supportingText | supportingText |
supportingLines · Propiedad | supportingLines | supportingLineLimit | supportingMaxLines | supportingMaxLines | supportingLines |
leadingIcon · Propiedad | leadingIcon | leadingIcon | leadingIcon | leadingIcon | leadingIcon |
trailingText · Propiedad | trailingText | trailingText | trailingText | trailingText | trailingText |
trailingIcon · Propiedad | trailingIcon | trailingIcon | trailingIcon | trailingIcon | trailingIcon |
density · Propiedad | density | density | density | density | density |
| Notas | <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. |
Tokens
| Token | Alias de | Valor resuelto (claro) |
|---|---|---|
--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 |
Fixtures
Representaciones canónicas. Todas las plataformas capturan cada fixture con el mismo identificador para poder comparar los resultados.
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 Generado a partir de specs/list-row.spec.json, tokens/comp/list-row.tokens.json, design/tokens/
Usa una fila de lista en cada elemento de una lista de personas, lugares, ajustes, mensajes o archivos que muestran todos las mismas partes. Usa tu propio contenido en un elemento de lista cuando los elementos son mosaicos, tarjetas o imágenes, y un elemento de archivo para un archivo que se está enviando.
| Parte | Para qué sirve |
|---|---|
| Titular | El nombre del elemento. Es como se llama el elemento de lista para la tecnología de asistencia, en el asa de una lista que se reordena y en la búsqueda por escritura. |
| Sobretítulo | Una categoría, un origen o una hora breves encima del nombre. |
| Texto de apoyo | De qué trata el elemento, su estado, el comienzo de un mensaje: una línea, o dos con supportingLines. |
| Glifo o ranura inicial | Qué clase de cosa es el elemento (leadingIcon), o un avatar o una imagen de él (la ranura leading). |
| Texto final | Un valor corto: un recuento, un tamaño, una hora, el valor actual de un ajuste. |
| Ranura final | Una insignia, o en una fila estática un interruptor, una casilla o un botón solo de icono. |
| Glifo final | Un chevrón que dice que la fila abre algo, o un estado. |
El titular, el sobretítulo y el texto de apoyo se cortan con puntos suspensivos donde no caben, y un tooltip muestra completos el titular y el texto de apoyo cortados al pasar el puntero y con el foco del teclado. El texto final nunca ocupa más de la mitad de la fila.
En el sistema por defecto, las filas regular miden 56, 72 y 88 de alto para una, dos y tres líneas, para un producto que se usa tanto con el dedo como con el puntero. Las filas compact (40, 56 y 72) son para una herramienta que se usa con el puntero. Una acción, un enlace o una opción nunca es más baja que la altura mínima de la propia lista y que el objetivo táctil, diga lo que diga la densidad.
- Da un titular a cada fila. Mantén el sobretítulo como una categoría breve y el texto final como un valor corto.
- En una lista, deja sin glifo la fila que no tenga ninguno que mostrar: la lista guarda su espacio, así que los titulares siguen alineados. El espacio de una imagen no se guarda, así que da una imagen a todas las filas de una columna, o a ninguna.
- Haz que una fila que abre algo sea el contenido de un elemento interactivo o de un elemento enlace.
- No pongas un control en una fila que es el contenido de un elemento interactivo, un elemento enlace o una opción. Ese elemento es un solo elemento, así que la tecnología de asistencia no puede llegar a un control dentro de él. Mantén esa fila estática.
- No hagas pulsable la fila por tu cuenta (con un manejador de clic en la fila). Usa el elemento de lista, que lleva el foco, los estados y el objetivo mínimo.
- No confíes solo en el glifo final para decir lo que hace una fila. Lo dicen el titular y el rol del elemento.
- Rol
none of its own: its texts are text (the content of a list item, or of the page)- Etiquetado
- 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.
- Objetivo mínimo
- El área de pulsación cumple el tamaño mínimo de objetivo aunque el tamaño visual sea menor. minimum 32px · pointer 44px · spacing 8px · touch 48px
Teclado
| Teclas | Acción |
|---|
Notas
- 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.
Generado a partir de specs/list-row.spec.json, tokens/sys/measure.tokens.json
- Los textos de la fila se leen como texto, en el orden en que se dibujan: sobretítulo, titular, texto de apoyo, texto final. Sus glifos quedan ocultos.
- Un elemento de lista que contiene la fila toma su nombre del titular de la fila cuando no tiene etiqueta propia, y una acción, un enlace o una opción se describe con el sobretítulo, el texto de apoyo y el texto final de la fila.
- Un texto cortado siempre llega completo a la tecnología de asistencia. Su tooltip queda oculto para ella, se abre al pasar el puntero y con el foco del teclado del elemento, se queda mientras el puntero está encima y se cierra con Escape.
- En una disposición de derecha a izquierda la fila se refleja, y cada texto conserva su propia dirección.
- En colores forzados, los textos y los glifos toman el color de texto del sistema, y su color de texto deshabilitado en un elemento deshabilitado.
- Las compilaciones de depuración informan de una fila sin titular, de un
supportingLinesque no es 1 ni 2, de un glifo inicial que la ranura inicial sustituye y de una densidad desconocida.
- Da a la fila un
headline. - Nombra un control de una fila estática con el titular de la fila: «Bluetooth» para un interruptor, «Quitar brief.pdf» para un botón.
- Da a un avatar o una imagen de la ranura inicial su propia alternativa textual, u ocúltalo cuando el titular ya nombra a la persona.