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, establezcatruncate 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:
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
UselineClamp con un número entero positivo. Elija truncate o lineClamp; sus props son mutuamente excluyentes.
Elija un elemento
Userender cuando el texto necesite otro elemento semántico:
”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.