FTUI Widget Circlemenu: Unterschied zwischen den Versionen

Aktuelle Version vom 2. August 2024, 15:37 Uhr

Das Circlemenu Widget ist ein Widget für FHEM Tablet UI V2, 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:

vertical
vertical-top
horizontal
bottom-left
bottom
right
left
top
bottom-half
right-half
left-half
top-half
top-left
top-right
full
bottom-right

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 1: / Zeile 1: @@
-Das [[{{PAGENAME}}|Circlemenu Widget]] ist ein Widget für [[FHEM Tablet UI]], das mehrere Widgets nach einem Klick auf ein einziges anzeigen kann.
+Das [[{{PAGENAME}}|Circlemenu Widget]] ist ein Widget für [[FHEM Tablet UI V2]], das mehrere Widgets nach einem Klick auf ein einziges anzeigen kann.
 <gallery>
@@ Zeile 31: / Zeile 31: @@
 ==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'''
+Mögliche Werte für '''data-direction''' sind:
+* '''vertical'''
+* '''vertical-top'''
+* '''horizontal'''
+* '''bottom-left'''
+* '''bottom'''
+* '''right'''
+* '''left'''
+* '''top'''
+* '''bottom-half'''
+* '''right-half'''
+* '''left-half'''
+* '''top-half'''
+* '''top-left'''
+* '''top-right'''
+* '''full'''
+* '''bottom-right'''
 ==Beispiele==
 ===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 67: @@
    <div class="">Woofer</div>
 </div>
-</source>
+</syntaxhighlight>
 [[File:Circlemenu tabletUI.png]]
-[[Kategorie:FHEM Tablet UI]]
+[[Kategorie:FHEM Tablet UI V2|Circlemenu]]