CrowlKit - pagina samenstellen

Hoe begin je aan het samenstellen van je pagina?

1. App-screen

De onderdelen van je app voeg je toe aan de body, m.a.w. tussen <body> en </body>. Het eerste element dat je toevoegt is <app-screen>.

<body data-theme="teletext">
    <app-screen>
    </app-screen>
</body>

2. Rijen en kolommen toevoegen

Vervolgens kan je de pagina of app indelen in rijen en kolommen. 

In de kolommen kan je overigens ook standaard html-elementen toevoegen. Hiervoor leer je best onze cursus html.

  • p: alinea
  • h1: grote titel
  • h2: titel niveau 2
  • h3: titel tot niveau 3...
<body data-theme="teletext">
    <app-screen>
         <app-row>
             <app-column>
                   <h3>Titel van de eerste kolom</h3>
                   <p>Eerste alinea in de eerste kolom</p>
             </app-column>
             <app-column>
                   <h3>Titel van de tweede kolom</h3>
                   <p>Eerste alinea in de tweede kolom</p>
             </app-column>
         </app-row>
    </app-screen>
</body>

Je kan een kolom ook "breder" maken door het attribuut "wide" toe te voegen.

<body data-theme="teletext">
    <app-screen>
         <app-row>
             <app-column>
                   <h3>Titel van de eerste kolom</h3>
                   <p>Eerste alinea in de eerste kolom</p>
             </app-column>
             <app-column wide>
                   <h3>Titel van de bredere tweede kolom</h3>
                   <p>Eerste alinea in de tweede kolom</p>
             </app-column>
         </app-row>
    </app-screen>
</body>

3. Dichtklap-onderdeel

Een accordeon-paneel kan je dicht- en openklappen. Standaard is het "gesloten". Het bevat 2 basis onderdelen:

  1. panel-title: daarin plaats je de naam van het paneel
  2. panel-content: daarin kan je alle andere onderdelen opnemen.
Je kan meerdere dichtklapmenu's onder elkaar plaatsen of onder een menu andere elementen toevoegen.
<body data-theme="teletext">
    <app-screen>
         <panel-accordeon>
            <panel-title id="menu1">
                Tekenprogramma
            </panel-title>
            <panel-content>
                <app-row>
                    <app-column wide>
                        <app-part id="tekenprogramma"></app-part>
                    </app-column>
                    <app-column>
                        <upload-zone return="source" file-types="image/jpeg,image/jpg,image/png">
                            <p>Upload een afbeelding</p>
                        </upload-zone>
                    </app-column>
                </app-row>
            </panel-content>
        </panel-accordeon>
    </app-screen>
</body>

4. Navigatiemenu

uitleg volgt

5. Een onderdeel vastmaken 

Je kan ook onderdelen groeperen in een container. Hiervoor gebruik je het element <app-part>. Zo'n onderdeel kan je vastplakken aan de uithoeken van je app.  

  1. topleft
  2. topright
  3. bottomleft
  4. bottomright
<app-part class="topleft">
     <p>Ik ben zichtbaar in de linker bovenhoek, ook al scroll je verder in de pagina.</p>
</topleft>  

6. Marges vergroten

Je kan bij elk pagina-onderdeel de marges langs de binnenkant vergroten door het attribuut "innerspace" toe te voegen.

<app-part innerspace="20">
     <p>Ik heb een binnenmarge van 20 pixels.</p>
</topleft>
Volgende pagina