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 属性。后者优先。

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

    1. <popupButton id="popupButton" caption="msg://popupButton" description="Press me">
    2.     <actions>
    3.         <action id="popupAction1" caption="msg://action1"/>
    4.         <action id="popupAction2" caption="msg://action2"/>
    5.     </actions>
    6. </popupButton>

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

    1. <popupButton id="popupButton">
    2.     <actions>
    3.         <action id="ordersTable.create"/>
    4.         <action id="ordersTable.edit"/>
    5.         <action id="ordersTable.remove"/>
    6.     </actions>
    7. </popupButton>

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

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

    1. <popupButton id="popupButton"
    2.              caption="Settings"
    3.              align="MIDDLE_CENTER"
    4.              icon="font-icon:GEARS"
    5.              closePopupOnOutsideClick="true"
    6.              popupOpenDirection="BOTTOM_CENTER">
    7.     <popup>
    8.         <vbox width="250px"
    9.               height="AUTO"
    10.               spacing="true"
    11.               margin="true">
    12.             <label value="Settings"
    13.                    align="MIDDLE_CENTER"
    14.                    stylename="h2"/>
    15.             <progressBar caption="Progress"
    16.                          width="100%"/>
    17.             <textField caption="New title"
    18.                        width="100%"/>
    19.             <lookupField caption="Status"
    20.                          optionsEnum="com.haulmont.cuba.core.global.SendingStatus"
    21.                          width="100%"/>
    22.             <hbox spacing="true">
    23.                 <button caption="Save" icon="SAVE"/>
    24.                 <button caption="Reset" icon="REMOVE"/>
    25.             </hbox>
    26.         </vbox>
    27.     </popup>
    28. </popupButton>

    gui popupButton custom

popupButton 的属性:

  • autoClose - 定义是否应在操作触发后自动关闭弹窗。
  • closePopupOnOutsideClick - 如果设置为 true，则单击弹窗外部时将其关闭。这不会影响单击按钮本身的行为。
  • menuWidth - 设置弹窗宽度。

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

    • BOTTOM_LEFT,

    • BOTTOM_RIGHT,

    • BOTTOM_CENTER.

  • showActionIcons - 显示操作按钮的图标。
  • togglePopupVisibilityOnClick - 定义在弹窗上连续点击是否切换弹窗可见性。

PopupButton 接口的方法：

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

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

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

    1. @Subscribe("popupButton")
    2. protected void onPopupButtonPopupVisibility(PopupButton.PopupVisibilityEvent event) {
    3.     notifications.create()
    4.             .withCaption("Popup visibility changed")
    5.             .show();
    6. }

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

popupButton 的属性

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

popupButton 的元素

actions - popup

API

addPopupVisibilityListener