Welke properties zijn er allemaal op section niveau?

Welke properties zijn er allemaal op section niveau?

Welke properties zijn er allemaal op section niveau?

De enige property die verplicht is, is: section_type

align_items (string)

Dit geeft aan hoe de componenten in een rij verticaal uitgelijnd moeten worden, de waarden van de CSS property kunnen een-op-een gebruikt worden.

align-items - CSS: Cascading Style Sheets | MDN

bg_color (string)

Dit moet een waarde zijn die geldig is in CSS, zoals “white”, “#000” of “var(--primary-color)”. Deze achtergrond wordt over de gehele breedte van de sectie geplaatst. Als je als section_type “featured” hebt wordt de inhoud gecentreerd in een vlak met een maximale breedte maar de achtergrond wel over de gehele breedte gebruikt.

block_page (boolean)

In het geval een sectie wordt gebruikt als overlay geeft deze property aan of de achterliggende pagina geblokkeerd moet worden, oftewel dat je niet kunt scrollen. Werkt dus alleen in combinatie met overlay.

columns (array)

Een lijst met kolommen. Binnnen de kolommen kun je via de content property aangeven welke componenten je in die kolom wilt weergeven. De kolommen zelf hebben naast content nog de optionele property width waarmee je de breedte opgeeft. De breedte kan zijn: een fractie (“1/2”, of 0.5) of de speciale waarden: “article” en “ad” voor vastgestelde breedtes. Standaard is de waarde 1, oftewel 100%.

gapless_bottom (boolean)

Standaard wordt er tussen secties een verticale ruimte van 40px gereserveerd. In sommige gevallen wil je deze ruimte niet en wil je dat de volgende sectie strak tegen de huidie sectie aan gezet wordt. In dit geval kun je deze property definiëren en true meegeven.

gapless_top (boolean)

Werking is gelijk aan gapless_bottom, maar als verschil dat dit geldt voor de bovenkant van de sectie.

justify_content (string)

Dit geeft aan hoe de kolommen in een rij horizontaal uitgelijnd moeten worden, de waarden van de CSS property kunnen een-op-een gebruikt worden.

justify-content - CSS: Cascading Style Sheets | MDN

overlay (bottom, bottom_right, centered)

Nieuwe property die aangeeft dat je de sectie over de pagina heen wilt leggen en geen onderdeel wilt laten uitmaken van het standaard grid. De waarde van deze property geeft de locatie van de overlay aan.

padding (boolean) en positie

Standaard wordt er ruimte gereserveerd tussen secties, maar binnen rijen/secties wordt er geen ruimte gereserveerd. Meestal is dit ook wat je zou verwachten. In het geval je een sectie een afwijkende achtergrondkleur geeft, is het vaak onwenselijk om de componenten dan strak tegen de rand in de rij te zetten. In dit geval kun je deze property de waarde true geven: dan wordt er boven en onder 4rem aan ruimte binnen de sectie gereserveerd.

Daarnaast kan je ook kiezen voor:

"padding": true (boven en onder padding)
"padding": "bottom" (alleen onder padding)
"padding": "top" (alleen boven padding)
"padding": "inset" (aan alle kanten padding)

section_type (featured, full_width_ad, full_width, slot)

Dit is het enige verplichte veld. Als de waarde “full_width” wordt gebruikt, wordt inhoud van de rij over de gehele breedte van het scherm getoond. De waarde “featured” kent een maximum toe aan de breedte van de sectie, afhankelijk van de schermbreedte. In dat geval wordt de rij nooit breder dan het menu. Bij “full_width_ad” wordt er automatisch een achtergrondkleur toegepast. De waarde “slot” wordt gebruikt in template-bestanden, op deze plek wordt vervolgens de layout geladen als deze samengevoegd worden tot één pagina.

show_close (boolean)

In het geval een sectie wordt gebruikt als overlay geeft deze property aan of er een kruisje moet worden getoond in de rechter bovenhoek van de overlay waarmee deze gesloten kan worden. Werkt dus alleen in combinatie met overlay.

sticky (boolean)

Deze property geeft aan of de sectie altijd in beeld moet blijven staan ook als deze normaalgesproken door het scrollen op de pagina, uit beeld zou verdwijnen. In de praktijk wordt deze eigenschap alleen gebruikt op het menu om dit gedrag mogelijk te maken.

Sectie titel

Welkom bij PW.

PW. is dé online kennisbank voor HR-professionals. Wij helpen je met actuele en toegankelijke informatie over arbeidsrecht, personeelsbeleid en HR-thema's.