Card
Компонент для создания визуально выделенных контейнеров с содержимым. Обеспечивает семантически правильную разметку по умолчанию и различные варианты стилевого оформления.
Связанные компоненты:
Загружается...
Основные возможности
Семантическая разметка
Компонент поддерживает следующие возможности:
- использование семантически правильного тега
<li>по умолчанию; - возможность изменения тега через свойство
Componentдля одиночных карточек вне списков; - поддержка
ARIA-ролей для улучшения доступности.
// Карточка в списке
<Card>
<Text>Элемент списка</Text>
</Card>
// Одиночная карточка
<Card Component="div">
<Text>Отдельная карточка</Text>
</Card>Режимы отображения
Задаётся свойством mode.
Загружается...
Доступность (a11y)
Компонент обеспечивает базовую доступность через семантически правильную разметку. При необходимости можно:
- изменить тег через свойство
Component; - добавить ARIA-роли для улучшения доступности;
- настроить дополнительные атрибуты для конкретных сценариев использования.
Свойства и методы
| Свойство | Описание |
|---|---|
Component | ElementType<any, keyof IntrinsicElements>По умолчанию: li |
getRootRef | Ref<HTMLDivElement>По умолчанию: - |
mode | "plain" | "shadow" | "tint" | "outline" | "outline-tint"Внешний вид карточки. По умолчанию: tint |