Open a popup with an oh-icon action

Add-ons UIs
1

If I try to call a popup with an oh-button it works fine, if I try to do the same with oh-icon it fails. According to the documentation this should be possible.

uid: widget_91e7d31629
tags: []
props:
  parameters:
  parameterGroups: []
timestamp: Dec 15, 2022, 2:44:57 PM
component: f7-card
config:
slots:
  default:
  - component: oh-icon
    config:
      action: popup
      popupOpen: .openPopup
      icon: iconify:ph:sun
      style:
        height: 90px
        width: 90px
  - component: f7-popup
    config:
      class:
        - openPopup
      closeByBackdropClick: true
      closeByOutsideClick: true
      closeOnEscape: true
    slots:
      default:
        - component: oh-button
          config:
            action: popup
            popupClose: .openPopup
            style:
              --f7-button-bg-color: transparent
              --f7-button-hover-bg-color: transparent
              --f7-button-pressed-bg-color: transparent
              height: 100%
              width: 100%
              position: absolute
              left: 0px
              top: 0px
2

You are conflating two very different mechanisms for opening a popup. oh-icon according to the docs does support the OH specific actions which you enable by setting the action property and the appropriate sub-properties (in this case actionModal). oh-icon does not support the f7 method of opening a popup using the f7 popupOpen etc. properties. This might help explain it a little.

What you have done is only define the action property for the oh components, and this does not result in OH opening any popup because you have not also defined the actionModal property. Even if you had, this method would not open the popup you have created in the widget using the f7-popup component, the OH actions are only for using other custom widgets and pages as popups.

The f7 popupOpen works all by itself as long as you have provided it with a viable identifier to use. But, it is not available in all components because in the f7 library it is only defined for certain base components. Button happens to be one of them, so the oh-button, which is defined using the f7-button can use popupOpen, but oh-icon cannot.

If you want to open a popup by just clicking on an icon that does have the popupOpen property, use an oh-link instead of an oh-icon.

3

It works fine with an oh-link, thx