Обзор
YearPicker не определяет большого CSS-контракта для корня. Внешний вид определяется нижележащими примитивами пикера и сетки, а также скомпонованными частями раскладки лет и скроллера.
Публичные CSS-переменные
В текущей реализации нет значимых публичных CSS-переменных, специфичных для пикера лет.
Семантика темы должна приходить из Тем и CSS-переменных, а не из самодельных переопределений --year-picker-*.
Переменные частей
Корень
Корень в основном отвечает за поведение и контекст. Он владеет видимым диапазоном лет и состоянием выбора.
Раскладка / содержимое скроллера
Отображение сетки и скроллера определяется скомпонованными частями строк, элементов и скроллера, а не отдельным модулем стилей корня.
Взаимодействие состояний и вариантов
- Вид выбранного, вариантного и отключённого состояний приходит от нижележащих примитивов пикера.
- Смена видимого года влияет на отрендеренное содержимое, а не на отдельный слой стилей.
- Перелистывание скроллера меняет видимое окно, но не базовую визуальную семантику каждой ячейки года.
Примеры
Размер и вариант
size задаёт размер ячеек и шрифта, variant — вид выбранного года; форму страницы задают rows и cols раскладки. Всё это пропсы, а не CSS-переменные.
import { YearPicker, YearPickerCell, YearPickerLayout } from '@vega-ui/react';
export default function SizeAndVariant() {
return (
<div style={{ display: 'grid', gap: 'var(--spacing-16)', width: '100%' }}>
<YearPicker aria-label='Secondary, extra small' locale='en-US' year='2020-01-01' defaultSelected='2026-01-01' style={{ width: '100%' }}>
<YearPickerLayout rows={3} cols={4}>
<YearPickerCell />
</YearPickerLayout>
</YearPicker>
<YearPicker aria-label='Primary, medium' locale='en-US' year='2020-01-01' size='md' variant='primary' defaultSelected='2026-01-01' style={{ width: '100%' }}>
<YearPickerLayout rows={4} cols={3}>Не переопределяйте
- не придумывайте API стилизации пикера лет, которого нет в исходном коде
- не рассчитывайте, что поведение скроллера управляется стилями, а не логикой сопоставления