Dropdown Widget - Anfänger

[Kahzia]

Hallo,


ich versuche kläglich ein Dropdown Menü auf die Beine zu stellen.

Was habe ich vor ?
Ich habe eine Gartenlampe, die 3 Modi bestitzt.
1. Tageslicht
2. Farbe
3. Szene

Diese 3 Modi kann ich bisher nur als Button auf meinem Widget wiedergeben.
Da mir aber die Button Ansicht zu "groß" ist, wäre mein Wunsch ein Dropdown Menü mit welchem ich die Modi switchen kann.

Bisher habe ich noch nicht die richtige Information gefunden, auch nicht im englischen Forum...


Unter Framework7 sollte es aber theoretisch umsetzbar sein.

https://framework7.io/vue/menu

Wäre jemand so gütig mir ein kleines Beispiel zu geben ?

Es scheitert zu 99% an fehlendem Verständnis für die neue Sprache...
Ich muss sagen, dass ich in den neuen YAML Teil sehr schwer reinfinde... bzw die Struktur erschließt sich, ich kann zumindest vorhanden Widgets anpassen und auch kleine Änderungen vornehmen.

Aber etwas komplett neues ohne vorherige Vorlage zum "abschauen" ist dann doch etwas zu viel... zumal ich mit google nicht wirklich weiterkam

Erste Versuche habe ich bereits unternommen, aber noch nichts brauchbares erreicht... im Prinzip ist mein bsp unten nichtmal funktional...


eventuell erbarmt sich jemand

VG

Code: Alles auswählen

    - component: f7-menu-dropdown
      config:
        raised: true
        round: true
        strong: true
        style:
          padding-bottom: px
          padding-top: 0px
          margin-top: 30px
          margin-left: 50px
          width: 33%
          opacity: 100%
    - component: f7-menu-dropdown
      config:
       text: TEST
       popup-open: TEST

[int5749]

Hallo

ich habe mal mit einigen Beispielen gespielt, bin aber noch in der Sitemap, daher sind meine Pages nur Spielwiesen

Option 1: Dropdown Menüs direkt in einer Page

Code: Alles auswählen

component: oh-label-card
config:
  action: options
  actionItem: Ventilator2
  actionOptions: 0=Off,1=Stufe 1,2=Stufe 2
  icon: oh:fan
  item: Ventilator2
slots: null

Optione 2: "Selection Bar" Widget, welches als Widget angelegt und dann in eine Page integriert wird

Code: Alles auswählen

uid: Air Circulation Control
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Feb 17, 2021, 2:35:49 PM
component: f7-segmented
config:
  raisedAurora: true
  round: true
slots:
  default:
    - component: oh-button
      config:
        title: Off
        action: command
        actionItem: Ventilator2
        actionCommand: "0"
        iconF7: chevron_down
        iconColor: '=(items.Ventilator.state === "0") ? "green" : "black"'
        text: Off
    - component: oh-button
      config:
        title: Stufe 1
        action: command
        actionItem: Ventilator2
        actionCommand: "1"
        iconF7: chevron_right
        iconColor: '=(items.Ventilator.state === "1") ? "green" : "black"'
        text: Stufe 1
    - component: oh-button
      config:
        title: Stufe 2
        action: command
        actionItem: Ventilator2
        actionCommand: "2"
        iconF7: chevron_right_2
        iconColor: '=(items.Ventilator.state === "2") ? "green" : "black"'
        text: Stufe 2

Viele Grüße,
int5749

[Kahzia]

danke für die Hilfestellung.

Tatsächlich arbeite ich nur mit den custom Widgets, da ich von OH2 noch eine komplette Sitemap habe, hab ich mich überhaupt nicht mit der "neuen" auseinander gesetzt

Im Prinzip habe ich das Widget ein wenig für mich angepasst, allerdings hänge ich gerade dabei die Größe zu verändern.
Ich krieg einfach nicht raus, wie die Größe für "mein" Widget anpassbar ist, hast du da noch einen Tipp ?

Ich hab es mit posiiotn absolutge etc versucht, allerdings reagiert die card innerhalb des widgets einfach nicht :O

Code: Alles auswählen

    - component: oh-label-card
      config:
            action: options
            actionItem: GartenlampeTerrasse1_work_mode
            actionOptions: white=white,colour=colour 1,scene=scene 2
            icon: oh:fan
            item: GartenlampeTerrasse1_work_mode
            style:
            position: absolute
            top: 5

[int5749]

Hallo,

ich habe mich auch noch nicht mit solchen Details beschäftigt, aber gerade mal schnell geschaut.
Eine Option wäre es, die Spalte zu konfigurieren => dort dann die Breite
Ich habe dies ma bei default auf 20% gesetzt und dann ist diese Spalte entsprechend schmaler und das Widget passt sich an.
Bei größeren Pages mit vielen Widgets müsste man dort sicher noch deutlich intensiver konfigurieren.

Für mich ich das Gitter mit einem Excel-Sheet vergleichbar. Die Konfiguration einer Spalte ist dann auch für die kompletten Zellen der Spalte gültig, bis ich eine Zellen darunter aufspalte ... und schon steigt die Komplexität Da braucht es eine gute Planung.