Center oh-icon in simple status widget

Add-ons UIs
1

This is what i have.

image

and i want to center oh-icon and label on card.

Widget

uid: Simple_Status
tags: []
props:
  parameters:
    - description: Title of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Name of the Icon 
      label: Icon
      name: icon
      required: true
      type: TEXT
    - description: Color for icon active 
      label: Color
      name: color
      required: true
      type: TEXT
    - context: item
      description: Main item 
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 3, 2022, 4:44:01 PM
component: f7-card
config:
  title: =(props.title)
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    overflow: hidden
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-col
            config:
            class:
              - display-flex
              - flex-direction-column
              - align-items-center
              - justify-content-space-evenly
            slots:
             default:
          - component: oh-icon
            config:
              icon: =props.icon
              width: 50%
              height: 50%
              color: '=items[props.item].state == "ON" ? props.color : "gray"'
          - component: Label
            config:
              text: =items[props.item].state
            style:
              text-align: center;
2

If your copy-paste is true to what’s in the widget editor, then it looks like it’s primarily an issue of yaml formatting.

  1. In f7-col: class is not indented under config.
  2. In f7-col: default is only one space, not two under slots
  3. In f7-col: The icon component is not indented under default.
  4. In Label: style is not indented under config

YAML is finicky about these things, indentations are actually part of the syntax not just a visual convenience.

2 Likes
3

Thank you @JustinG that was the problem.

image

uid: State_Widget
tags: []
props:
  parameters:
    - description: Title of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Name of the Icon 
      label: Icon
      name: icon
      required: true
      type: TEXT
    - description: Color for icon active 
      label: Color
      name: color
      required: true
      type: TEXT
    - context: item
      description: Main item 
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 3, 2022, 4:44:01 PM
component: f7-card
config:
  title: =(props.title)
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    overflow: hidden
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-col
            config:
              class:
                - display-flex
                - flex-direction-column
                - align-items-center
                - justify-content-space-evenly
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: =props.icon
                    width: 30%
                    height: 30%
                    color: '=items[props.item].state == "ON" ? props.color : "gray"'
                - component: Label
                  config:
                    text: =items[props.item].state
                    style:
                      text-align: center;
4

Also worth noting are the new operators you can use in expressions:

                - component: oh-icon
                  config:
                    icon: =props.icon
                    width: 30%
                    height: 30%
                    color: '=@@props.item == "ON" ? props.color : "gray"'
                - component: Label
                  config:
                    text: =@props.item
                    style:
                      text-align: center
  • @props.item retrieves the display state of the item given its name, or falls back to the raw state if isn’t defined - it’s (almost) equivalent to:
    items[props.item].displayState || items[props.item].state
  • @@props.item always retrieves the raw state of the item given its name - it’s equivalent to: items[props.item].state
1 Like