import {Card} from '@gravity-ui/uikit';
§Описание
Компонент Card
— это React-контейнер в виде карточки с возможностью настройки стилей и функций, применяемый для эстетичного и упорядоченного представления различного контента.
§Внешний вид
Card
можно визуализировать с использованием различных комбинаций стилей:
theme
—normal
,info
,success
,warning
,danger
илиutility
;type
—selection
,action
илиcontainer
;view
—outlined
илиclear
, илиoutlined
,filled
илиraised
(в зависимости от параметраtype
).
§Theme
(тема)
Параметр theme
используется для указания стиля темы карточки. Он определяет цветовую схему карточки и ее внешний вид.
Выбирая разные значения темы, вы можете кастомизировать внешний вид Card
так, чтобы он соответствовал вашим целям и необходимому стилю.
normal
— обычная/стандартная тема карточки;info
— тема для отображения нейтральной информации;success
— тема для отображения положительного или подтверждающего контента;warning
— тема для отображения предупреждений;danger
— тема для отображения контента, связанного с критическими проблемами или ошибками;utility
— тема для отображения полезных советов.
const style = {
width: '120px';
height: '120px';
display: 'flex';
alignItems: 'center';
justifyContent: 'center';
}
<Card style={style} theme="normal" size="l">Normal</Card>
<Card style={style} theme="info" size="l">Info</Card>
<Card style={style} theme="success" size="l">Success</Card>
<Card style={style} theme="warning" size="l">Warning</Card>
<Card style={style} theme="danger" size="l">Danger</Card>
<Card style={style} theme="utility" size="l">Utility</Card>
§Type
(тип)
Этот параметр используется для определения типа Card
. Он позволяет настраивать внешний вид и поведение карточки.
container
— карточка, которая выступает в роли контейнера для других элементов. Она обеспечивает структурированную компоновку контента.action
— карточка с интерактивным элементом — например, кнопкой, которая активирует определенное действие при нажатии.selection
— карточка, которую можно выбрать или нажать, чтобы выполнить определенное действие.
const style = {
width: '120px';
height: '120px';
display: 'flex';
alignItems: 'center';
justifyContent: 'center';
}
<Card style={style} view="outlined" type="container" size="l">Container</Card>
<Card style={style} view="outlined" type="action" size="l">action with onClick</Card>
<Card style={style} view="outlined" type="selection" size="l">Selection</Card>
§View
(вид)
Данный параметр используется для указания вида или стиля компоновки Card
. Он позволяет настраивать внешний вид и расположение содержимого карточки:
clear
— без стиля;outlined
— добавляет контурную обводку для выделения содержимого карточки;filled
— добавляет заливку содержимого карточки;raised
— добавляет тень для создания эффекта приподнятого контейнера.
const style = {
width: '120px';
height: '120px';
display: 'flex';
alignItems: 'center';
justifyContent: 'center';
}
<Card style={style} view="clear" type="container" size="l">Clear</Card>
<Card style={style} view="outlined" type="container" size="l">Outlined</Card>
<Card style={style} view="filled" type="container" size="l">Filled</Card>
<Card style={style} view="raised" type="container" size="l">Raised</Card>
§Свойства
Имя | Описание | Тип | Значение по умолчанию |
---|---|---|---|
children | Содержимое карточки. | ReactNode | |
type | Тип Card . Определяет, какие свойства доступны. | string | "container" |
view | Доступно только для типов "container" и "selection" . | string | "outlined" |
theme | Базовый цвет карточки. Свойство доступно только для типа "container" . | string | "normal" |
size | Размер Card . Определяет, какие свойства доступны. | string | "m" |
className | CSS-класс. | string | |
onClick | Обработчик клика по карточке. Свойство доступно только для типов "selection" и "action" . | Function | |
selected | Выбранная карточка. Свойство доступно только для типа "selection" . | Boolean | |
disabled | Неактивная карточка. Свойство доступно только для типов "selection" и "action" . | Boolean | |
qa | HTML-атрибут data-qa , используется для тестирования. | string |
§API CSS
Имя | Описание |
---|---|
--g-card-background-color | Цвет фона. |
--g-card-border-width | Ширина границы. |
--g-card-border-color | Цвет границы. |
--g-card-border-radius | Радиус скругления углов. |
--g-card-box-shadow | Тень. |