DateTimeField

DateTimeField — составной компонент для совместного ввода даты и времени, который согласует ввод с клавиатуры, необязательный выбор в календаре и правила метки времени в одном поле.

Storybook Исходники

Обзор

Стили DateTimeField распределены между унаследованной поверхностью TextField, календарём в поповере и небольшим локальным контрактом на DateTimeFieldTriggerIconButton.

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

Starts at

Переменная	Значение	Влияет на
Выравнивает триггер по высоте поля ввода.`DateTimeFieldTriggerIconButton`		В этом состоянии изменений не видно
Цвет иконки триггера.`DateTimeFieldTriggerIconButton`		В этом состоянии изменений не видно
Фон триггера при наведении.`DateTimeFieldTriggerIconButton`		В этом состоянии изменений не видно
Цвет иконки кнопки при наведении.`DateTimeFieldTriggerIconButton`		В этом состоянии изменений не видно
Цвет иконки кнопки при нажатии.`DateTimeFieldTriggerIconButton`		В этом состоянии изменений не видно
Фон кнопки при нажатии.`DateTimeFieldTriggerIconButton`		В этом состоянии изменений не видно

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

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

DateTimeField: наследует бо́льшую часть оформления от TextField.
DateTimeFieldInput: следует той же модели поверхности поля, что и другие контролы текстового ввода.
DateTimeFieldTriggerIconButton: использует локальные переменные кнопки на основе токенов темы.
DateTimeFieldCalendar: следует контрактам стилизации Calendar и Popover.

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

Отключённое состояние должно приглушать поле ввода и триггер вместе.
Стили ошибки должны приходить из состояния окружающего поля.
Семантика времени должна оставаться читаемой даже в плотных формах.

Примеры

.scheduleTrigger {
  --button-color: var(--label-secondary);
  --button-background-color-hover: var(--fills-secondary-hover);
}

.compactScheduleTrigger {
  --icon-button-size: 32px;
}

Дочерние элементы DateTimeFieldTriggerIconButton заменяют его иконку календаря по умолчанию; размер, состояния и доступное имя кнопки сохраняются.

LTRRTL

custom-trigger-icon.tsx · 71 строка

import { CalendarDaysIcon } from '@vega-ui/icons';
import {
  CalendarContent,
  CalendarDay,
  CalendarDays,
  CalendarHeader,
  CalendarMonth,
  CalendarMonthLabel,
  CalendarMonths,
  CalendarNextButton,
  CalendarPrevButton,
  CalendarViewButton,

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

Не скрывайте состояния фокуса и невалидности собственными цветами триггера.
Не используйте этот файл для перестилизации слоя календаря; используйте контракты Calendar и Popover.
Не заменяйте семантические токены темы сырыми значениями палитры в переопределениях на уровне поля.