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?
hmerk
(Hans-Jörg Merk)
February 3, 2023, 9:25pm
2
Embed the chip into an oh-link component.
Oliver2
(Oliver)
February 3, 2023, 9:47pm
3
Matthias_Kaufmann:
Automaitisierung
maybe the name of the page is page:Automatisierung
JustinG
(JustinG)
February 3, 2023, 10:00pm
4
Matthias_Kaufmann:
- 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"
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
hmerk:
oh-link
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
hmerk
(Hans-Jörg Merk)
February 19, 2023, 5:12pm
6
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