Calendar Year
Last updated
Was this helpful?
Last updated
Was this helpful?
Тело календаря с выбором года
Блок кнопок (для DropdownHost). Когда календарь используется вне инпута (например, в фильтре траблицы). Используется для подтверждения выбора
Скролл
Открытие календаря происходит двумя способами:
При нажатии на значок календаря в правой части InputLayoutYear
При попадании в фокус поля InputLayoutYear, календарь года появляется и остается открытым до тех пор, пока не будет выбран год или фокус не будет снят
Тело календаря отображает 15 лет. Текущий год по умолчанию находится в центре плитки. Для просмотра годов, которые не отображаются по умолчанию, есть скролл.
По умолчанию, а так же при первом выборе мы предлагаем показывать пользователю календарь с текущим годом, но в зависимости от решаемой задачи или контекста, стартовое значение может быть изменено.
В случае, если пользователем уже был сделан выбор года, то при повторном вызове календаря открывается выбранный ранее год.
Выбрать год можно:
Вводом вручную в поле ввода InputLayoutYear
Выбором года в списке, раскрывающимся по клику на соответствующие селекторы
Ввод периода вручную в поле InputLayoutYear
Щелчок по году начала и году окончания периода в календаре
Переход к году начала с помощью клавиш со стрелками и нажатия Enter. Затем продолжайте использовать клавиши со стрелками для перехода к году окончания периода и снова нажмите Enter.
Календарь можно закрыть одним из следующих способов:
Без кнопок ( в InputLayoutYear)
Щелчок в любом месте за пределами календаря
Снятие фокуса с InputLayoutYear
Нажатие Esc
С кнопками (в DropdownHost)
В случае, если для подтверждения выбора используется кнопка “Применить”, то календарь закрывается по клику на нее или на кнопку “Отменить”
Календарь имеет динамическую высоту, в зависимости от входящих в неё дополнительных блоков (например, с кнопками подтверждения выбора) и фиксированную ширину 312 px.
Боковые паддинги календаря по 16 px
Расстояние от формы ввода до календаря - 4 рх
Выравниваются календарь всегда по левому краю от формы InputLayoutYear
Годы календаря имеют 5 состояний:
Default. Состояние по умолчанию
Hover. При наведении
Active. Выбранный год
Period. Год, попадающий в выбранный период
Disabled. Год, заблокированный для выбора
Так же существует состояние Focus. Он появляется в момент выбора дня с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с любым другим состоянием. Невозможен в состоянии Disabled.
Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.