Пропсы корня
| Проп | Тип | По умолчанию |
|---|---|---|
variant | CalendarBaseVariant | 'secondary' |
Визуальный вариант календаря. Передаётся через CalendarBaseContext и используется вложенными элементами управления (кнопками, подписями и т. д.) для единообразной стилизации. | ||
size | CalendarBaseSize | 'xs' |
Общая шкала размера календаря. Через CalendarBaseContext влияет на вложенные элементы управления: кнопки навигации, триггеры пикеров и подписи дней недели. | ||
compact | boolean | — |
Флаг плотности для более компактных раскладок. При true корневой элемент получает data-compact="true", чтобы стили могли уменьшить отступы, промежутки и высоту элементов управления для более плотного календаря. При false или undefined календарь использует обычные интервалы. | ||
Также принимает все атрибуты <div>.
Дочерние части
CalendarBaseHeaderCalendarBaseWeekLabelsCalendarBaseWeekLabelCalendarBasePickerButtonCalendarBaseControlIconButton
CalendarBaseHeader
Также принимает все атрибуты <div>.
CalendarBaseWeekLabel
| Проп | Тип | По умолчанию |
|---|---|---|
size | TextSize | — |
| Визуальный размер текста, обычно соответствует типографической шкале дизайн-системы. | ||
asChild | boolean | — |
Если true, рендерит текст как дочерний компонент через Slot. Полезно для совместимости с нативными элементами или другими компонентами. | ||
fontWeight | 400 | 500 | 600 | 700 | 900 | — |
| Насыщенность шрифта текста. Распространённые значения: 400: обычный; 500: средний; 600: полужирный; 700: жирный; 900: сверхжирный | ||
ref | Ref<HTMLSpanElement> | — |
Ref на нижележащий <span> или элемент в слоте. Полезен для измерений, фокуса или работы с DOM. | ||
Также принимает все атрибуты <span>.
CalendarBaseWeekLabels
Также принимает все атрибуты <div>.
CalendarBasePickerButton
| Проп | Тип | По умолчанию |
|---|---|---|
asChild | boolean | — |
Если true, рендерит кнопку как дочерний компонент через Slot (например, из Radix UI). Включает полиморфный рендер — полезно, чтобы кнопка работала как ссылка или собственный тег. | ||
size | ButtonSize | — |
| Определяет размер кнопки. Влияет на отступы, размер шрифта и общие габариты. | ||
fullWidth | boolean | — |
| Если true, кнопка растягивается на всю ширину контейнера. | ||
variant | ButtonBaseVariant | — |
| Определяет визуальный стиль кнопки: цветовую схему и акцент. | ||
appearance | ButtonBaseAppearance | — |
| Настраивает структурный внешний вид кнопки (фон, рамка и т. д.). | ||
disabled | boolean | — |
Отключает кнопку при true. Запрещает взаимодействие и применяет визуальное отключённое состояние. Не применяется с asChild: отключённым состоянием владеет дочерний элемент, например через aria-disabled или ссылку без href. | ||
className | string | — |
| Необязательный собственный CSS-класс для элемента кнопки. Полезен для переопределений дизайн-системы или локальных стилей. | ||
children | ReactNode | — |
| Содержимое кнопки — текст, иконка или любой React-узел. | ||
ref | Ref<HTMLButtonElement> | — |
Ref, передаваемый на нативный элемент <button>. Даёт прямой доступ к DOM для управления фокусом или измерений. | ||
Также принимает все атрибуты <button>.
CalendarBaseControlIconButton
| Проп | Тип | По умолчанию |
|---|---|---|
size | IconButtonSize | — |
| Размер контейнера кнопки. Управляет отступами и общей кликабельной областью. | ||
asChild | boolean | — |
Если true, рендерит кнопку как дочерний компонент через Slot (например, из Radix UI). Включает полиморфный рендер — полезно, чтобы кнопка работала как ссылка или собственный тег. | ||
variant | ButtonBaseVariant | — |
| Определяет визуальный стиль кнопки: цветовую схему и акцент. | ||
appearance | ButtonBaseAppearance | — |
| Настраивает структурный внешний вид кнопки (фон, рамка и т. д.). | ||
disabled | boolean | — |
Отключает кнопку при true. Запрещает взаимодействие и применяет визуальное отключённое состояние. Не применяется с asChild: отключённым состоянием владеет дочерний элемент, например через aria-disabled или ссылку без href. | ||
className | string | — |
| Необязательный собственный CSS-класс для элемента кнопки. Полезен для переопределений дизайн-системы или локальных стилей. | ||
children | ReactNode | — |
| Содержимое кнопки — текст, иконка или любой React-узел. | ||
ref | Ref<HTMLButtonElement> | — |
Ref, передаваемый на нативный элемент <button>. Даёт прямой доступ к DOM для управления фокусом или измерений. | ||
Также принимает все атрибуты <button>.
Типы
CalendarBasePropsCalendarBaseHeaderPropsCalendarBaseWeekLabelsPropsCalendarBaseWeekLabelPropsCalendarBasePickerButtonPropsCalendarBaseControlIconButtonPropsCalendarBaseVariantCalendarBaseSize
Модель состояния
- У
CalendarBaseнет собственного состояния выбора даты. - Он только передаёт визуальный контекст вложенным частям семейства календаря.