comboButton 下拉按钮

在线示例

comboButton 是带有下拉列表的按钮，可以提供一组不同的 操作。

该组件与 dropdownButton 很类似。

主要区别是该组件按钮本身也可以添加操作。

XML 元素

comboButton

Java 类

ComboButton

XML 属性

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

事件和处理器

AttachEvent - BlurEvent - clickListener - doubleClickListener - singleClickListener - DetachEvent - FocusEvent

XML 内部元素

actionItem - componentItem - dropdownIcon - icon - separator - textItem

基本用法

comboButton 的示例：

<actions>
    <action id="contact" text="Contact Us"/>
</actions>
<layout>
    <comboButton id="saveButton" action="contact">
        <items>
            <textItem id="callItem" text="Call Us"/>
            <textItem id="emailItem" text="E Mail"/>
            <textItem id="whatsAppItem" text="WhatsApp"/>
        </items>
    </comboButton>
</layout>
combo button basics

样式版本

使用 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 的特殊属性：

名称

描述

默认值

dropdownIcon

设置 comboButton 的下拉图标。

VaadinIcon.CHEVRON_DOWN