Four Button List Item

With the great help from a number of members to get the formatting of this correct (thanks @AndyMB, @DrRSatzteil, I have a four button list item widget to share. This can be used as the default list item widget for your items, or inside other widgets. Note when you are adding this to other widgets, the properties can only be changed in Code view. If used as a default list item widget, you get a nice UI for the properties.

Hope someone finds it useful.

Code

uid: HighMedLow
tags: []
props:
  parameters:
    - description: The name to show
      label: Title
      name: thetitle
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - description: Icon name only OH supported
      label: Icon
      name: theicon
      required: false
      type: TEXT
    - description: The Low command value
      label: Low Command
      name: commandlow
      required: false
      type: TEXT
    - description: Low icon f7 only - no f7 prefix
      label: Low Icon
      name: lowicon
      required: false
    - description: The Med command value
      label: Med Command
      name: commandmed
      required: false
      type: TEXT
    - description: Med icon f7 only - no f7 prefix
      label: Med Icon
      name: medicon
      required: false
    - description: The High command value
      label: High Command
      name: commandhigh
      required: false
      type: TEXT
    - description: High icon f7 only - no f7 prefix
      label: Hight Icon
      name: highicon
      required: false
    - description: The off command value
      label: Off Command
      name: commandoff
      required: false
      type: TEXT
    - description: Off icon f7 only - no f7 prefix
      label: Off Icon
      name: officon
      required: false
  parameterGroups: []
timestamp: Feb 12, 2021, 6:06:13 AM
component: oh-list-item
config:
  icon: =props.theicon
  title: =props.thetitle
slots:
  after:
    - component: f7-block
      config:
        style:
          display: inline-flex
          flex-direction: row
          justify-content: flex-end
          padding: 0px
          padding-left: 5px
      slots:
        default:
          - component: oh-button
            config:
              actionItem: =props.item
              action: command
              actionCommand: =props.commandoff
              icon-f7: =props.officon
              iconColor: black
              text: OFF
              size: 25
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-text-color: black
                --f7-button-border-radius: 5px
                --f7-button-pressed-bg-color: red
                --f7-button-fill-hover-bg-color: green
                font-size: 12px
                height: auto
          - component: oh-button
            config:
              actionItem: =props.item
              action: command
              actionCommand: =props.commandlow
              icon-f7: =props.lowicon
              iconColor: yellow
              text: LOW
              size: 25
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-text-color: black
                --f7-button-border-radius: 5px
                --f7-button-pressed-bg-color: red
                --f7-button-fill-hover-bg-color: green
                font-size: 12px
                height: auto
          - component: oh-button
            config:
              actionItem: =props.item
              action: command
              actionCommand: =props.commandmed
              icon-f7: =props.medicon
              iconColor: green
              text: MEDIUM
              size: 25
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-text-color: black
                --f7-button-border-color: black
                --f7-button-border-radius: 5px
                --f7-button-pressed-bg-color: lightgrey
                --f7-button-fill-hover-bg-color: green
                font-size: 12px
                height: auto
          - component: oh-button
            config:
              actionItem: =props.item
              action: command
              actionCommand: =props.commandhigh
              icon-f7: =props.highicon
              iconColor: red
              text: HIGH
              size: 25
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-text-color: black
                --f7-button-border-color: black
                --f7-button-border-radius: 5px
                --f7-button-pressed-bg-color: red
                --f7-button-fill-hover-bg-color: green
                font-size: 12px
                height: auto
11 Likes