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.

Theme Variants

LIVE DEMO

The themeNames attribute allows you to assign a specific button style from the set of predefined variants.

  • Importance variants:

    dropdown button importance 
    <dropdownButton text="Primary" themeNames="primary"/>
<dropdownButton text="Secondary"/>
<dropdownButton text="Tertiary" themeNames="tertiary-inline"/>

  • Danger or error variants:

    dropdown button error 
    <dropdownButton text="Primary" themeNames="primary, error"/>
<dropdownButton text="Secondary" themeNames="error"/>
<dropdownButton text="Tertiary" themeNames="tertiary-inline, error"/>

  • Success variants:

    dropdown button success 
    <dropdownButton text="Primary" themeNames="primary, success"/>
<dropdownButton text="Secondary" themeNames="success"/>
<dropdownButton text="Tertiary" themeNames="tertiary-inline, success"/>

  • Contrast variants:

    dropdown button contrast 
    <dropdownButton text="Primary" themeNames="primary, contrast"/>
<dropdownButton text="Secondary" themeNames="contrast"/>
<dropdownButton text="Tertiary" themeNames="tertiary-inline, contrast"/>

  • Size variants:

    dropdown button size 
    <dropdownButton text="Large" themeNames="large"/>
<dropdownButton text="Normal"/>
<dropdownButton text="Small" themeNames="small"/>

The variant theme names are defined in the DropdownButtonVariant class. See also Vaadin Docs for more information about button styles.

Attributes

In Jmix there are many common attributes that serve the same purpose for all components. The following are attributes 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