F7-chip with action

Hi together,

I have a custom widget and would like to open a page depend on clicking on a f7-chip.

- component: f7-block
      config:
        style:
          position: absolute
          top: 60px
          left: 16px
          width: 100%
      slots:
        default:
          - component: f7-chip
            config:
              iconF7: wand_stars
              text: Automatik
              style:
                margin-bottom: 10px
                font-size: 16px
                --f7-chip-bg-color: rgba(255, 255, 255, 0
              iconColor: '=items.AutomatisierungGruppenStatus.state == "ON"? "green" : "red"'
              iconSize: 20
              action: navigate
              actionPage: "page:Automaitisierung"

Unfortunately this does not work. Any hint?

Embed the chip into an oh-link component.

maybe the name of the page is page:Automatisierung

Actions are specific only to some of the oh- system of components, they will not work for any f7 components. That is why you need to do as hmerk said and put the f7 component inside an oh component.

1 Like

Hi,

sounds interesting, I played around but got nothing to work. Any hint? The oh-link docu does not contain info about slots, so I am kind of lost how this should work.

Thanks for hints!
Best

This is an example how I use it in one of our widgets


                      - component: oh-link
                        config:
                          action: options
                          actionItem: =loop.fanspeedItem.name
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                text: "=items[loop.fanspeedItem.name].displayState ? items[loop.fanspeedItem.name].displayState : items[loop.fanspeedItem.name].state"
                            - component: oh-icon
                              config:
                                color: gray
                                icon: iconify:material-symbols:mode-fan
                                width: 24px

I was actually close but missed the default - thanks!

1 Like