Обзор
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, когда для текста требуется другой семантический элемент:
Свойства
Нативные атрибуты, дочерние элементы, 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 }}. Существующие стили, классы и композиция рендеринга по-прежнему нацелены на текстовый элемент.