CrowlKit - een UI met lagen

Libraries toevoegen

Zorg ervoor dat de volgende libraries gekoppeld zijn aan de head van je app/pagina:

<script src="https://cdn.publihub.media/lib/app.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.layers.js"></script>

Lagen toevoegen: app-layers als "verzameling"

Om elementen boven op elkaar te stapelen in lagen, zoals je dat kent van grafische programma's zoals Adobe Photoshop, kan je in je app het app-layers- en app-layer-elementen gebruiken.

<app-layers height="100vh">
    <!--Hier komen de diverse lagen-->
</app-layers>

Een app-layers-element kan meerdere attributenkrijgen:

id: een uniek id voor het element
height: de hoogte kan je instellen in pixels of in "vh" (=viewport height), niet in precentages!.
width: standaard is het element even breed als de pagina/app (= 100 vw = 100 viewport width). Je kan de waarde instellen in pixels (vb. 500px) of in vw-units (vb. 50vw = 50% van de breedte van het scherm).

Lagen in app-layers

In het app-layers-element kan je meerdere app-layer-elementen toevoegen.

Een app-layer-element kent meerdere attributen:

x: horizontale startpositie van het element in het app-layers-element. Kan ook een negatieve waarde zijn of een waarde die hoger is dan de breedte van app-layers. x = 0 is de linkerpositie van het scherm.
y: verticale startpositie van het element in het app-layers-element. Kan ook een negatieve waarde zijn of een waarde die hoger is dan de hoogte van app-layers. y = 0 is de bovenkant van het venster.
width: breedte in pixels of vh
height: hoogte in pixels of vh
backgroundcolor: achtergrond kleur in HEX, RGB of RGBA
z: startend bij 0 tot ... Hoogte in de stapelvolgorde op het scherm.
clickthrough: Als je deze waarde op false zet, dan kan je er niet doorheen klikken. Standaard staat de waarde op true.
id: een uniek id voor het element om attributen achteraf te kunnen wijzigen.

<app-layers height="80vh">
        <app-layer id="layer1" x="0px" y="0px" width="90vw" height="50vh" backgroundcolor="rgba(255, 0, 0, 0.5)" z="1" clickthrough="false">
            <div id="cv">
                <h1>Hallo</h1>
                <button id="test">test</button>
            </div>
        </app-layer>
        <app-layer id="layer2" z="0" backgroundcolor="rgba(255, 255, 255, 0)" clickthrough="true">
            <app-part id="p5-container"></app-part>
        </app-layer>
        <app-layer id="layer3" x="20px" y="30px" width="300px" height="300px" backgroundcolor="rgba(0, 0, 0, 0.8)" z="3" clickthrough="false">
            <button id="test2">test2</button>
        </app-layer>
</app-layers>

Attributen wijzigen

Je kan in realtime elk attribuut van een app-layer-element wijzigen. Stel dat je een knop maakt met id "wijzig", dan kan je na het klikken op die knop attributen van lagen wijzigen:

id("wijzig").after("click").do(function(){
   id("layer1").changeFeature("x", "90px");
   id("layer1").changeFeature("y", "130px");
   id("layer2").changeFeature("border", "3px solid red");
});

Als je een laag een achtergrondkleur geeft, dan kan het handig zijn die laag gedeeltelijk transparant of doorzichtig te maken. Dat kan je door RGBA-waarden te gebruiken.

Bijvoorbeeld een transparant wit vlak schrijf je rgba(255,255,255,0.5). Tussen de haakjes zie je eerst de drie kleurwaarden voor rood, groen en blauw. Die waarden kunnen schommelen tussen 0 en 255. De vierde waarde is de graad van transparantie. 0 is volledig doorzichtig, 1 volledig gevuld. 0.5 (je moet het schrijven met een punt, niet met een komma) is half doorzichtig.

Geef je een laag geen backgroundcolor-attribuut, dan is de achtergrond van de laag geheel transparant.

Lagen met dezelfde dimensies

Als alle lagen exact even groot zijn, m.a.w. als je lagen wil maken die gewoon bovenop elkaar liggen zonder uitzonderingen op het vlak van x- en y-positie, dan kan je ook gebruik maken van het app-drawlayer-element.

Met een app-background-element kan je je app voorzien van een achtergrondfoto of achtergrondfilm. Bij het src-attribuut kan je een foto, een link naar een YouTube- of VIMEO-film of een link naar een filmbestand opnemen.