FTUI Widget Circlemenu: Unterschied zwischen den Versionen

Version vom 26. Juli 2017, 18:57 Uhr

Das Circlemenu Widget ist ein Widget für FHEM Tablet UI, das mehrere Widgets nach einem Klick auf ein einziges anzeigen kann.

Attribute

Attribut	Beschreibung	Standard-Wert	Beispiel
data-item-diameter	Durchmesser der einzelnen Objekte	52	data-item-diameter="100"
data-circle-radius	Radius des Kreises, in dem die Objekte angeordnet werden	70	data-circle-radius="200"
data-border	Stil der Objekte (round, square)	round	data-border="square"
data-item-width	Fixer Wert für die Breite des Widgets in px	data-item-diameter	data-item-width="120"
data-item-height	Fixer Wert für die Höhe des Widgets in px	data-item-diameter	data-item-height="100"
data-direction	Position der Objekte in Relation zur Mitte	full	data-direction="right-half"

CSS Klassen

keepopen	Verhindert, dass sich das Circle-Menü nach Klick auf ein Objekt schließt
noshade	Hintergrund wird beim Öffnen eines Circle-Menüs nicht abgedunkelt

Hinweise

Mögliche Werte für data-direction sind: top, right, bottom, left, top-right, top-left, bottom-right, bottom-left, top-half, right-half, bottom-half, left-half, full, vertical, horizontal

Beispiele

Einfaches Beispiel

Dieses Beispiel zeigt nach einem Klick auf einen Button mehrere Buttons zur Auswahl von Werten.

<div class="col-1-2">
  <div data-type="circlemenu" class="">
    <ul>
      <li><div data-type="push" data-icon="fa-wrench"></div></li>
      <li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level -6" data-icon="">-6</div></li>
      <li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level -2" data-icon="">-2</div></li>
      <li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 0" data-icon="">0</div></li>
      <li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 3" data-icon="">2</div></li>
      <li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 9" data-icon="">9</div></li>
      <li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 12" data-icon="">12</div></li>
    </ul>
  </div>
  <div class="">Woofer</div>
</div>

@@ Zeile 36: / Zeile 36: @@
 ===Einfaches Beispiel===
 Dieses Beispiel zeigt nach einem Klick auf einen Button mehrere Buttons zur Auswahl von Werten.
-<source lang="html">
+<syntaxhighlight lang="html">
 <div class="col-1-2">
    <div data-type="circlemenu" class="">
@@ Zeile 51: / Zeile 51: @@
    <div class="">Woofer</div>
 </div>
-</source>
+</syntaxhighlight>
 [[File:Circlemenu tabletUI.png]]
 [[Kategorie:FHEM Tablet UI]]