Todos los componentes (204)

Texto

Tipografía · Text · .amset-text

Qué es y cuándo usarlo

Todo el texto corrido de la aplicación: tamaño, peso, nivel de tinta, tono, alineación, mayúsculas, números tabulares y recorte.

Cuándo usarlo

Siempre que haya texto que no sea un titular. Un <p> suelto hereda lo que le toque y acaba decidiendo su propio tamaño.
ink="secondary" para descripciones y ayudas; ink="support" para lo de apoyo (contadores, rótulos de eje). Los tres niveles pasan 4,5:1.
numeric en una columna de importes o en un cronómetro: sin números de ancho fijo, la cifra baila al cambiar.

Cuándo no

Para un encabezado, Title: además de verse distinto, coloca la página en el índice con el que se navega a ciegas.
Para la descripción o el error de un campo, los de TextField: esos van enlazados con aria-describedby, y Text no lo hace.

Teclado: no participa. No es interactivo.

Accesibilidad: nace con margin: 0 a propósito — el espacio lo pone Stack, no el texto. Recortar con truncate o lines esconde el texto a la VISTA, nunca al lector: sigue entero en el DOM, así que conviene pasar el texto completo en title. Ojo con transform="uppercase" en siglas: hay lectores que las deletrean.

Aspecto fino: --amset-text-family, --amset-text-size, --amset-text-weight, --amset-text-color, --amset-text-leading y --amset-text-spacing. No confundir con la ESCALA, que es --amset-text-xs … --amset-text-4xl.

Cómo se ve

Texto normal, el de leer.

Secundario y pequeño: una ayuda, un pie.

Algo que hay que mirar.

<Text>Texto normal, el de leer.</Text>
<Text ink="secondary" size="sm">Secundario y pequeno: una ayuda, un pie.</Text>
<Text weight="bold" tone="error">Algo que hay que mirar.</Text>

Props

Se importa con import { Text } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`align`	`"center" \| "start" \| "end" \| "justify"`	—
`as`	`"dd" \| "div" \| "dt" \| "em" \| "figcaption" \| "li" \| "p" \| "small" \| "span" \| "strong"`	Que elemento se pinta. `p` por defecto; `span` para texto dentro de una frase.
`balance`	`boolean`	Reparte las lineas para que no quede una palabra sola al final. Para titulares y frases cortas; en un parrafo largo el navegador lo ignora.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`hiddenVisual`	`boolean`	Solo para el lector de pantalla: se quita de la vista, no del arbol.
`id`	`string`	—
`ink`	`"secondary" \| "primary" \| "support"`	Nivel de tinta neutra. Si se pasa `tone`, manda el tono y esto se ignora.
`italic`	`boolean`	—
`leading`	`"normal" \| "tight"`	Interlineado. `tight` para un titulo de tarjeta de dos lineas.
`lines`	`number`	Recorta a N lineas. Manda sobre `truncate`.
`mono`	`boolean`	Fuente de ancho fijo: una referencia, un identificador, una matricula.
`nowrap`	`boolean`	No parte nunca de linea. Para una fecha o un importe que no se deben cortar.
`numeric`	`boolean`	Numeros de ancho fijo. Una columna de importes o un cronometro no bailan al cambiar de cifra.
`size`	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`	Escalon de la escala: `md` es el cuerpo de texto.
`spacing`	`"normal" \| "tight" \| "wide"`	Separacion entre letras. `wide` es para un rotulo corto en mayusculas.
`strike`	`boolean`	Tachado: un precio anterior, una tarea ya hecha.
`style`	`CSSProperties`	—
`title`	`string`	Lo que se ve al posar el raton. Es el sitio del texto entero cuando se recorta.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	Color con significado: `error` para lo que ha fallado, `success` para lo que fue bien.
`transform`	`"uppercase" \| "lowercase" \| "capitalize"`	Mayusculas y demas. Ojo con `uppercase` en siglas y palabras cortas: hay lectores de pantalla que las deletrean. El texto de verdad sigue siendo el que se escribe, asi que en el DOM se lee bien.
`truncate`	`boolean`	Una sola linea, con puntos suspensivos. Recorta a la VISTA: el texto sigue entero en el DOM, asi que el lector de pantalla lo lee completo. Si el texto importa, pasa el texto entero en `title` para que se vea al posarse.
`underline`	`boolean`	—
`weight`	`"normal" \| "bold" \| "medium"`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-text-family`	`var(--amset-font)`
`--amset-text-size`	`var(--amset-text-base)`
`--amset-text-weight`	`var(--amset-weight-normal)`
`--amset-text-color`	`var(--amset-ink)`
`--amset-text-leading`	`var(--amset-line-normal)`
`--amset-text-spacing`	`normal`
`--amset-text-lines`	`2`

Cómo se cambia

.amset-text {
  --amset-text-family: ...;
  --amset-text-size: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: