CrowlKit- stijlthema's

Stijlthema's

CrowlKit bevat een aantal ingebouwde stijlthema's. 

  
data-theme Naam
code-blue Code blue
dark Dark
emerald-night Emerald night
futuristic-silver Futuristic silver
light Light
matrix-green Matrix green
midnight-blue Midnight blue
neon-nights Neon nights
ocean-breeze Ocean breeze
sunny-day Sunny day
teletext Teletext

Je voegt die op de volgende manier toe:

<body data-theme="teletext">

Zoals je ziet, kan je de start tag van het body-element een stijlthema geven. Je kan in het bovenstaande voorbeeld "teletext" vervangen door een ander data-theme uit bovenstaande tabel. Als je data-theme volledig weglaat, dan is elke stijl verwijderd. 

<body>

Een themaselectie toevoegen aan je app

Het is mogelijk om in je webapp een stijlthema-selector toe te voegen. Dat doe je door onderstaande code toe te voegen aan het body-element.

<body data-theme="teletext">

     <app-part class="bottomright">

        <label for="theme-selector">Kies een thema:</label>

        <select data-function="theme-selector" id="theme-selector">

            <option selected disabled>--Kies een thema--</option>

            <option value="code-blue">Code Blue</option>

            <option value="dark">Dark</option>

            <option value="emerald-night">Emerald Night</option>

            <option value="futuristic-silver">Futuristic Silver</option>

            <option value="light">Light</option>

            <option value="matrix-green">Matrix Green</option>

            <option value="midnight-blue">Midnight Blue</option>

            <option value="neon-nights">Neon Nights</option>

            <option value="ocean-breeze">Ocean Breeze</option>

            <option value="sunny-day">Sunny Day</option>

            <option value="teletext">Teletext</option>  

        </select>

    </app-part>



</body>

In de "class" kan je bepalen waar ergens op je scherm de selector komt te staan:

  1. topleft: bovenaan links
  2. topright: bovenaan rechts
  3. bottomleft: onderaan links
  4. bottomright: onderaan rechts
  5. Als je geen van de vier selecteert, staat het element op de plaats waar je het in je html-code hebt ingevoegd.
Volgende pagina