Text

Prezentare generală

Text oferă gestionarea tipografiei și a depășirii conținutului. Redă implicit un div. Omite size, weight și color pentru a continua să moștenească tipografia din elementele din jur.

Utilizare

Oferiți textului o lățime constrânsă, apoi setați truncate pentru a afișa puncte de suspensie când acesta depășește spațiul disponibil:

import { Text } from 'twenty-ui/primitives/typography';

export const ContactName = () => (
  <Text truncate style={{ maxWidth: 160 }}>
    Alexandra Montgomery
  </Text>
);

Alege tipografia

size utilizează scara de dimensiuni existentă a temei. Schimbă dimensiunea fontului, fără valori implicite pentru înălțime, familia de fonturi sau înălțimea liniei:

Dimensiune	Valoarea temei
`xxs`	`0.625rem`
`xs`	`0.85rem`
`sm`	`0.92rem`
`md`	`1rem`
`lg`	`1.23rem`
`xl`	`1.54rem`
`xxl`	`1.85rem`

weight acceptă regular (400), medium (500) sau semibold (600). color acceptă primary, secondary, tertiary sau light. Fiecare prop omis este moștenit independent. Dimensiunea vizuală nu modifică elementul semantic. Pentru legende, combinați dimensiunea mică, grosimea semibold și culoarea deschisă:

import { Text } from 'twenty-ui/primitives/typography';

export const Caption = () => (
  <Text size="xs" weight="semibold" color="light">
    Workspace
  </Text>
);

Utilizați style nativ pentru culori în timpul execuției și constrângeri de aspect ale părintelui. Clasele apelantului și compunerea randării vizează același element de text. Text nu adaugă valori implicite de tipografie atunci când aceste props sunt omise.

Limitați numărul de linii

Utilizați lineClamp cu un număr întreg pozitiv. Alegeți fie truncate, fie lineClamp; proprietățile lor sunt reciproc exclusive.

import { Text } from 'twenty-ui/primitives/typography';

export const Summary = () => (
  <Text lineClamp={2} style={{ maxWidth: 240 }}>
    Follow up with the customer about their onboarding milestones and upcoming
    renewal.
  </Text>
);

Alegeți un element

Utilizați render când textul necesită un alt element semantic:

import { Text } from 'twenty-ui/primitives/typography';

export const Description = () => (
  <Text render={<p />}>Account description</Text>
);

Trunchierea afectează prezentarea vizuală; nu scurtează textul din DOM. Oferiți o modalitate de a citi întregul conținut atunci când porțiunea vizibilă este insuficientă.

Proprietăți

Atributele native, elementele copil, referințele, numele claselor și stilurile vizează elementul de text randat. TextProps este exportat din twenty-ui/primitives/typography. Conținutul textului este randat fără modificări, inclusiv linkurile furnizate de apelant.

"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.

Migrare

color selectează acum o culoare semantică a temei. Mutați valorile arbitrare de culoare CSS dintr-un atribut color nativ în style={{ color: customColor }}. Stilurile, clasele și compunerea randării existente continuă să vizeze elementul de text.

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Utilizare

Alege tipografia

Limitați numărul de linii

Alegeți un element

Proprietăți

Migrare

​Prezentare generală

​Utilizare

​Alege tipografia

​Limitați numărul de linii

​Alegeți un element

​Proprietăți

​Migrare

Prezentare generală

Utilizare

Alege tipografia

Limitați numărul de linii

Alegeți un element

Proprietăți

Migrare