FTUI Widget Circlemenu: Unterschied zwischen den Versionen

Aus FHEMWiki
Zur Navigation springen Zur Suche springen
(Anpassung von <source>-Tags nach <syntaxhighlight>)
K (Mögliche Werte für data-direction ergänzt.)
Zeile 31: Zeile 31:


==Hinweise==
==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==
==Beispiele==

Version vom 3. September 2017, 11:58 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:

  • 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>

Circlemenu tabletUI.png