comboButton 下拉按钮

comboButton 将操作按钮放置在一个下拉列表中，提供关联的操作。

XML 元素

comboButton

Java 类

ComboButton

基本用法

在线示例

comboButton 的示例：

<actions>
    <action id="save" text="Save" icon="ARCHIVE"/>
</actions>
<layout>
    <comboButton id="saveButton" action="save">
        <items>
            <textItem id="saveDraftItem" text="Save as draft"/>
            <textItem id="saveCopyItem" text="Save as copy"/>
            <textItem id="savePublishItem" text="Save and publish"/>
        </items>
    </comboButton>
</layout>

样式版本

使用 themeNames 属性配置一个或多个样式。

样式 描述 支持的主题

primary

主要按钮样式

Aura, Lumo

tertiary

低优先级的按钮样式

Aura, Lumo

tertiary-inline

适用于文本内容内部使用的内联按钮样式

Lumo

icon

使用图标按钮样式

Lumo

small

按钮较小

Aura, Lumo

large

按钮较大

Aura, Lumo

success

成功样式

Aura, Lumo

warning

警告样式

Aura, Lumo

error

错误样式

Aura, Lumo

contrast

对比样式

Lumo

XML 属性

下面是 comboButton 的特殊属性：

名称 描述 默认值

action

关联组件的操作。

—

dropdownIcon

设置 comboButton 的下拉图标。

VaadinIcon.CHEVRON_DOWN

icon

设置图标

—

openOnHover

当鼠标悬浮在组件上时，是否打开操作列表。

—

下面是 comboButton 支持的其他通用属性：

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

事件和处理器

下面是 comboButton 的特殊事件和处理器：

名称 描述

clickListener

处理组件的点击事件。

doubleClickListener

处理组件的双击事件。

singleClickListener

处理组件的单击事件。

下面是 comboButton 支持的其他通用事件：

AttachEvent - BlurEvent - DetachEvent - FocusEvent

XML 内部元素

一个 comboButton 可以包含 actionItem、componentItem, dropdownIcon、icon、separator 和 textItem 作为内部元素。