OH3 Widget f7-segmented - "Zeilenumbruch" nach X Elementen

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Antworten
BISspäter
Beiträge: 1
Registriert: 27. Mär 2022 17:28

OH3 Widget f7-segmented - "Zeilenumbruch" nach X Elementen

Beitrag von BISspäter »

Hallo,

Ich betreibe openHAB auf einem Raspberry mit einem 7" Touchscreen (800 x 480 px), das an der Wand hängt...

Auf der overview-Page lasse ich die für mich wichtigsten Dinge anzeigen und schalten.
Da sich in meinem Wohnzimmer immer mehr schaltbare Objekte sammeln, die ich in meiner kleinen Übersicht anzeigen lasse, würde ich gern mein Widget für die Raumübersicht so anpassen, das nach 5 Buttons ein Zeilenumbruch eingefügt wird, damit die Buttons / Icons nicht zu klein werden.

Mein Problem dabei ist, die Buttons werden aus verschiedenen oh-repeater generiert und befinden sich in einem f7-segmented.

Hätte jemand wenigstens einen kleinen Lösungsansatz, wie ich dies realisieren kann?

Anbei ein Screenshot und Code.

Vielen Dank
Screen.png

Code: Alles auswählen

component: f7-card
config:
  style:
    margin-left: 0px
    margin-right: 0px
    padding-left: 0px
    padding-right: 0px
    width: 215px
slots:
  default:
    - component: f7-card-content
      config:
        style:
          padding: 5px
          padding-top: 0px
      slots:
        default:
          ...
          - component: f7-segmented
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: repeat
                    fragment: true
                    in: =props.dimmerItem
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionItem: =loop.repeat + '_2_LEVEL'
                          class:
                            - card-prevent-open
                          color: gray
                          iconColor: "=(items[loop.repeat + '_2_LEVEL'].state > 0 ? 'yellow' : 'gray')"
                          iconF7: "=(items[loop.repeat + '_2_LEVEL'].state > 0 ? 'lightbulb_fill' : 'lightbulb')"
                - component: oh-repeater
                  config:
                    for: repeat
                    fragment: true
                    in: =props.leuchtenItem
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionItem: =loop.repeat + '_2_STATE'
                          class:
                            - card-prevent-open
                          color: gray
                          iconColor: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'yellow' : 'gray')"
                          iconF7: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'lightbulb_fill' : 'lightbulb')"
                - component: oh-repeater
                  config:
                    for: repeat
                    fragment: true
                    in: =props.ventItem
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionItem: =loop.repeat + '_2_STATE'
                          class:
                            - card-prevent-open
                          color: gray
                          style:
                            vertical-align: sub
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'yellow' : 'gray')"
                                height: 22px
                                icon: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'iconify:mdi:fan' : 'iconify:mdi:fan-off')"
                                style:
                                  vertical-align: bottom
                - component: oh-repeater
                  config:
                    for: repeat
                    fragment: true
                    in: =props.steckItem
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionItem: =loop.repeat + '_2_STATE'
                          class:
                            - card-prevent-open
                          color: gray
                          style:
                            vertical-align: sub
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'yellow' : 'gray')"
                                height: 22px
                                icon: iconify:mdi:power-socket-de
                                style:
                                  vertical-align: bottom
                - component: oh-repeater
                  config:
                    for: repeat
                    fragment: true
                    in: =props.sonderItem
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionItem: =loop.repeat + '_2_STATE'
                          class:
                            - card-prevent-open
                          color: gray
                          style:
                            vertical-align: sub
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: "=(items[loop.repeat + '_2_STATE'].state === 'ON' ? 'yellow' : 'gray')"
                                height: 22px
                                icon: "=(props.sonderSymbol ? props.sonderSymbol : 'f7:question')"
                                style:
                                  vertical-align: bottom
...
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

Antworten