dropdownButton 列表按钮

在线示例

dropdownButton 显示为一个按钮，当点击时会显示一个带列表的下拉菜单。

XML 元素

dropdownButton

Java 类

DropdownButton

XML 属性

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

事件和处理器

AttachEvent - BlurEvent - DetachEvent - FocusEvent

XML 内部元素

actionItem - componentItem - separator - textItem

基本用法

主按钮显示组件中主要的 文本 或/和 图标。用户点击按钮打开下拉菜单。

下拉菜单中包含一组可点击的菜单项，每项对于一个操作。

当用户点击操作时，会触发对应的事件方法。

dropdown button basics

下面的示例定义了一个带文字、图标以及从 消息包 获取提示（使用 title 属性）的 dropdownButton：

<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>

XML 内部元素

XML 中定义 dropdownButton 支持一些内部元素：

actionItem

actionItem 个元素可以将下拉菜单项与特定 操作 进行关联，点击菜单项时执行该操作。

使用 ref 属性指定 action 的 id。

<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 会自动触发 ref 属性引用的 action。为操作生成 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 事件生成处理器桩代码。

@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 可以为 textItem 的 DropdownButtonItem.ClickEvent 事件生成处理器桩代码。

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

separator

separator 元素用来分隔下拉列表中的菜单项。

icon

icon 元素支持添加 自定义图标。

样式版本

在线示例

使用 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

XML 属性

通用属性 对所有组件都是一样的配置。 下面是 dropdownButton 的特殊属性：

名称

描述

默认值

dropdownIndicatorVisible

设置下拉提示符的可见性。

true

openOnHover

如果 openOnHover 属性设置为 true，则当光标悬停或触屏点击时自动显示选项列表。

false