3.5.2.1.32. 弹窗按钮
在线示例
API 文档

这是一个带弹窗的按钮。弹窗中可以包含操作列表或自定义内容。

PopupButton

该组件的 XML 名称： popupButton

PopupButton 可以使用caption属性指定按钮名称，使用icon属性指定按钮图标。使用description属性定义提示文字。下图显示了不同类型的按钮：

gui popupButtonTypes

popupButton 的元素：

  • actions - 指定下拉列表内的操作。

    操作的属性中只有 caption 、 enable 、 visible 能起作用。description 和 shortcut 属性会被忽略。icon 属性的处理取方式决于应用程序属性 cuba.gui.showIconsForPopupMenuActions 和组件的 showActionIcons 属性。后者优先。

    下面是一个按钮示例，其中包含一个具有两个操作的下拉列表：

    <popupButton id="popupButton" caption="msg://popupButton" description="Press me">
    <actions>
        <action id="popupAction1" caption="msg://action1"/>
        <action id="popupAction2" caption="msg://action2"/>
    </actions>
</popupButton>

    可以定义新的操作，也可以使用当前界面中元素已定义的操作，例如：

    <popupButton id="popupButton">
    <actions>
        <action id="ordersTable.create"/>
        <action id="ordersTable.edit"/>
        <action id="ordersTable.remove"/>
    </actions>
</popupButton>

  • popup - 为弹窗设置自定义的内容。如果设置了自定义弹出内容，则会忽略操作。

    下面是自定义弹出布局的示例：

    <popupButton id="popupButton"
             caption="Settings"
             align="MIDDLE_CENTER"
             icon="font-icon:GEARS"
             closePopupOnOutsideClick="true"
             popupOpenDirection="BOTTOM_CENTER">
    <popup>
        <vbox width="250px"
              height="AUTO"
              spacing="true"
              margin="true">
            <label value="Settings"
                   align="MIDDLE_CENTER"
                   stylename="h2"/>
            <progressBar caption="Progress"
                         width="100%"/>
            <textField caption="New title"
                       width="100%"/>
            <lookupField caption="Status"
                         optionsEnum="com.haulmont.cuba.core.global.SendingStatus"
                         width="100%"/>
            <hbox spacing="true">
                <button caption="Save" icon="SAVE"/>
                <button caption="Reset" icon="REMOVE"/>
            </hbox>
        </vbox>
    </popup>
</popupButton>
    gui popupButton custom

popupButton 的属性:

  • autoClose - 定义是否应在操作触发后自动关闭弹窗。

  • closePopupOnOutsideClick - 如果设置为 true，则单击弹窗外部时将其关闭。这不会影响单击按钮本身的行为。

  • menuWidth - 设置弹窗宽度。

  • popupOpenDirection - 设置弹窗的打开方向。可能的取值：

    • BOTTOM_LEFT,

    • BOTTOM_RIGHT,

    • BOTTOM_CENTER.

  • showActionIcons - 显示操作按钮的图标。

  • togglePopupVisibilityOnClick - 定义在弹窗上连续点击是否切换弹窗可见性。

PopupButton 接口的方法：

  • addPopupVisibilityListener() - 添加一个监听器来拦截组件的可见性更改事件。

    popupButton.addPopupVisibilityListener(popupVisibilityEvent ->
        notifications.create()
                .withCaption("Popup visibility changed")
                .show());

    也可以通过订阅相应事件来跟踪 PopupButton 的可见性状态更改。

    @Subscribe("popupButton")
protected void onPopupButtonPopupVisibility(PopupButton.PopupVisibilityEvent event) {
    notifications.create()
            .withCaption("Popup visibility changed")
            .show();
}

PopupButton 的展示可以使用带 $cuba-popupbutton-* 前缀的 SCSS 变量进行自定义。可以在创建一个 主题扩展 或者一个 自定义主题 之后在可视化编辑器里修改这些变量的值。

popupButton 的属性

align - autoClose - caption - captionAsHtml - closePopupOnOutsideClick - css - description - descriptionAsHtml - enable - box.expandRatio - htmlSanitizerEnabled - icon - id - menuWidth - popupOpenDirection - showActionIcons - stylename - tabIndex - togglePopupVisibilityOnClick - visible - width

popupButton 的元素

actions - popup

API

addPopupVisibilityListener