OH list widgets expressed as f7-list-items

Add-ons UIs
,
1

Can someone show me what the yaml equivalent of an oh-slider-item as a f7-list-item? I think that would go a long way to help me understand how things are put together. I’ve been struggling trying to make a 2 row list item for dimmer switches with a toggle and slider row. Basically I just want the “item-after” div to be a toggle button instead of the current percentage. More often than not I want a dimmer to mostly function as a toggle.

I thought something like this should work:

uid: dimmer_list_v1
tags: []
props:
  parameterGroups: []
component: f7-list-item
config:
slots:
  media:
    - component: f7-icon
      config:
        f7: lightbulb
  title:
    - component: Label
      config:
        text: Light        
  after:
    - component: oh-toggle
      config:
  footer:
    - component: oh-slider
      config:

Based on the f7 documentation at https://framework7.io/vue/list-item.html

But that is turning out like:
image

Everything seems to get put in the correct place if the slots are defined in the config section instead of slots, but as far as I know I can’t put components in the config section.

2 Likes