BMC IO DocsBMC IO Docs
IO v6
IO v7
Notes
Docs
IO v6
IO v7
Notes
Docs
  • IO Framework v7

    • О фреймворке
    • Что изменилось в 7 версии
    • Структура
    • Доступ к участкам проекта
    • Разворачивание нового проекта
  • Backend

    • Настройки проекта Conf.php
    • Настройки модуля Module.php
    • Настройки composer
    • Функции фреймворка
    • Глобальные переменные
    • Константы фреймворка
    • Event класс
    • Core класс
    • Route и работа с ними
    • Request и работа с ними
    • Middleware и работа с ними
    • Class и работа с ними
    • Api model и работа с ними
    • Template и работа с ними
    • Мультиязычность и словарь фраз
    • Bin скрипты и работа с ними
    • Cron скрипты и работа с ними
    • $ioSession и работа с сессией
    • $ioHash и работа с кешем
    • $ioXCache и работа с кешем
    • $iodb и работа с базой данных
  • Frontend

    • Twig шаблонизатор и работа с ним
    • Twig функции
    • Twig фильтры
    • Twig контекст
    • Настройка NPM
    • Сборка Frontend составляющей
    • Обращение к Api через JS
    • Хранилище (store)
    • Навигация в хосте
    • Навигация в микрофронтенде
    • Параметры микрофронтенда
    • Проверка полномочий
  • Tailux UI Компоненты

    • Базовый UI

      • AvatarDot
      • Avatar
      • Badge
      • Button
      • Card
      • ConfirmModal
      • Divider
      • Highlight
      • Tag
    • Загрузка

      • Circlebar
      • Progress
      • Skeleton
      • Spinner
    • Навигация

      • Accordion
      • AccordionButton
      • AccordionHeader
      • AccordionItem
      • AccordionPanel
      • AccordionProvider
      • Pagination
      • PaginationControl
      • PaginationItems
      • PaginationDots
      • PaginationFirst
      • PaginationLast
      • PaginationNext
      • PaginationPrevious
    • Отображение данных

      • Box
      • Collapse
      • ContextualHelp
      • ScrollShadow
      • Timeline
      • TimelineItem
    • Элементы таблиц

      • Table
      • CollapsibleSearch
      • ColumnFilter
      • CopyableCell
      • DateFilter
      • FacetedFilter
      • FilterSelector
      • PaginationSection
      • RadioFilter
      • RangeFilter
      • ResponsiveFilter
      • RoleFilter
      • SelectedRowsActions
      • TableColumnVisibility
      • TableSettings
      • TableSortIcon
    • Элементы форм

      • Checkbox
      • Combobox
      • DatePicker
      • Filepond
      • Input
      • Listbox
      • Radio
      • Range
      • Select
      • StyledSwitch
      • Swap
      • SwapOn
      • SwapOff
      • Switch
      • Textarea
      • TextEditor
      • Upload

Switch

Компонент Switch — это стилизованный переключатель (toggle) с поддержкой двух вариантов оформления, асинхронного обработчика изменений, индикатора загрузки и состояний блокировки.

Обзор

  • Основное назначение: переключение между двумя состояниями (вкл/выкл).
  • Ключевые возможности:
    • Два варианта оформления: basic (с заливкой) и outlined (контурный).
    • Цветовая палитра.
    • Асинхронный обработчик изменений с индикатором загрузки.
    • Автоматический откат при ошибке или возврате false.
    • Блокированное состояние (disabled).
    • Нестилизованный режим (unstyled).
    • Встроенная метка (label) или внешняя.
    • ARIA-роль switch.
    • Событие error при исключении в асинхронном обработчике.

API компонента

Props

ПропТипПо умолчаниюОписание
modelValueBooleanТекущее состояние переключателя (v-model).
variantString'basic'Вариант оформления. Возможные значения: 'basic', 'outlined'.
colorString'primary'Цвет переключателя. Возможные значения: 'primary', 'secondary', 'info', 'success', 'warning', 'error'.
labelString | Number | ObjectТекст метки. Если указан, переключатель оборачивается в <label>.
labelPropsObject{}Дополнительные атрибуты для элемента label.
disabledBooleanfalseБлокирует переключатель.
unstyledBooleanfalseУбирает все стили по умолчанию.
classNameStringДополнительные CSS-классы для поля ввода.
classNamesObject{}Объект для кастомизации внутренних классов. Ключи: label, labelText, input.
onChangeFunctionАсинхронная функция-обработчик изменения. Принимает новое значение, может вернуть false для отмены.
roleString'switch'ARIA-роль элемента.

События

СобытиеПараметрОписание
update:modelValueBooleanВызывается при успешном изменении состояния.
errorErrorВызывается при возникновении ошибки в асинхронном onChange.

Методы

МетодОписание
focus()Устанавливает фокус на переключатель.
blur()Убирает фокус с переключателя.

Data-атрибуты

АтрибутЗначениеУсловие
data-disabled'true'Переключатель заблокирован или в состоянии загрузки.
Prev
SwapOff
Next
Textarea