Text — это экспериментальный компонент в WordPress для отображения текста с использованием системы типографики. Он гибко настраивается и может адаптироваться под различные задачи, такие как изменение размера шрифта, выравнивание текста, обрезка, выделение и многое другое.
Назначение и использование компонента Text
Компонент Text предназначен для рендеринга любого текстового контента, включая параграфы, строки и теги span. Он предоставляет множество настроек, которые позволяют адаптировать текст к интерфейсу приложения. Text является частью экспериментального набора компонентов, поэтому может подвергаться изменениям.
Пример простого использования
Ниже приведен пример использования компонента Text для отображения простой строки.
import { __experimentalText as Text } from '@wordpress/components';
function Example() {
return <Text>WordPress — это свобода творчества</Text>;
}
Основные параметры (Props) компонента Text
1. adjustLineHeightForInnerControls
Тип: "large" | "medium" | "small" | "xSmall"
Описание: Автоматически подбирает подходящее значение высоты строки для содержимого, которое сочетает текст и элементы управления, такие как TextInput. Это удобно для однородного отображения в формах и других интерфейсах.
import { __experimentalText as Text, TextInput } from '@wordpress/components';
function Example() {
return (
<Text adjustLineHeightForInnerControls="medium">
Пример текста с элементом управления:
<TextInput value="Введите текст здесь" />
</Text>
);
}
2. align
Тип: CSSProperties['textAlign']
Описание: Устанавливает выравнивание текста: можно использовать такие значения, как "left", "center", "right", и "justify".
import { __experimentalText as Text } from '@wordpress/components';
function Example() {
return (
<Text align="center">
Этот текст выровнен по центру.
</Text>
);
}
3. color
Тип: CSSProperties['color']
Описание: Изменяет цвет текста. Можно передавать любые CSS-значения цвета (например, hex, rgb, или имя цвета).
4. display
Тип: CSSProperties['display']
Описание: Изменяет свойство CSS display текста (например, inline, block и другие). Позволяет адаптировать компонент для работы в определённых макетах.
5. ellipsis
Тип: string
Описание: Строка, которая добавляется в конце обрезанного текста, если установлен параметр truncate.
6. ellipsizeMode
Тип: "auto" | "head" | "tail" | "middle"
Описание: Определяет, где обрезать текст, если он длиннее установленного лимита. Возможные значения:
auto: обрезка в конце.head: обрезка в начале.tail: обрезка в конце.middle: обрезка в середине.
import { __experimentalText as Text } from '@wordpress/components';
function Example() {
return (
<Text ellipsizeMode="middle" limit={20}>
Этот текст слишком длинный, и часть его будет скрыта.
</Text>
);
}
7. highlightWords
Тип: any[]
Описание: Массив слов или фраз, которые должны быть выделены внутри текста.
import { __experimentalText as Text } from '@wordpress/components';
function Example() {
return (
<Text highlightWords={['выделен', 'WordPress']}>
Этот текст содержит выделенные слова, такие как WordPress и другие.
</Text>
);
}
8. isBlock
Тип: boolean
Описание: Устанавливает свойство display: block. Текст обрезается только тогда, когда этот параметр установлен в false.
9. isDestructive
Тип: boolean
Описание: Применяет к тексту цвет, указывающий на разрушительное действие (например, красный для опасных предупреждений).
10. limit
Тип: number
Описание: Максимальное количество символов для отображения, если truncate установлен в true.
11. lineHeight
Тип: CSSProperties['lineHeight']
Описание: Управляет высотой строки для текста.
12. numberOfLines
Тип: number
Описание: Ограничивает текст определённым количеством строк и добавляет многоточие в конце, если текст превышает этот лимит.
13. optimizeReadabilityFor
Тип: CSSProperties['color']
Описание: Подбирает цвет текста для оптимальной читаемости на фоне заданного цвета.
import { __experimentalText as Text, View } from '@wordpress/components';
function Example() {
const backgroundColor = '#0000FF';
return (
<View css={{ backgroundColor }}>
<Text optimizeReadabilityFor={backgroundColor}>
Этот текст адаптирован для лучшей читаемости на синем фоне.
</Text>
</View>
);
}
14. size
Тип: CSSProperties['fontSize'] | TextSize
Описание: Определяет размер шрифта, поддерживая стандартные CSS-значения или единицы измерения.
import { __experimentalText as Text } from '@wordpress/components';
function Example() {
return <Text size="large">Крупный текст</Text>;
}
15. truncate
Тип: boolean
Описание: Включает обрезку длинного текста с добавлением многоточия.
16. upperCase
Тип: boolean
Описание: Переводит весь текст в верхний регистр.
17. variant
Тип: "muted"
Описание: Применяет стилистические вариации к тексту.
import { __experimentalText as Text } from '@wordpress/components';
function Example() {
return <Text variant="muted">Приглушённый текст</Text>;
}
18. weight
Тип: CSSProperties['fontWeight'] | TextWeight
Описание: Регулирует толщину шрифта, поддерживая стандартные значения CSS.
Заключение
Компонент Text предоставляет гибкие возможности для отображения и стилизации текста в WordPress.