Card

Maintainer:
Lunory
GitHub
theme
type
view
import {Card} from '@gravity-ui/uikit';

Описание

Компонент Card — это React-контейнер в виде карточки с возможностью настройки стилей и функций, применяемый для эстетичного и упорядоченного представления различного контента.

Внешний вид

Card можно визуализировать с использованием различных комбинаций стилей:

  • themenormal, info, success, warning, danger или utility;
  • typeselection, action или container;
  • viewoutlined или clear, или outlined, filled или raised (в зависимости от параметра type).

Theme (тема)

Параметр theme используется для указания стиля темы карточки. Он определяет цветовую схему карточки и ее внешний вид.

Выбирая разные значения темы, вы можете кастомизировать внешний вид Card так, чтобы он соответствовал вашим целям и необходимому стилю.

  • normal — обычная/стандартная тема карточки;
  • info — тема для отображения нейтральной информации;
  • success — тема для отображения положительного или подтверждающего контента;
  • warning — тема для отображения предупреждений;
  • danger — тема для отображения контента, связанного с критическими проблемами или ошибками;
  • utility — тема для отображения полезных советов.
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 — карточка, которую можно выбрать или нажать, чтобы выполнить определенное действие.
Container
action with onClick
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 — добавляет тень для создания эффекта приподнятого контейнера.
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"
classNameCSS-класс.string
onClickОбработчик клика по карточке. Свойство доступно только для типов "selection" и "action".Function
selectedВыбранная карточка. Свойство доступно только для типа "selection".Boolean
disabledНеактивная карточка. Свойство доступно только для типов "selection" и "action".Boolean
qaHTML-атрибут 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Тень.