Development guide

OffCanvas <x-offcanvas>

Properties

Property Attribute Type Default Description
id id string '' Verplicht attribuut
main url mainUrl string '' Url waar de titel van de offcanvas naar verwijst
max breakpoint maxBreakpoint string '' Maximale breedte waar de offcanvas niet meer werkt
position position string offcanvas-start Opties: links offcanvas-start, boven offcanvas-top, rechts offcanvas-end, beneden offcanvas-bottom,
trigger class triggerClass string '' Class die op de trigger button wordt gezet
trigger trigger string '' Text of html voor in de trigger
header class headerClass string '' Class die op de header van de offcanvas wordt gezet
title title string '' Titel text
titleClass titleClass string '' Class die op de titel wordt gezet
bodyClass bodyClass string '' Class die op de body wordt gezet
footer footer string '' Footer text of html
footerClass footerClass string '' Class die op de footer wordt gezet

Voorbeeldcode trigger:

<button class="button button--primary"
        type="button"
        data-bs-toggle="offcanvas"
        data-bs-target="#voorbeeld"
        aria-controls="voorbeeld"
>
    Dit is een trigger
</button>

Voorbeeldcode offcanvas:

<x-offcanvas
    id="voorbeeld"
    title="Offcanvas test"
    titleClass="title title--h3"
    headerClass="component-guide-sidebar__header"
>
    Dit is een voorbeeld offcanvas
</x-offcanvas>

Offcanvas test
Dit is een voorbeeld offcanvas