TimePickerSelect для выбора времени

TimePickerSelect — это компонент библиотеки Carbon Components Svelte, предназначенный для создания выпадающего списка с выбором интервалов времени. Он часто используется совместно с компонентом TimePicker, позволяя пользователю выбрать часы, минуты или AM/PM, обеспечивая единообразный пользовательский интерфейс и соответствие дизайну Carbon Design System.

Основная структура компонента

Компонент TimePickerSelect является оберткой для стандартного HTML <select> с дополнительными стилями и логикой Carbon. Основные свойства включают:

  • id — уникальный идентификатор компонента.
  • labelText — текст метки, отображаемой над выпадающим списком.
  • hideLabel — скрывает визуальное отображение метки, но оставляет ее для доступности (screen readers).
  • disabled — делает компонент неактивным.
  • value — текущее выбранное значение.
  • items — массив объектов, представляющих элементы списка.
  • invalid — устанавливает состояние ошибки.
  • invalidText — текст ошибки, отображаемый пользователю.

Пример минимальной структуры:

<TimePickerSelect
  id="hours-select"
  labelText="Часы"
  value="12"
  {items}
/>

Где items может быть определен как:

let items = [
  { text: '01', value: '01' },
  { text: '02', value: '02' },
  { text: '03', value: '03' },
  { text: '04', value: '04' },
  { text: '05', value: '05' },
];

Настройка доступных значений

TimePickerSelect позволяет гибко настраивать диапазон времени:

  • Для часов: от 01 до 12 (12-часовой формат) или 00 до 23 (24-часовой формат).
  • Для минут: обычно шаг равен 1, но можно использовать 5 или 15 для удобства.
  • Для AM/PM: две опции "AM" и "PM".

Создание диапазона можно автоматизировать через генерацию массива:

function generateHours(format = 12) {
  const hours = [];
  const max = format === 12 ? 12 : 23;
  const min = format === 12 ? 1 : 0;
  for (let i = min; i <= max; i++) {
    const value = i < 10 ? `0${i}` : `${i}`;
    hours.push({ text: value, value });
  }
  return hours;
}

let hours = generateHours();

Интеграция с TimePicker

Компонент TimePickerSelect чаще всего используется внутри TimePicker:

<TimePicker id="time-picker" labelText="Выберите время">
  <TimePickerSelect
    id="hours-select"
    labelText="Часы"
    bind:value={selectedHour}
    items={hours}
  />
  <TimePickerSelect
    id="minutes-select"
    labelText="Минуты"
    bind:value={selectedMinute}
    items={minutes}
  />
</TimePicker>

bind:value позволяет синхронизировать выбранное значение с переменной Svelte, что облегчает дальнейшую обработку данных и динамическое обновление интерфейса.

Управление состояниями

TimePickerSelect поддерживает несколько ключевых состояний:

  • disabled — блокировка выбора:

    <TimePickerSelect disabled items={hours} />

  • invalid — визуальное выделение ошибки:

    <TimePickerSelect
  invalid
  invalidText="Неверное значение"
  items={hours}
/>

  • hideLabel — для экономии места, сохраняя доступность:

    <TimePickerSelect hideLabel labelText="Часы" items={hours} />

События компонента

Компонент поддерживает стандартное событие change, которое срабатывает при выборе нового значения:

<TimePickerSelect
  id="hours-select"
  labelText="Часы"
  items={hours}
  on:change={(e) => console.log('Выбрано значение:', e.target.value)}
/>

Это позволяет динамически реагировать на изменения времени и интегрировать компонент с логикой приложения.

Стилизация и кастомизация

Carbon Components Svelte использует SCSS-переменные для настройки стилей, однако TimePickerSelect следует общей стилистике Carbon Design System:

  • Размер шрифта, отступы и высота компонента автоматически подстраиваются под контейнер TimePicker.

  • Можно изменять состояние фокуса и ошибки через стандартные CSS-классы Carbon:

    • .bx--select
    • .bx--select__input
    • .bx--select--disabled
    • .bx--select--invalid

Пример кастомизации цвета текста при ошибке:

.bx--select--invalid .bx--select__input {
  color: #da1e28;
}

Практические рекомендации

  • Для повышения доступности всегда использовать labelText даже при скрытой метке (hideLabel).
  • Минимизировать количество элементов в списке до разумного диапазона (например, минуты через шаг 5–15), чтобы не перегружать пользователя.
  • Использовать bind:value для простого связывания выбранного значения с логикой приложения.
  • Совмещать TimePickerSelect с другими элементами Carbon для создания консистентного и предсказуемого интерфейса.

TimePickerSelect является гибким инструментом для построения пользовательских интерфейсов, где требуется выбор времени, и идеально вписывается в Svelte-приложения с Carbon Design System.

Оглавление