switch
Компонент switch позволяет пользователям переключаться между двумя состояниями: true (включено) и false (выключено). Это делает компонент идеальным для включения/отключения настроек, управления предпочтениями, работы с бинарными опциями. Визуальный дизайн компонента имитирует физический переключатель-слайдер со сдвигающейся ручкой.
XML-элемент |
|
|---|---|
Java-классс |
|
Атрибуты |
id - alignSelf - ariaLabel - ariaLabelledBy - autofocus - classNames - clickShortcut - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - required - requiredMessage - tabIndex - value - visible - width |
Обработчики |
AttachEvent - BlurEvent - ClickEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent |
Элементы |
Основы
switch является альтернативой компоненту checkbox и предназначен для интуитивно понятного отображения бинарных состояний.
Когда использовать switch:
-
Переключение между двумя взаимоисключающими состояниями (например, Вкл/Выкл).
-
Мгновенная визуальная обратная связь.
-
Включение/отключение настроек с немедленным применением.
Компоненты checkbox и checkboxGroup, в свою очередь, больше подходят для:
-
Выбора одного или нескольких пунктов из списка.
-
Возможности множественного, неисключающего выбора.
-
Сценариев, где изменения не применяются мгновенно
Пример использования переключателя:
<switch label="Enable Dark Mode"
value="true"/>
Привязка данных
Привязка данных означает связывание визуального компонента с контейнером данных. Изменения в визуальном компоненте или соответствующем контейнере данных могут вызывать обновления друг друга. Смотрите Использование компонентов данных для получения дополнительной информации.
Следующий пример создает переключатель, связанный с данными. Атрибут сущности должен быть типа Boolean.
<data>
<instance id="userDc"
class="com.company.onboarding.entity.User"> (1)
<fetchPlan extends="_base"/> (2)
<loader/>
</instance>
</data>
<layout>
<switch label="Active"
dataContainer="userDc"
property="active"/> (3)
</layout>| 1 | InstanceContainer для сущности User. |
| 2 | Встроенный план выборки экземпляра сущности, находящегося в контейнере. |
| 3 | Привязка компонента к контейнеру данных и свойству. Атрибут dataContainer содержит ссылку на контейнер данных userDc, а атрибут property ссылается на атрибут сущности active. |
Состояния
switch может находиться в нескольких состояниях, определяющих его внешний вид и функциональность.
Enabled
-
Отключено: переключатель неактивен и не реагирует на действия пользователя. Визуально он часто отображается серым цветом, чтобы указать на его неактивное состояние.
-
Включено: переключатель интерактивный и реагирует на действия пользователя. Пользователи могут щелкнуть по нему, чтобы изменить его состояние.
XML-код
<switch label="Enable Dark Mode"
value="true"
enabled="false"/>
<switch label="Enable Dark Mode"
value="true"
enabled="true"/>Read-only
Атрибут readOnly управляет возможностью взаимодействия пользователя с компонентом switch. Если он установлен в true, переключатель становится доступным только для чтения, то есть пользователь не может изменить его состояние.
XML-код
<switch label="Enable Dark Mode"
value="true"
readOnly="false"/>
<switch label="Enable Dark Mode"
value="true"
readOnly="true"/>Required
Компонент можно настроить как обязательный, используя атрибут required или связав его с обязательным атрибутом c @NotNull валидацией.
Когда поле отмечено как обязательное, рядом с меткой появляется визуальный индикатор, информирующий пользователя. Если переключатель изначально включен (выбран), а затем выключен (снят выбор), поле будет помечено как невалидное, пока снова не будет выполнено требование обязательности.
Как и поля ввода, switch пройдет валидацию @NotNull только в том случае, если он не пуст (т.е. если он отмечен). Поведение по умолчанию можно изменить с помощью свойства jmix.ui.component.checkbox-required-state-initialization-enabled которое позволяет считать неотмеченное состояние равным значению false.
|
Атрибуты
В Jmix есть множество общих атрибутов, которые выполняют одну и ту же функцию для всех компонентов.
Ниже приведены атрибуты, специфичные для switch:
Название |
Описание |
Значение по умолчанию |
|---|---|---|
Устанавливает компонент явно отключенным или включенным. Смотрите Состояние Enabled. |
|
|
Указывает, находится ли компонент |
|
|
Устанавливает обязательное состояние для |
|