Custom Colorpicker v1.0

[Dan (Dan Demento)]

Custom Colorpicker v1.0

This is a simple replacement for the original colorItem which is displayed in lists when you have an Item of type color.

• The original is restricted to one item for both: Colorpicker and Toggle
• This custom widget offers the ability to chose different items for the Colorpicker and the Toggle.

Screenshots

Changelog

Version 1.0

• initial release

Resources

uid: CustomColorpicker
tags:
  - light
  - list
props:
  parameters:
    - description: The Label
      label: Label
      name: label
      required: true
      type: TEXT
    - context: item
      description: The Color Item
      label: Color Item
      name: colorItem
      required: true
      type: TEXT
    - context: item
      description: The Switch Item
      label: Switch Item
      name: switchItem
      required: true
      type: TEXT
    - default: oh:colorpicker
      description: The Icon to Display
      label: Icon
      name: icon
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 26, 2023, 9:40:32 PM
component: oh-list-item
config:
  icon: =props.icon
  title: =props.label
slots:
  after:
    - component: f7-row
      config:
        style:
          align-items: center
          gap: 8px
          margin-right: 8px
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-colorpicker
                  config:
                    item: =props.colorItem
                    modules:
                      - wheel
                    openIn: auto
          - component: f7-col
            slots:
              default:
                - component: oh-toggle
                  config:
                    item: =props.switchItem