Перейти к содержимому
v2.5.0
English
Русский
Документация

DataGridPicker

DataGridPicker — визуальный слой пикера поверх DataGridSelectable.
StorybookИсходники

Обзор

DataGridPicker добавляет визуальный слой пикера поверх DataGridSelectable. У самого корня мало собственного CSS, но элементы пикера и составные обёртки используют контекст размера и варианта пикера.

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

1 mo
6 mo
12 mo
ПеременнаяЗначениеВлияет на
Размер элемента.DataGridPickerItem
В этом состоянии изменений не видно
Коэффициент радиуса элемента.DataGridPickerItem
В этом состоянии изменений не видно
Цвет текста элемента.DataGridPickerItem
В этом состоянии изменений не видно
Фон элемента.DataGridPickerItem
В этом состоянии изменений не видно
Фон элемента при наведении.DataGridPickerItem
В этом состоянии изменений не видно
Фон элемента при нажатии.DataGridPickerItem
В этом состоянии изменений не видно
Цвет текста выбранного элемента.DataGridPickerItem
В этом состоянии изменений не видно
Фон выбранного элемента.DataGridPickerItem
В этом состоянии изменений не видно
Фон выбранного элемента при наведении.DataGridPickerItem
В этом состоянии изменений не видно
Фон выбранного элемента при нажатии.DataGridPickerItem
В этом состоянии изменений не видно
Фон элементов внутри выбранного диапазона.DataGridPickerItem
В этом состоянии изменений не видно
Фон элемента диапазона при наведении.DataGridPickerItem
В этом состоянии изменений не видно
Фон элемента диапазона при нажатии.DataGridPickerItem
В этом состоянии изменений не видно

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

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

Корень

Корень в основном предоставляет контекст пикера, а не служит насыщенной поверхностью для стилизации.

Элементы

DataGridPickerItem и связанные составные обёртки выражают видимую семантику пикера: внешний вид активного, выбранного и отключённого состояний.

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

  • size и variant передаются дочерним частям через контекст пикера.
  • Визуальное выбранное и активное состояния зависят от слоя элементов пикера.
  • Композиция со скроллером меняет макет и постраничный вывод, но не базовое семейство цветов.

Примеры

Матрица пикера в фирменных цветах

variant='primary' переключает цвет выбранного элемента на фирменную палитру, а size='lg' увеличивает все элементы через контекст. Каждый элемент читает --data-grid-picker-item-size и --data-grid-picker-item-br-ratio со своего узла, поэтому круглая форма задаётся на элементах, а не на корне.

brand-colored-picker-matrix.tsx · 33 строки
import { type CSSProperties } from 'react';
import {
  DataGridPicker,
  DataGridPickerItem,
  DataGridPickerRow,
  DataGridPickerRowGroup,
} from '@vega-ui/react';

const amounts = [[5, 10, 15], [20, 50, 100]];
const roundItem = { '--data-grid-picker-item-br-ratio': 0.5 } as CSSProperties;

export default function BrandColoredPickerMatrix() {

Что не переопределять

  • не придумывайте отдельный API токенов корня, которого нет в исходниках
  • не стилизуйте ячейки пикера так, чтобы скрывались активное, выбранное или отключённое состояния
  • не превращайте scope макета и логику постраничного вывода в задачи CSS