Toggle

<sf-toggle> — устаревший Smart-компонент: тот же двоичный переключатель с role="switch", что и Switch. В новой разметке берите <sf-switch>; эта страница показывает, как перенести на него разметку Toggle.

Пример

Два Toggle — обычный и kind="short" — после переноса на <sf-switch>:

<div class="flex flex-col gap-3">
  <sf-switch name="compact" value="on" label="Компактный режим" checked></sf-switch>
  <sf-switch name="preview" value="on" label="Предпросмотр" root-class="sf-switch--short"></sf-switch>
</div>

Применение

Перенос атрибутов

Дорожки Toggle меньше дорожек Switch той же ступени: после переноса сверьте форму на глаз.

Код и события

Событие change, методы setChecked(), setDisabled(), setState(), getInputElement() и onChange() у обоих элементов одинаковые, поэтому обработчики переносятся без правок. Свойство state у <sf-switch> содержит только checked, disabled, name и value: type, size, icon и label читайте из атрибутов.

Где работает старая разметка

Выпуск поставляет <sf-toggle>, поэтому уже написанная разметка продолжает работать. Новую разметку на нём не пишите.

Доступность

• В обоих элементах внутренний input с role="switch" сообщает экранному диктору, что это переключатель, и его положение; перенос этого не меняет.
• Toggle с kind="icon" без подписи после переноса получает видимый label: значок в бегунке декоративный и имени не даёт.
• Переключатель — отдельная остановка Tab, Space меняет положение.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• size — string, по умолчанию 1, значения: 1, 2. Токен размера кнопки-переключателя.
• kind — string, по умолчанию simple, значения: simple, icon, short. Содержимое переключателя: ничего, иконка или короткая подпись.
• label — string, по умолчанию пусто.
• icon — string, по умолчанию пусто.
• checked — boolean, по умолчанию false.
• disabled — boolean, по умолчанию false.
• name — string, по умолчанию пусто.
• value — string, по умолчанию пусто.

Прежние имена:

Методы

• getInputElement() — возвращает object | null. Возвращает внутренний нативный input (.sf-toggle input[type=“checkbox”]) или null до отрисовки.
• setChecked(nextValue?: boolean) — возвращает object. Устанавливает свойство и состояние checked внутреннего input; не отправляет change.
• setDisabled(nextValue?: boolean) — возвращает object. Устанавливает или снимает disabled на хост-элементе и внутреннем input.
• setState(nextState: object) — возвращает object. Применяет checked и disabled, а также type, size, icon и label как атрибуты хост-элемента, к внутреннему input и отражает их в атрибутах хост-элемента; до отрисовки использует базовый setState.
• onChange(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик нативного события change, которое всплывает от внутреннего input.
• onFocus(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик focusin на хост-элементе.
• onBlur(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик focusout на хост-элементе.

События

Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

• change — detail не описан. Изменилось нажатое состояние; нативное событие всплывает от внутреннего флажка, который является его целью. Имя для привязки.

Доступность

• Роль: переключатель (switch).
• Доступное имя: обязательно.
• Клавиши: Tab, Space.
• Фокус: Сохраняет видимый фокус на активном элементе управления.

Минимальная разметка

<sf-toggle></sf-toggle>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/toggle
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-toggle