switch

switch позволяет пользователям включать и выключать логические значения.

XML-элемент

switch

Java-класс

Switch

Основы

ДЕМО

switch — альтернатива компоненту checkbox, предназначенная для интуитивного представления двоичных состояний.

Когда использовать switch:

  • Переключение между двумя взаимоисключающими состояниями (например, Вкл/Выкл).

  • Мгновенная визуальная обратная связь.

  • Включение/отключение настроек с немедленным применением.

Компоненты checkbox и checkboxGroup, в свою очередь, больше подходят для:

  • Выбора одного или нескольких пунктов из списка.

  • Возможности множественного, неисключающего выбора.

  • Сценариев, где изменения не применяются мгновенно

Пример использования switch:

<switch id="carField" label="I have a car"/>

switch связанный с данными

ДЕМО

Используйте атрибуты dataContainer и property, чтобы связать switch с атрибутом сущности типа Boolean. Контейнер данных предоставляет экземпляр сущности, а property указывает редактируемый атрибут.

Следующий пример создаёт переключатель, связанный с данными. Атрибут сущности должен быть типа Boolean.

XML
<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <switch id="activeSwitch"
              label="Switch connected to a container"
              dataContainer="customerDc"
              property="active"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>
Java
@ViewComponent
private InstanceContainer<Customer> customerDc;
@ViewComponent
private Span spanValue;

@Autowired
private Metadata metadata;

@Subscribe
public void onInit(InitEvent event) {
    Customer customer = metadata.create(Customer.class);
    customer.setActive(true);
    customerDc.setItem(customer);
}

@Subscribe("activeSwitch")
private void onActiveSwitchValueChange(ComponentValueChangeEvent<Switch, Boolean> changeEvent) {
    spanValue.setText(customerDc.getItem().isActive().toString());
}

Состояния

switch может находиться в нескольких состояниях, определяющих его внешний вид и функциональность.

Enabled

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

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

<switch label="Enable Dark Mode"
        value="true"
        enabled="false"/>
<switch label="Enable Dark Mode"
        value="true"
        enabled="true"/>

Read-only

Атрибут readOnly управляет возможностью взаимодействия пользователя с компонентом switch. Если он установлен в true, переключатель становится доступным только для чтения, то есть пользователь не может изменить его состояние.

<switch label="Enable Dark Mode"
        value="true"
        readOnly="false"/>
<switch label="Enable Dark Mode"
        value="true"
        readOnly="true"/>

Required

Компонент можно настроить как обязательный, используя атрибут required или связав его с обязательным атрибутом c @NotNull валидацией.

Если поле обязательное, рядом с подписью отображается соответствующий индикатор. Если switch был включён, а затем выключен, поле будет отмечено как недопустимое, пока обязательное условие снова не будет выполнено.

Атрибуты

switch имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

enabled

Устанавливает компонент явно отключенным или включенным. См. Включенное состояние.

true

readOnly

Указывает, находится ли компонент switch в режиме только для чтения. См. Состояние только для чтения.

false

required

Установите необходимое состояние switch. См. Требуемое состояние.

false

value

Задаёт значение компонента.

—

switch имеет следующие общие атрибуты:

id - alignSelf - ariaLabel - ariaLabelledBy - autofocus - classNames - clickShortcut - colspan - css - dataContainer - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - property - requiredMessage - tabIndex - visible - width

Обработчики

switch имеет следующие уникальные обработчики:

Имя Описание

ClickEvent

Запускается, когда пользователь кликает компонент.

switch имеет следующие общие обработчики:

AttachEvent - BlurEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent

Элементы

Компонент switch может содержать следующие вложенные элементы: tooltip.