Hi,
Is it possible to show an openhab classic icon in an oh-link component?
i can only show f7 or material, but not a openhab icon.
uid: widget_18f03823b0
props:
parameterGroups: []
tags: []
component: f7-block
config:
slots:
default:
- component: oh-link
config:
icon: oh:light
iconBadge: 5
iconSize: 33
- component: oh-link
config:
iconF7: lightbulb
iconBadge: 6
iconSize: 33
The icon property for the oh-link, confusingly, isn’t intended for setting an icon. Like most of the oh components, the oh-link is built on the equivalent f7 component. The confusion here comes from the fact that the f7 link has its own icon property (for applying custom css classes to the f7 icons, if you desire), so this is not the same as many of the other icon properties in various other oh components.
The first part of the solution here is simple: just use an oh-icon instead of an oh-link. The icon has all the same oh specific actions available to it and you can set oh, f7, and iconify icons inside it.
If you want to have the badge on the icon it gets a little trickier just because the badges are not built into the oh-icon components. But you can replicate the badges yourself. It would look something like this:
- component: oh-icon
config:
icon: light
height: 33px
- component: f7-badge
config:
style:
--f7-badge-size: 15px
font-size: var(--f7-badge-in-icon-font-size)
margin-left: -10px
position: absolute
slots:
default:
- component: Content
config:
text: 6
Thx Justin, now it is working with the following code:
- component: oh-icon
config:
icon: light
height: 33px
- component: f7-badge
config:
style:
--f7-badge-size: 16px
font-size: var(--f7-badge-in-icon-font-size)
margin-left: -8px
position: absolute
bgColor: '=(items.AnzahlLichterEin.state) > 0 ? (items.AnzahlLichterEin.state) > 10 ? "red" : "orange" : "gray"'
slots:
default:
- component: Label
config:
text: =(items.AnzahlLichterEin.state)
And the whole widget looks like this:
uid: InfoColumnsIcons
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Feb 22, 2023, 10:12:11 AM
component: oh-list-card
config: {}
slots:
default:
- component: f7-row
config:
class: display-flex justify-content-space-around align-items-stretch
slots:
default:
- component: f7-block
config:
style:
margin-bottom: 0px
margin-top: 4px !important
slots:
default:
- component: oh-icon
config:
icon: light
height: 33px
action: popup
actionModal: widget:InfoClickable
actionModalConfig:
compareState: OFF
componentType: toggle
defaultIcon: oh:light-off
groupItem: AnzahlLichterEin
maxIcon: oh:light-on
refreshItem: AnzahlLichterEin
- component: f7-badge
config:
style:
--f7-badge-size: 16px
font-size: var(--f7-badge-in-icon-font-size)
margin-left: -8px
position: absolute
bgColor: '=(items.AnzahlLichterEin.state) > 0 ? (items.AnzahlLichterEin.state) > 10 ? "red" : "orange" : "gray"'
slots:
default:
- component: Label
config:
text: =(items.AnzahlLichterEin.state)
- component: f7-block
config:
style:
margin-bottom: 0px
margin-top: 4px !important
slots:
default:
- component: oh-icon
config:
icon: battery-800
height: 33px
action: popup
actionModal: widget:InfoClickable
actionModalConfig:
compareState: OFF
componentType: toggle
defaultIcon: oh:battery-90
groupItem: AnzahlBatterienLeer
maxIcon: oh:battery-10
refreshItem: AnzahlBatterienLeer
- component: f7-badge
config:
style:
--f7-badge-size: 16px
font-size: var(--f7-badge-in-icon-font-size)
margin-left: -8px
position: absolute
bgColor: '=(items.AnzahlBatterienLeer.state) > 0 ? (items.AnzahlBatterienLeer.state) > 10 ? "red" : "orange" : "gray"'
slots:
default:
- component: Label
config:
text: =(items.AnzahlBatterienLeer.state)
- component: f7-block
config:
style:
margin-bottom: 0px
margin-top: 4px !important
slots:
default:
- component: oh-icon
config:
icon: window-open
height: 33px
action: popup
actionModal: widget:InfoClickable
actionModalConfig:
compareState: OFF
componentType: toggle
defaultIcon: oh:window-open
groupItem: AnzahlFensterOffen
maxIcon: oh:window-closed
refreshItem: AnzahlFensterOffen
- component: f7-badge
config:
style:
--f7-badge-size: 16px
font-size: var(--f7-badge-in-icon-font-size)
margin-left: -8px
position: absolute
bgColor: '=(items.AnzahlFensterOffen.state) > 0 ? (items.AnzahlFensterOffen.state) > 10 ? "red" : "orange" : "gray"'
slots:
default:
- component: Label
config:
text: =(items.AnzahlFensterOffen.state)
- component: f7-block
config:
style:
margin-bottom: 0px
margin-top: 4px !important
slots:
default:
- component: oh-icon
config:
icon: door-open
height: 33px
action: popup
actionModal: widget:InfoClickable
actionModalConfig:
compareState: OFF
componentType: toggle
defaultIcon: oh:door-open
groupItem: TuerenAnzahlOffen
maxIcon: oh:door-closed
refreshItem: TuerenAnzahlOffen
- component: f7-badge
config:
style:
--f7-badge-size: 16px
font-size: var(--f7-badge-in-icon-font-size)
margin-left: -8px
position: absolute
bgColor: '=(items.TuerenAnzahlOffen.state) > 0 ? (items.TuerenAnzahlOffen.state) > 10 ? "red" : "orange" : "gray"'
slots:
default:
- component: Label
config:
text: =(items.TuerenAnzahlOffen.state)
- component: f7-block
config:
style:
margin-bottom: 0px
margin-top: 4px !important
slots:
default:
- component: oh-icon
config:
icon: poweroutlet
height: 33px
action: popup
actionModal: widget:InfoClickable
actionModalConfig:
compareState: OFF
componentType: toggle
defaultIcon: oh:poweroutlet
groupItem: AnzahlSteckdosenEin
maxIcon: oh:poweroutlet
refreshItem: AnzahlSteckdosenEin
- component: f7-badge
config:
style:
--f7-badge-size: 16px
font-size: var(--f7-badge-in-icon-font-size)
margin-left: -8px
position: absolute
bgColor: '=(items.AnzahlSteckdosenEin.state) > 0 ? (items.AnzahlSteckdosenEin.state) > 10 ? "red" : "orange" : "gray"'
slots:
default:
- component: Label
config:
text: =(items.AnzahlSteckdosenEin.state)