Center f7 icon in oh label card

Add-ons UIs
1

I’m having real troubles understanding the whole YAML language.

Now, i have a label card in the overview page that opens a popup to a keypad to enable/disable the alarm.

- component: oh-label-card
                  config:
                    action: popup
                    actionModal: page:page_ef81f3e858
                    icon: f7:lock_shield
                    iconSize: 100
                    padding: 10px
                    iconColor: "= (items.Alarm_State.state === 'OFF') ? 'green' :
                      (items.Alarm_State.state === 'ARMING') ? 'blue' :
                      (items.Alarm_State.state === 'HOME') ? 'orange' :
                      (items.Alarm_State.state === 'AWAY') ? 'red' :
                      (items.Alarm_State.state === 'TRIGGERED') ?  'purple' :
                      'grey'"

Schermata 2023-10-29 alle 20.58.44

This is the result. It works, changes color according to status, but i’m really struggling to center the icon (and remove the -, that right now i’m doing assigning ’ label:" " ’ )
Can anyone point me in the right direction?

2

Solved by adding vertical: true to the config.

I know there’s better ways to do it, I really have to study YAML

3

The oh components already have quite a bit of styling applied to them, because they are intended to be very low code for users. As a consequence, as soon as you are trying to build something with a lot of your own styling, the oh components can be more difficult to deal with than the base f7 components they are built from. See the docs description here:

I would suggest using the basic f7-card as your base component and adding an oh-link to it to get the popup action that you are looking for. Then you can easily add styles to the card and link that get you the effect that you want. Something like this:

component: f7-card
config:
  style:
    display: flex
    justify-content: center
    padding: 10px
slots:
  default:
    - component: oh-link
      config:
        style:
          width: 100%
        action: popup
...rest of your config
4

Thanks for the advice, I missed the part where it said the oh cards were pre-formatted and I was trying to add styles to them.
This changes everything and now I can finally start building something.
Again, thanks for the advice, I really appreciate it. I’ll start fixing it when I get home.