dropdownButton 列表按钮

dropdownButton 显示一个主按钮，当点击主按钮时，显示一个下拉菜单。

XML 元素

dropdownButton

Java 类

DropdownButton

基本用法

在线示例

主按钮显示组件的主要 标签 和 图标。用户点击此按钮以访问下拉菜单。

下拉菜单包含一个操作列表，每个操作由一个可点击的条目表示。

下拉菜单中的每一项都可以表示一个操作。当用户点击某个操作时，会触发相应的事件处理器。

以下示例定义了一个 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

XML 属性

下面是 dropdownButton 的特殊属性：

名称 描述 默认值

dropdownIndicatorVisible

设置下拉菜单指示器的可见性。

true

icon

设置图标。

—

openOnHover

如果为 true，则当鼠标移到控件时自动打开下拉列表。

false

下面是 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

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 元素添加一个 自定义图标。