button 按钮

button 组件支持用户出发一个操作。

XML 元素

button

Java 类

JmixButton

基本用法

在线示例

一个按钮可以显示文字、图标或两者都显示。使用 title 属性配置一个提示文本。

<button id="helloButton"
        text="Say hello!"
        title="Click me!"/>
<button id="saveButton1"
        text="Save"
        icon="ARCHIVE"/>
<button id="saveButton2"
        title="Save"
        icon="ARCHIVE"/>

使用声明式操作

在线示例

使用按钮的 action 属性关联一个已有的 操作。按钮自动显示操作的名称、图标、启用/禁用状态，并且在点击时直接调用操作。

对于关联视图中的操作，直接设置 action 为操作的 ID。如需关联其他组件定义的操作，使用 <componentId>.<actionId> 格式。

<actions>
    <action id="someAction"
            text="Click me!"/>
</actions>
<layout>
    <button action="someAction"/>
</layout>

使用编程式操作

在线示例

在 Java 中，可以创建操作并通过 setAction() 为按钮设置操作。通过操作定义按钮的文字以及点击时需要执行的操作。

XML
<button id="buttonAction"/>
Java
@ViewComponent
protected JmixButton buttonAction;

@Autowired
protected Notifications notifications;

@Subscribe
protected void onInit(InitEvent event) {
    buttonAction.setAction(
            new BaseAction("action")
                    .withText("Click me!")
                    .withHandler(actionPerformedEvent -> notifications.show("Action performed"))
    );
}

使用图片

在线示例

按钮的图标可以是一个组件，例如 image。下面的示例中，加载了一个图片并通过 setIcon() 方法为按钮设置。

XML
<button id="logoButton" themeNames="icon"/>
Java
private static final String LOGO_SRC_PATH = "/META-INF/resources/icons/jmix-logo.png";
@ViewComponent
private JmixButton logoButton;
@Subscribe
public void onInit(InitEvent event) {
    Image logo = new Image(DownloadHandler.forClassResource(getClass(), LOGO_SRC_PATH), "jmix-logo");
    logo.setWidth("100px");
    logoButton.setIcon(logo);
}

样式版本

在线示例

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

The following attributes are specific to button:

名称 描述 默认值

action

设置按钮关联的视图和组件操作。参见 声明式操作。

—

disableOnClick

按钮在点击之后就自动禁用，主要用来防止（意外的）多次点击。之后可以通过调用 setEnabled(true) 把按钮恢复成可点击状态。

false

icon

设置按钮的图标。

—

iconAfterText

将图标放在按钮文本之后。

false

whiteSpace

控制按钮文本中的空格和换行如何处理。

NORMAL

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

id - alignSelf - ariaLabel - ariaLabelledBy - autofocus - classNames - css - enabled - focusShortcut - height - maxHeight - maxWidth - minHeight - minWidth - tabIndex - text - themeNames - title - visible - width

事件和处理器

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

名称 描述

clickListener

当用户点击按钮时发送。用 addClickListener() 方法可以编程式添加处理方法。

doubleClickListener

当用户在短时间点击按钮两次时发送。

singleClickListener

当用户单击后，距离下一次点击的时间超出双击的判断时，发送单击事件。

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

AttachEvent - BlurEvent - DetachEvent - FocusEvent

XML 内部元素

A button can include icon, prefix and suffix, and tooltip components as its nested elements.

参考