💎
Prizm Design System Documentation
ShowcaseGitHubRepot a Bug
  • About Prizm
    • Дизайн-система Prizm
    • Changelog
    • License
  • Guidelines
    • ⭕Accessibility
    • ⭕Colors
    • 🚧Design Tokens
      • Color
      • Border Radius
      • Box Shadow
      • Font
      • Line Height
      • Size
      • Space
      • Transition
      • Page
    • ⭕Grid
    • ⭕Iconography
    • ⭕Naming
    • ⭕Typography
    • 🚧Validation
  • Components
    • 🚧Accordion
    • 🚧Breadcrumbs
    • 🚧Buttons
      • Text Button
      • Icon Buttn
      • Split Button
    • 🚧Calendars
      • Calendar
      • Calendar Range
      • ⭕Calendar Month
      • Calendar Year
    • ⭕Card
    • 🚧Checkbox
    • 🚧Chips
    • 🚧Dialogs
      • Confirm dialog
      • Dialog
      • Sidebar
    • ⭕Hierarchy
    • Hint
    • 🚧Indicator
      • 🚧Counter
      • ⭕Point
      • ⭕Icon
    • 🚧Inputs
      • Chips
      • Chips Select
      • Chips Combobox
      • Date
      • Datе Time Range
      • Date Range
    • Navigation menu
    • 🚧Navigation Panel
      • Header
      • Navigation menu
    • 🚧Dropdown Menu
      • Context Menu
      • Dropdown Menu
    • 🚧Paginator
    • 🚧Panel
    • 🚧Progress
      • Bar
      • Spinner
    • 🚧RadioButton
    • 🚧Scrollbar
    • 🚧Shell
    • ⭕Skeleton
    • 🚧Slider
    • 🚧Splitter
    • 🚧Status Panel
    • 🚧Stepper
    • 🚧Switcher
    • ⭕Table
      • Настройки таблицы
    • 🚧Tab
    • Time Picker
    • 🚧Toast
    • 🚧Toggle
    • 🚧Tooltip
    • Tree
      • Tree Chevrone
      • Tree Line
    • 🚧Widget
  • Patterns
    • ⭕403 / 404
    • Query builder
    • ⭕Cron
    • None content
    • ⭕Group Content
    • ⭕File Upload
    • ⭕Side Menu
    • ⭕Zoom Control
Powered by GitBook
On this page
  • Анатомия
  • Описание работы
  • Открытие календаря
  • Выбор года
  • Выбор периода
  • Закрытие календаря
  • Размеры
  • Внешние размеры
  • Внутренние размеры
  • Расположение
  • Состояния

Was this helpful?

  1. Components
  2. Calendars

Calendar Year

PreviousCalendar MonthNextCard

Last updated 4 months ago

Was this helpful?

Анатомия

  1. Тело календаря с выбором года

  2. Блок кнопок (для DropdownHost). Когда календарь используется вне инпута (например, в фильтре траблицы). Используется для подтверждения выбора

  3. Скролл

Для разработчиков В компоненте имеется слот для добавления блока кнопок, в котором можно выставлять свои настройки.

Описание работы

Открытие календаря

Открытие календаря происходит двумя способами:

  • При нажатии на значок календаря в правой части InputLayoutYear

  • При попадании в фокус поля InputLayoutYear, календарь года появляется и остается открытым до тех пор, пока не будет выбран год или фокус не будет снят

Тело календаря отображает 15 лет. Текущий год по умолчанию находится в центре плитки. Для просмотра годов, которые не отображаются по умолчанию, есть скролл.

Выбор года

По умолчанию, а так же при первом выборе мы предлагаем показывать пользователю календарь с текущим годом, но в зависимости от решаемой задачи или контекста, стартовое значение может быть изменено.

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

Выбрать год можно:

  • Вводом вручную в поле ввода InputLayoutYear

  • Выбором года в списке, раскрывающимся по клику на соответствующие селекторы

Выбор периода

  • Ввод периода вручную в поле InputLayoutYear

  • Щелчок по году начала и году окончания периода в календаре

  • Переход к году начала с помощью клавиш со стрелками и нажатия Enter. Затем продолжайте использовать клавиши со стрелками для перехода к году окончания периода и снова нажмите Enter.

Закрытие календаря

Календарь можно закрыть одним из следующих способов:

Без кнопок ( в InputLayoutYear)

  • Щелчок в любом месте за пределами календаря

  • Снятие фокуса с InputLayoutYear

  • Нажатие Esc

С кнопками (в DropdownHost)

  • В случае, если для подтверждения выбора используется кнопка “Применить”, то календарь закрывается по клику на нее или на кнопку “Отменить”

Размеры

Внешние размеры

Календарь имеет динамическую высоту, в зависимости от входящих в неё дополнительных блоков (например, с кнопками подтверждения выбора) и фиксированную ширину 312 px.

Внутренние размеры

Боковые паддинги календаря по 16 px

Расположение

Расстояние от формы ввода до календаря - 4 рх

Выравниваются календарь всегда по левому краю от формы InputLayoutYear

Состояния

Годы календаря имеют 5 состояний:

  1. Default. Состояние по умолчанию

  2. Hover. При наведении

  3. Active. Выбранный год

  4. Period. Год, попадающий в выбранный период

  5. Disabled. Год, заблокированный для выбора

Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора дня с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с любым другим состоянием. Невозможен в состоянии Disabled.

Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.

🚧