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