CheckboxCard

CheckboxCard сочетает поведение чекбокса с более богатой поверхностью карточки для тарифов, шаблонов и выбираемых плиток настроек.

Storybook Исходники Figma

Обзор

CheckboxCard построен на Card и добавляет небольшой слой стилей, специфичный для карточки: ориентацию и оформление границы при наведении, в отмеченном, неопределённом и отключённом состояниях.

Публичные CSS-переменные

Daily backups

Snapshots are kept for 30 days.

Переменная	Значение	Влияет на
точка переопределения фона карточки		В этом состоянии изменений не видно
основной цвет границы, меняется в зависимости от состояния		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Корень

Корневой элемент .checkboxCard отвечает за ориентацию и стили границы при наведении, нажатии, в отмеченном и отключённом состояниях.

Содержимое

CheckboxCardContent, CheckboxCardTitle и CheckboxCardDescription в основном опираются на слой текста и отступов Card.

Контрол

Внешний вид контрола определяется составными частями контрола карточки-чекбокса.

Взаимодействие состояний и вариантов

data-orientation='vertical' | 'horizontal' меняет направление раскладки и отступы.
data-variant='primary' | 'secondary' меняет цвет границы в отмеченном и неопределённом состояниях.
:has(input[type='checkbox']:checked) и :has(...:indeterminate) управляют состоянием границы выбранной карточки.
В отключённом состоянии цвет границы переключается на токены темы для отключённых элементов.

Примеры

Локальное переопределение минимальной ширины

У корня min-width: 220px. Уменьшите его локальным классом, когда несколько коротких карточек должны поместиться в одну строку; пример импортирует таблицу стилей, лежащую рядом.

.compactPlanCard {
  min-width: 104px;
}

LTRRTL

local-minimum-width-override.tsx · 40 строк

import {
  CheckboxCard,
  CheckboxCardContent,
  CheckboxCardControl,
  CheckboxCardControlCheckedIcon,
  CheckboxCardControlIndeterminateIcon,
  CheckboxCardControlInput,
  CheckboxCardDescription,
  CheckboxCardTitle,
  CheckboxIndicator,
} from '@vega-ui/react';
import './local-minimum-width-override.css';

Свои иконки состояний

Дочерние элементы CheckboxCardControlCheckedIcon и CheckboxCardControlIndeterminateIcon заменяют иконку по умолчанию для этого состояния. Другое состояние сохраняет свою иконку.

LTRRTL

custom-state-icons.tsx · 49 строк

import {
  CheckboxCard,
  CheckboxCardContent,
  CheckboxCardControl,
  CheckboxCardControlCheckedIcon,
  CheckboxCardControlIndeterminateIcon,
  CheckboxCardControlInput,
  CheckboxCardDescription,
  CheckboxCardTitle,
  CheckboxIndicator,
} from '@vega-ui/react';
import { Diff, Rocket } from '@vega-ui/icons';

Не переопределяйте

не ломайте область клика подписанной карточки хаками с pointer-events
не стилизуйте отмеченные карточки так, чтобы скрывалось отключённое или неопределённое состояние
не считайте отступы описательного текста независимыми от ориентации карточки