dropdownButton

dropdownButton представляет собой главную кнопку, при нажатии на которую открывается раскрывающееся меню, содержащее список элементов.

XML-элемент

dropdownButton

Java-класс

DropdownButton

Основы

ДЕМО

Основная кнопка отображает text, icon или оба элемента. При нажатии на кнопку открывается выпадающее меню.

Выпадающее меню содержит список действий, каждое из которых представлено кликабельным элементом.

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

Вот пример определения dropdownButton с помощью text, icon и всплывающей подсказки (с использованием атрибута title), полученной из пакет сообщений:

XML
<layout classNames="horizontal-layout">
    <dropdownButton id="dropdownButton1" text="Save">
        <items>
            <textItem id="docSaveItem" text="Save as DOC"/>
            <textItem id="pdfSaveItem" text="Save as PDF"/>
        </items>
    </dropdownButton>
    <dropdownButton id="dropdownButton2" text="Save" icon="ARCHIVE">
        <items>
            <componentItem id="docSaveItem">
                <hbox padding="false">
                    <icon icon="FILE"/>
                    <span text="Save as DOC"/>
                </hbox>
            </componentItem>
            <componentItem id="pdfSaveItem">
                <hbox padding="false">
                    <icon icon="FILE"/>
                    <span text="Save as PDF"/>
                </hbox>
            </componentItem>
        </items>
    </dropdownButton>
    <dropdownButton id="dropdownButton3" icon="ARCHIVE"/>
</layout>
Java
@ViewComponent
private DropdownButton dropdownButton3;
@Subscribe
public void onInit(InitEvent event) {
    dropdownButton3.addItem(
            "docSaveItem",
            new BaseAction<>("docSave")
                    .withText("Save as DOC")
                    .withHandler(e -> saveAsDoc())
    );
    dropdownButton3.addSeparator();
    dropdownButton3.addItem(
            "docPdfItem",
            new BaseAction<>("pdfSave")
                    .withText("Save as PDF")
                    .withHandler(e -> saveAsPdf())
    );
}

Варианты темы

ДЕМО

Используйте атрибут themeNames, чтобы применить один или несколько вариантов темы.

Вариант Описание Поддерживается в

primary

Применяет основной стиль кнопки.

Aura, Lumo

success

Применяет стиль успеха.

Aura, Lumo

warning

Применяет стиль предупреждения.

Aura, Lumo

error

Применяет стиль ошибки.

Aura, Lumo

contrast

Применяет контрастный стиль.

Lumo

large

Увеличивает размер кнопки.

Aura, Lumo

small

Уменьшает размер кнопки.

Aura, Lumo

icon

Применяет стиль кнопки-значка.

Aura, Lumo

tertiary

Применяет стиль кнопки с меньшим визуальным акцентом.

Aura, Lumo

tertiary-inline

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

Lumo

Атрибуты

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

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

dropdownIndicatorVisible

Устанавливает видимость индикатора раскрывающегося списка.

true

icon

Задаёт значок.

—

openOnHover

Если атрибут openOnHover равен true, раскрывающийся список элементов открывается автоматически при наведении фокуса на поле с помощью мыши или касания.

false

overlayClass

Добавляет имена CSS-классов во всплывающий элемент компонента.

—

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

id - alignSelf - classNames - colspan - css - enabled - focusShortcut - height - maxHeight - maxWidth - minHeight - minWidth - tabIndex - text - themeNames - title - visible - whiteSpace - width

Обработчики

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

AttachEvent - BlurEvent - DetachEvent - FocusEvent

Элементы

dropdownButton, определённый в дескрипторе XML, может содержать вложенные элементы:

actionItem

Элемент actionItem связывает пункт выпадающего меню с действием, которое выполняется при выборе этого пункта.

В атрибуте ref укажите id объявленного action.

<actions>
    <action id="callAction" text="Call Us" icon="PHONE"/>
</actions>
<layout>
    <dropdownButton icon="MAILBOX" title="msg://contact" id="callBtn">
        <items>
            <actionItem id="callUsItem" ref="callAction"/>
        </items>
    </dropdownButton>
</layout>

Когда пользователь выбирает actionItem в выпадающем меню, Jmix автоматически запускает action, указанный в атрибуте ref. Создайте для действия метод-обработчик ActionPerformedEvent и добавьте в него необходимую логику:

@Subscribe("callAction")
public void onCallAction(final ActionPerformedEvent event) {
    notifications.show("Phone number: +6(876)5463");
}

componentItem

Элемент componentItem задаёт произвольное содержимое dropdownButton.

<layout>
    <dropdownButton icon="MAILBOX" title="msg://contact" id="callBtn">
        <items>
            <componentItem id="emailIt">
                <hbox padding="false">
                    <icon icon="MAILBOX"/>
                    <span text="E Mail"/>
                </hbox>
            </componentItem>
        </items>
    </dropdownButton>
</layout>

В Jmix Studio можно создать заготовку обработчика DropdownButtonItem.ClickEvent для componentItem.

@Subscribe("callBtn.emailIt")
public void onEmailItClick(final DropdownButtonItem.ClickEvent event) {
    notifications.show("Email: test@river.net");
}

textItem

Элемент textItem содержит текст.

<layout>
    <dropdownButton icon="MAILBOX" title="msg://contact" id="callBtn">
        <items>
            <textItem id="whatsAppIt" text="WhatsApp"/>
        </items>
    </dropdownButton>
</layout>

В Jmix Studio можно создать заготовку обработчика DropdownButtonItem.ClickEvent для textItem.

@Subscribe("callBtn.whatsAppIt")
public void onCallBtnWhatsAppItClick(final DropdownButtonItem.ClickEvent event) {
    notifications.show("`WhatsApp: +6(876)5463");
}

separator

Элемент separator визуально разделяет пункты выпадающего меню.

icon

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