Modal <x-modal>
De site maakt gebruik van de standaard Bootstrap Modals. Deze kunnen aangeroepen worden door middel van een Blade component
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
id
|
id
|
string
|
''
|
verplicht attribuut zodat de modal getoond kan worden |
headerClass
|
header-class
|
string
|
''
|
één of meerdere classes die op de modal-header worden geplaatst |
title
|
title
|
string
|
''
|
De titel die in de modal-title wordt getoond |
titleClass
|
title-class
|
string
|
''
|
één of meerdere classes die op de modal-title worden geplaatst |
dialogClass
|
dialog-class
|
string
|
''
|
één of meerdere classes die op de modal-dialog worden geplaatst |
contentClass
|
content-class
|
string
|
''
|
één of meerdere classes die op de modal-content worden geplaatst |
bodyClass
|
body-class
|
string
|
''
|
één of meerdere classes die op de modal-body worden geplaatst |
bodyAttributes
|
body-attributes
|
string
|
''
|
attributen die op de modal-body worden geplaatst |
footer
|
footer
|
string
|
''
|
Indien deze slot gevuld wordt de modal voorzien van een modal-footer met de content van dit slot |
footerClass
|
footer-class
|
string
|
''
|
één of meerdere classes die op de modal-footer worden geplaatst |
Voorbeeldcode trigger:
<button class="button button--primary" type="button" data-toggle="modal" data-target="#myModal1">
Open voorbeeldmodal
</button>Voorbeeldcode modal:
<x-modal id="myModal1" title="Voorbeeldmodal">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In magnam obcaecati repellendus tempora! Aliquid animi corporis deserunt dicta ea eos esse harum maxime numquam officia, quia quidem recusandae sint. Sequi!</p>
<x-slot name="footer">
<button type="button" class="button button--conversion" data-dismiss="modal">Close</button>
</x-slot>
</x-modal>