Studio Editor: Elementen stapelen
Leestijd 4 minuten
Een stapel is een flexbox-container die een groep elementen 'omsluit' – of ze nu in een verticale of horizontale volgorde staan. Het zorgt ervoor dat de elementen op volgorde blijven, met de tussenruimte die je definieert, en nooit overlappen.
Dat gezegd hebbende, kun je negatieve marges gebruiken om elementen opzettelijk te laten overlappen.
In dit artikel lees je hoe je:
Een stapel toepassen
- Klik op een element dat in de stapel zou moeten komen.
- Houd de Shift-toets ingedrukt en selecteer de andere stapelelementen.
- Klik op Stapelen.
- (Optioneel) Houd de verticale lijn tussen elementen vast om de marges in te stellen.
Tip:
Je kunt ook negatieve marges maken om elementen opzettelijk te laten overlappen.
De stapelrichting wijzigen
Wanneer je elementen stapelt, wordt de richting automatisch bepaald door de volgorde van de elementen. Als de elementen bijvoorbeeld verticaal zijn gerangschikt, zal de stapel verticaal zijn.
Hoe dan ook, je kunt de richting altijd wijzigen met behulp van de dropdown. Hiermee worden de elementen automatisch herschikt, zodat ze in de juiste volgorde staan.
Een stapel beheren
Je kunt de stapel altijd aanpassen aan nieuwe inhoud en vereisten. Voeg meer elementen toe aan de stapel, verplaats ze met een klik op de knop en verwijder elementen die niet langer relevant zijn.
Om een stapel te beheren:
- Selecteer de relevante stapel.
- Kies wat je vervolgens wilt doen:
Voeg een element toe aan de stapel
Een element van de stapel loskoppelen
klikken. Klik vervolgens op Loskoppelen.
Elementen in de stapel herschikken
of Omlaag
.
Elementen ontstapelen
Een stapel ontwerpen
De stapel hoeft niet transparant te zijn – je kunt het zo ontwerpen dat de inhoud opvalt op de pagina. Voeg een achtergrondkleur, rand en schaduw toe. Je kunt de hoeken van de stapel ook ronder of vierkanter maken.
Om een stapel te ontwerpen:
- Selecteer de relevante stapel.
- Klik rechtsboven in de Editor op de Inspector-pijl
. - Scrol omlaag naar Ontwerp.
- Ontwerp de stapel met behulp van de beschikbare opties:
- Stel de achtergrondkleur en de ondoorzichtigheid in.
- Voeg een rand toe om de stapel in te kaderen.
- Kies een radius voor de hoeken.
- Schakel schaduw in en beheer instellingen zoals de hoek, afstand, grootte, enzovoort.
Vond je dit artikel nuttig?
|