Content
Текст с иконками слева и справа.
Сочетает текст, размер и иконки. as позволяет выбрать подходящий HTML-тег. size — размер текста в пикселях (10–32, по умолчанию 16); иконки и отступ между ними подбираются под него, как в .content из Figma. Прежние s, m и l соответствуют 12, 16 и 20.
Живой пример
Content
Настройки примера
Использование
import { CheckIcon } from '@heroicons/react/24/outline';
import { Content } from '@prosazhin/pbcomponents';
<Content
leftIcon={CheckIcon}
size={16}
>
Done
</Content>;API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | string | Содержимое компонента. | — |
size | 10 | 12 | 14 | 16 | 20 | 24 | 3210 · 12 · 14 · 16 · 20 · 24 · 32 | Размер текста в пикселях; иконки и отступ подбираются под него. Прежние s, m и l — это 12, 16 и 20. | 16 |
medium | boolean | Увеличенная насыщенность текста. | false |
as | ElementTypediv · span | HTML-тег обёртки. | span |
leftIcon | SvgTypenone · check · search · user | Иконка перед текстом; принимает SVG-компонент. | — |
rightIcon | SvgTypenone · check · search · user | Иконка после текста; принимает SVG-компонент. | — |
leftIconClassName | string | Класс левой иконки. | — |
rightIconClassName | string | Класс правой иконки. | — |
className | string | Класс корневого элемента. | — |
textClassName | string | Класс текстовой части. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.