Widget with popup from the same widget

Tutorials & Examples
1

For my Sun2000 widget I have worked on the topic of popups and popovers. This allows me to call up additional information without leaving the page.

2024-03-19 10.15.14 192.168.1.95 cda7852f5926

Here is a simplified listing that shows how it works

uid: ud_popup_widget_text
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 20, 2024, 10:16:53 PM
component: f7-card
config:
  style:
    border: 3px solid green
    border-radius: 20px
    text-align: center
    width: 200px
  title: Klick text in box to test
slots:
  default:
    - component: oh-link
      config:
        action: popover
        popoverOpen: ="#infopopup"
        style:
          font-size: 22px
        text: Klick here
    - component: f7-popover
      config:
        id: infopopup
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          color: blue
          height: auto
          width: 250px
      slots:
        default:
          - component: oh-list
            config:
              simpleList: false
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: You did it ;-)
                - component: oh-list-item
                  config:
                    title: Bravo!

The listing consists of two parts

  • the first half generates a clickable text
  • the second half generates the popup

The two halves are linked via the class identifier infopopup

I have omitted all parameters in the listing so that it can be tested directly in the development window.

An icon can also be made clickable, but the problem here is that the oh-link only allows f7-icons. But oh-link has a slot through which you can integrate other elements, such as an oh-icon.

2024-03-19 10.15.48 192.168.1.95 470707432956

Here is the listing

uid: ud_popup_widget_icon
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 20, 2024, 10:45:43 PM
component: f7-card
config:
  style:
    border: 3px solid green
    border-radius: 20px
    text-align: center
    width: 200px
  title: Klick icon in box to test
slots:
  default:
    - component: oh-link
      config:
        action: popover
        popoverOpen: ="#infopopup"
      slots:
        default:
          - component: oh-icon
            config:
              height: 70px
              icon: if:game-icons:push
    - component: f7-popover
      config:
        id: infopopup
        closeByBackdropClick: true
        closeByOutsideClick: true
        closeOnEscape: true
        style:
          color: blue
          height: auto
          width: 250px
      slots:
        default:
          - component: oh-list
            config:
              simpleList: false
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: You did it ;-)
                - component: oh-list-item
                  config:
                    title: Bravo!
2 Likes
2

I have updated the listings a bit today.
It seems more logical to me to link the parts via id and not via class

      popoverOpen: ="#infopopup"

instead of

      popoverOpen: .infopopup