Remove line from oh-list with oh-repeater

Hey there,

i built this widget:

uid: list_items
tags: []
props:
  parameters:
    - description: TAGS als Basis für die Liste
      label: Tags zur automatischen Darstellung - Komma getrennt ohne Leerzeichen
      name: tag
      required: false
      type: TEXT
    - description: icon z.b. oh:fenster
      name: iconimage
      required: false
      type: TEXT
    - description: Titel
      name: titel
      required: false
      type: TEXT
    - description: bgcolor
      name: bgcolor
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 7, 2022, 12:13:03 PM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 120px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
#  title: =props.titel
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          left: 16px
          position: absolute
          top: -5px
      slots:
        default:
          - component: f7-icon
            config:
              f7: square_fill
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.titel ? props.titel : ''"



  default:
    - component: oh-list
      slots:
        default:
          - component: oh-repeater
            config:
              for: item
              sourceType: itemsWithTags
              itemTags: =props.tag
              fragment: true
            slots:
              default:
                - component: oh-list-item
                  config:
#                    icon: f7:multiply_square
#                    iconColor: '=(items[loop.item.name].state == "CLOSED") ? "red" : "red"'
                    color: '=(items[loop.item.name].state == "CLOSED") ? "red" : "red"'
                    title: =loop.item.label
                    item: =loop.item.name
                    badge: '=(items[props.sensor_item].state == "OPEN") ? "open" : "closed"'
                    badge-color: '=(items[props.sensor_item].state == "OPEN") ? "open" : "closed"'

This leads to:

What do i have to do to remove the “line” between the two list-items?

I hope you experts could help me.

Cheers, Nic!

You can remove all the lines between list items by setting a parameter in the list itself:

- component: oh-list
  config:
    noHairlinesBetween: true
  slots:
    default:
      - component: oh-list-item
        config:
          title: Title 1
      - component: oh-list-item
        config:
          title: Title 2

image

1 Like

Thank you!

Is there somewhere a kind of list which parameters could be used?

The first place to look is always in the editor itself. With the cursor on a line under the config heading for a component you can just press ctrl + space and you will get a context menu with all the options for that component. Many of those have tooltips that give you hints to their use as well as badges to indicate what type of value to use (e.g., B for boolean, S for string etc.).

image

If you need more information beyond that, nearly all of the OH components are just built from the corresponding f7 component, so if you can check the f7-docs for the built-in options or the Component Reference help page for the OH specific parameters that have been added.