Перейти к основному содержанию

Обзор

Text предоставляет типографику и обработку переполнения. По умолчанию он отображает div. Не указывайте size, weight и color, чтобы продолжать наследовать типографику от окружения.

Использование

Задайте тексту ограниченную ширину, затем установите truncate, чтобы при переполнении отображалось многоточие:

Выберите типографику

size использует существующую шкалу темы. Он изменяет размер шрифта без значений по умолчанию для высоты, font-family или line-height: weight принимает regular (400), medium (500) или semibold (600). color принимает primary, secondary, tertiary или light. Каждый пропуск свойства наследуется независимо. Визуальный размер не изменяет семантический элемент. Для подписей используйте малый размер, насыщенность semibold и светлый цвет:
Используйте нативный style для цветов во время выполнения и ограничений родительского макета. Классы вызывающего кода и композиция рендеринга нацелены на один и тот же текстовый элемент. При отсутствии этих свойств Text не добавляет типографические значения по умолчанию.

Ограничение числа строк

Используйте lineClamp с положительным целым числом. Выберите truncate или lineClamp; эти свойства взаимоисключающие.

Выберите элемент

Используйте render, когда для текста требуется другой семантический элемент:
Обрезка влияет на визуальное представление; она не сокращает текст в DOM. Предоставьте возможность прочитать полное содержимое, когда видимой части недостаточно.

Свойства

Нативные атрибуты, дочерние элементы, refs, имена классов и стили применяются к отрисованному текстовому элементу. TextProps экспортируется из twenty-ui/primitives/typography. Текстовое содержимое отображается без изменений, включая ссылки, предоставленные вызывающей стороной.
"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.

Миграция

color теперь выбирает семантический цвет темы. Перенесите произвольные значения цвета CSS из нативного атрибута color в style={{ color: customColor }}. Существующие стили, классы и композиция рендеринга по-прежнему нацелены на текстовый элемент.