Widget with only title and dynamic icon

Setup, Configuration and Use Widgets
1

I would like to have something similar to this:

config:
  icon: hp
  label: Bewoners thuis?
  order: "9"
  sidebar: true
  stylesheet: |
    .horz-toggle.large-vertical-toggle { transform: scale(2); rotate(0deg); }
  visibleTo:
    - role:administrator
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        icon: oh:presence
                        iconUseState: true
                        item: cln_thuis_owntracks
                        title: CLN
masonry: []
grid: []
canvas: []

But unfortunately, that code looks like this:

image
image1564×232 5.6 KB

I would like to only show the dynamic icon, and not the state string. Something like an oh-toggle-card, but with the icon where the toggle switch is.

Thanks for anyone’s magic!

I tried this:

config:
  icon: hp
  label: Bewoners thuis?
  order: "9"
  sidebar: true
  stylesheet: |
    .horz-toggle.large-vertical-toggle { transform: scale(2); rotate(0deg); }
  visibleTo:
    - role:administrator
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-card
                      config:
                        title: CLN
                      slots:
                        content:
                          - component: oh-icon
                            config:
                              icon: oh:presence
                              iconUseState: true
                              item: cln_thuis_owntracks
masonry: []
grid: []
canvas: []

But then the icon is ridiculously large (what is the normal width and height of widget icons?), but most importantly: not dynamic.

2

iconUseState is not a property of an oh-icon

You can see that in this case you want to use the state property, and you need to supply it with the state itself, not just the item name.

state: =items.cln_thuis_owntracks.state

There’s no normal value in this case as it varies across many different components and whether its a mobile view or not. On a desktop, the toggle in a toggle card is double the size of the standard toggle for your display (and rotated into a vertical orientation). So if you like the size of the toggle then you can set the size of the icon from the f7 css variable:

- component: oh-icon
  config:
    icon: oh:presence
    style:
      width: calc(2 * var(--f7-toggle-width))