CalendarBase

CalendarBase — общая основа раскладки и контекста для семейства календарей VegaUI.

Обзор

Стилизация CalendarBase в основном определяется раскладкой. Он задаёт внешнюю оболочку и позволяет общим элементам управления наследовать размер и вариант через контекст, а не предоставляет обширный локальный CSS API компонента.

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

В текущей реализации нет значимых публичных переменных --calendar-base-*.

Общие части в основном используют существующие системные токены:

MoTuWeThFrSaSu

Переменная	Значение	Влияет на
вертикальный отступ между секциями календаряпромежуток в корне		В этом состоянии изменений не видно
приглушённый тон дня неделиподпись дня недели		В этом состоянии изменений не видно
минимальная высота подписиподпись дня недели		В этом состоянии изменений не видно

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

О слое темы, стоящем за этими значениями, см. Темы и Токены.

Переменные частей

Корень

Использует grid-раскладку и необязательное поведение ширины compact.

Использует flex-строку с небольшими внутренними отступами.

Подписи дней недели

Используют сетку из 7 колонок и приглушённый текст по центру.

CalendarBasePickerButton и CalendarBaseControlIconButton в основном наследуют визуальный контракт от общих примитивов кнопок.

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

Размер и вариант передаются общим примитивам кнопок и текста через контекст.
compact ограничивает ширину значением min-content.
CalendarBase должен визуально соответствовать слою пикера, отрендеренному внутри, а не вводить отдельную визуальную тему.

Примеры

Размер и вариант через контекст

size и variant задаются один раз на CalendarBase и доходят до кнопок заголовка и подписей дней недели через контекст. Встроенный пикер этот контекст не читает, поэтому получает те же size и variant сам.

LTRRTL

size-and-variant.tsx · 73 строки

import {
  CalendarBase,
  CalendarBaseControlIconButton,
  CalendarBaseHeader,
  CalendarBasePickerButton,
  CalendarBaseWeekLabel,
  CalendarBaseWeekLabels,
  DayPicker,
  DayPickerCell,
  DayPickerLayout,
  Icon,
} from '@vega-ui/react';

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

не изобретайте отдельный API токенов для calendar-base, ведь реализация в основном опирается на общие примитивы
не стилизуйте базовые части так, чтобы нарушалось единообразие с остальным семейством календаря