Panoramica
Text fornisce la tipografia e la gestione dell’overflow. Per impostazione predefinita, esegue il rendering di un div. Ometti size, weight e color per continuare a ereditare la tipografia dall’ambiente circostante.
Utilizzo
Assegna al testo una larghezza vincolata, quindi impostatruncate per mostrare un’ellissi quando va in overflow:
Scegli la tipografia
size utilizza la scala del tema esistente. Modifica la dimensione del carattere, senza valori predefiniti per altezza, font-family o line-height:
weight accetta regular (400), medium (500) o semibold (600). color accetta primary, secondary, tertiary o light. Ogni prop omessa viene ereditata in modo indipendente. La dimensione visiva non modifica l’elemento semantico.
Per le didascalie, componi la dimensione piccola, il peso semibold e il colore light:
style nativo per i colori in fase di runtime e i vincoli di layout del genitore. Le classi chiamanti e la composizione di rendering sono destinate allo stesso elemento di testo. Text non aggiunge valori tipografici predefiniti quando queste prop sono omesse.
Limita il numero di righe
UsalineClamp con un numero intero positivo. Scegli truncate o lineClamp; le rispettive props si escludono a vicenda.
Scegli un elemento
Usarender quando il testo richiede un altro elemento semantico:
Props
Gli attributi nativi, gli elementi figlio, i ref, i nomi delle classi e gli stili hanno come destinazione l’elemento di testo renderizzato.TextProps viene esportato da twenty-ui/primitives/typography. Il contenuto di testo viene renderizzato senza modifiche, inclusi i link forniti dal chiamante.
"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.
Migrazione
color ora seleziona un colore semantico del tema. Sposta i valori arbitrari dei colori CSS da un attributo color nativo a style={{ color: customColor }}. Gli stili, le classi e la composizione di rendering esistenti continuano a essere destinati all’elemento di testo.