dropdownButton

LIVE DEMO

dropdownButton presents a main button, which, when clicked, reveals a dropdown menu containing a list of items.

XML Element

dropdownButton

Java Class

DropdownButton

Attributes

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

Handlers

AttachEvent - BlurEvent - DetachEvent - FocusEvent

Elements

actionItem - componentItem - separator - textItem

Basics

The main button displays the primary text, or icon (or both) for the component. Users click this button to access the dropdown menu.

The dropdown menu contains a list of actions, each represented by a clickable item.

Each item in the dropdown menu can represent an action. When a user clicks on an action, the corresponding event handler is triggered.

dropdown button basics

Here’s an example of defining a dropdownButton with a text, an icon and a tooltip (using the title attribute) retrieved from the message bundle:

<dropdownButton icon="MAILBOX" text="Contact Us" title="msg://contact">
    <items>
        <textItem id="callItem" text="Call Us"/>
        <textItem id="emailItem" text="E Mail"/>
        <textItem id="whatsAppItem" text="WhatsApp"/>
    </items>
</dropdownButton>

Elements

dropdownButton defined in the XML descriptor can contain nested elements:

actionItem

The actionItem element creates a link between a dropdown menu item and a specific action that should be executed when that item is clicked.

Use the ref attribute to point to the id of a defined 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>

When a user clicks on an actionItem in the dropdown, Jmix automatically triggers the action referenced by the ref attribute. Generate an ActionPerformedEvent handler method for this action. Add the logic to it:

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

componentItem

The componentItem element allows you to define custom inner content for 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>

You can generate a DropdownButtonItem.ClickEvent handler stub for componentItem using Jmix Studio.

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

textItem

The textItem element holds text.

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

You can generate a DropdownButtonItem.ClickEvent handler stub for textItem using Jmix Studio.

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

separator

The separator element is used to visually separate items in the dropdown menu.

icon

The icon element adds a custom icon.

Theme Variants

LIVE DEMO

Use themeNames attribute to set a component theme.

Variant Description Supported By

primary

Applies the primary button style.

Aura, Lumo

success

Applies the success style.

Aura, Lumo

warning

Applies the warning style.

Aura, Lumo

error

Applies the error style.

Aura, Lumo

contrast

Applies the contrast style.

Lumo

large

Makes the button larger.

Aura, Lumo

small

Makes the button smaller.

Aura, Lumo

icon

Applies the icon-button style.

Aura, Lumo

tertiary

Applies a lower-emphasis button style.

Aura, Lumo

tertiary-inline

Applies an inline button style intended for use inside text content.

Lumo

Attributes

Common attributes serve the same purpose for all components. The following attributes are specific to dropdownButton:

Name

Description

Default

dropdownIndicatorVisible

Sets the visibility of the dropdown indicator.

true

openOnHover

If the openOnHover attribute is true, the drop-down list of items is opened automatically when the field is focused using a mouse or touch.

false