Saltar al contenido principal

Resumen

Text proporciona tipografía y control de desbordamiento. De forma predeterminada, representa un div. Omite size, weight y color para seguir heredando la tipografía del entorno.

”Uso”

Asigne al texto un ancho restringido y, a continuación, establezca truncate para mostrar puntos suspensivos cuando se desborde:

Elegir tipografía

size utiliza la escala de tema existente. Cambia el tamaño de fuente, sin valores predeterminados de altura, familia de fuentes ni interlineado: weight acepta regular (400), medium (500) o semibold (600). color acepta primary, secondary, tertiary o light. Cada prop omitida se hereda de forma independiente. El tamaño visual no cambia el elemento semántico. Para las leyendas, combina el tamaño pequeño, el grosor semibold y el color light:
Usa el style nativo para colores en tiempo de ejecución y restricciones de diseño del elemento principal. Las clases del llamador y la composición de renderizado se aplican al mismo elemento de texto. Text no agrega valores predeterminados de tipografía cuando se omiten estas props.

Limitar el número de líneas

Use lineClamp con un número entero positivo. Elija truncate o lineClamp; sus props son mutuamente excluyentes.

Elija un elemento

Use render cuando el texto necesite otro elemento semántico:
El truncamiento afecta a la presentación visual; no acorta el texto en el DOM. Proporcione una forma de leer el contenido completo cuando la parte visible sea insuficiente.

”Props”

Los atributos nativos, los elementos secundarios, las referencias, los nombres de clase y los estilos se aplican al elemento de texto renderizado. TextProps se exporta desde twenty-ui/primitives/typography. El contenido de texto se renderiza sin cambios, incluidos los enlaces proporcionados por quien realiza la llamada.
"light" | "primary" | "secondary" | "tertiary"
Semantic text color. Omitted values inherit; native style supports runtime colors.
number
Positive integer limiting the number of visible lines. Cannot be combined with truncate.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Replaces the default div. Native props and the ref target the rendered text element.
"lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxs"
Font size from the theme scale. Omitted values inherit; this does not set height.
boolean
Truncates one line with an ellipsis. Cannot be combined with lineClamp.
"medium" | "regular" | "semibold"
Theme font weight. Omitted values inherit.

Migración

color ahora selecciona un color de tema semántico. Mueve los valores de color CSS arbitrarios de un atributo color nativo a style={{ color: customColor }}. Los estilos, las clases y la composición de renderizado existentes siguen aplicándose al elemento de texto.