FTUI Layout Sheet

Das Sheet-Layout ist ein Tabellen-ähnliches Layout für FHEM Tablet UI, mit dem Inhalte ganz einfach horizontal und vertikal mittig positioniert werden können. Die Größe der einzelnen Zellen passt sich automatisch der Bildschirmgröße an.

Durch die "starre" Beschaffenheit eignet sich dieses Layout aber besser für die Positionierung von Elementen in z.B. einem Grister- oder Flex-Layout, als für eine eigene Seitenstruktur.

Bei der Gestaltung kann auf folgende CSS-Klassen zurück gegriffen werden:

sheet: Startet eine neue Tabelle
row: Neue Reihe in der aktuellen Tabelle
cell: Neue Zelle in der aktuellen Reihe
cell-1-x: Neue Zelle in der aktuellen Reihe mit einer fixen Größe X von Y (z.B.: cell-1-3: 33%, cell-1-4: 25%)
cell-x: Neue Zelle in der aktuellen Reihe mit einer fixen Größe von X Prozent (z.B.: cell-20: 20%, cell-40: 40%)
left-align: Inhalte der Zelle links anordnen
right-align: Inhalte der Zelle rechts anordnen
bottom-align: Inhalte der Zelle am unteren Rand ausrichten
top-align: Inhalte der Zelle am oberen Rand ausrichten
center-align: Inhalte der Zelle in der horizontalen Mitte ausrichten

4x4 Raster

<div class="sheet">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

Verschachtelung

<div class="sheet">
    <div class="row">
        <div class="cell-25"><div data-type="symbol"></div></div>
        <div class="cell-50">
            <div class="sheet">
                <div class="row">
                    <div class="cell-1-3"><div data-type="symbol"></div></div>
                    <div class="cell"><div data-type="symbol"></div></div>
                </div>
                <div class="row">
                    <div class="cell-1-3"><div data-type="symbol"></div></div>
                    <div class="cell"><div data-type="symbol"></div></div>
                </div>
            </div>
        </div>
        <div class="cell-25"><div data-type="symbol"></div></div>
    </div>
</div>