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 元素用来分隔下拉列表中的菜单项。

样式版本

在线示例

使用 themeNames 属性可以设置预定义的不同按钮样式。

  • 重要：

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

  • 危险或错误：

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

  • 成功：

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

  • 高对比：

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

  • 不同尺寸：

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

样式版本的主题名在 DropdownButtonVariant 类中定义。参阅 Vaadin 文档 了解更多关于按钮样式的设定。

XML 属性

在 Jmix 中，所有组件都有一些作用一致的 通用属性。 下面是 dropdownButton 的特殊属性：

名称

描述

默认值

dropdownIndicatorVisible

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

true

openOnHover

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

false