CalendarBase

Паттерны

Общий заголовок календаря

Когда использовать:

• пикеру нужен заголовок со своим листанием, например страница лет с подписью диапазона

Заметки о композиции:

• задавайте размер и вариант на корне
• рендерите кнопки управления и пикера внутри CalendarBaseHeader, каждой кнопке-иконке — aria-label
• страницей управляет приложение: меняйте year (или start) и active вместе, чтобы в порядке табуляции оставалась ячейка сетки

Компромиссы:

• единообразное оформление семейства
• логика встроенного пикера всё равно нужна отдельно

import {
  CalendarBase,
  CalendarBaseControlIconButton,
  CalendarBaseHeader,
  Icon,
  Text,
  YearPicker,
  YearPickerCell,
  YearPickerLayout,
} from '@vega-ui/react';
import { ChevronLeft, ChevronRight } from '@vega-ui/icons';
import { useState } from 'react';

Общая строка дней недели

Когда использовать:

• производное представление сетки дней, например полоса из одной недели, должно повторно использовать стандартное отображение дней недели

Заметки о композиции:

• оставляйте ровно семь подписей и размещайте их внутри пикера, потому что строка подписей — строка сетки
• выравнивайте их по встроенной сетке дней: здесь и подписи, и ячейки строятся из одних и тех же семи ISO-дней

Компромиссы:

• переиспользуемо и единообразно
• выравнивание по-прежнему зависит от логики нижележащей сетки

import {
  CalendarBase,
  CalendarBaseControlIconButton,
  CalendarBaseHeader,
  CalendarBaseWeekLabel,
  CalendarBaseWeekLabels,
  DayPicker,
  DayPickerItem,
  DayPickerRow,
  DayPickerRowGroup,
  Icon,
  Text,

Компактная встроенная оболочка

Когда использовать:

• поверхности календаря нужна меньшая ширина, например в боковой панели или карточке

Заметки о композиции:

• используйте compact с маленьким size, узкие названия дней недели с полными названиями в aria-label и короткий формат месяца
• проверьте, что встроенный пикер по-прежнему помещается без обрезки

Компромиссы:

• более плотное отображение
• крупное содержимое пикера легче «зажать»

import {
  CalendarBase,
  CalendarBaseControlIconButton,
  CalendarBaseHeader,
  CalendarBaseWeekLabel,
  CalendarBaseWeekLabels,
  Card,
  DayPicker,
  DayPickerCell,
  DayPickerLayout,
  Heading,
  Icon,

Сравнение

Быстрое правило выбора

Используйте CalendarBase, когда расширяете саму подсистему календаря. Используйте Calendar, DayPicker, MonthPicker или YearPicker, когда нужно реальное поведение выбора даты.

CalendarBase или Calendar

• Используйте CalendarBase для композиции общей оболочки.
• Используйте Calendar для подсистемы календаря, ориентированной на пользователей.

CalendarBase или компоненты-пикеры

• Используйте CalendarBase для общего оформления.
• Используйте DayPicker, MonthPicker или YearPicker для реального выбора в сетке.

CalendarBase или универсальные контейнеры раскладки

• Используйте CalendarBase, когда оболочка должна оставаться согласованной с контекстом размера и варианта семейства календаря.
• Используйте Card, Sheet или другой примитив раскладки, когда содержимое на самом деле не относится к семейству календаря.

Выбирайте этот компонент, когда

• вы расширяете внутренности семейства календаря
• нужно единообразное оформление заголовка и подписей календаря

Не выбирайте этот компонент, когда

• нужен готовый пикер
• нужна лишь универсальная панель или раскладка карточки

Решение проблем

Оформление календаря выглядит правильно, но поведение пикера кажется неполным

Симптом

Заголовок и подписи рендерятся, но календарь ведёт себя не как полноценный пикер.

Вероятная причина

CalendarBase использовали как готовый календарь, а не как оболочку.

Как проверить

• проверьте, встроен ли в оболочку реальный компонент-пикер

Исправление

Скомпонуйте CalendarBase с DayPicker, MonthPicker, YearPicker или календарём более высокого уровня.

Общие элементы управления не совпадают со встроенным пикером

Симптом

Кнопки или подписи заголовка визуально не сочетаются с содержимым пикера ниже.

Вероятная причина

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

Как проверить

• проверьте size и variant, переданные всей композиции

Исправление

Рассматривайте оболочку и встроенный пикер как одну поверхность семейства календаря и согласуйте их общий визуальный контекст.

Компактный режим обрезает содержимое

Симптом

Оболочка становится слишком узкой, и встроенному содержимому тесно.

Вероятная причина

compact включён для содержимого, которому по-прежнему нужно больше ширины.

Как проверить

• сравните одну и ту же композицию с compact и без него

Исправление

Отключите compact или соответствующим образом уменьшите плотность встроенного пикера.