Control-Btn <x-control-btn>
Dit component ondersteunt de volgende custom attributen onderverdeeld op de 2 meest voorkomende type knoppen:
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
id
|
id
|
string
|
''
|
Unieke ID |
url
|
url
|
string
|
''
|
Als de url attribuut aanwezig is, wordt de knop een <a>
|
element
|
element
|
string
|
div
|
De tag van het element. Dit wordt een <label> als control-name is meegegeven of een <a> als een url is meegegeven
|
small
|
small
|
boolean
|
false
|
Zet op true voor een kleinere verticale padding
|
hoverable
|
hoverable
|
boolean
|
false
|
Bij true heeft het component een hover stijl
|
required
|
required
|
boolean
|
false
|
Om de input verplicht te maken |
checked
|
checked
|
boolean
|
false
|
Om een radio of checkbox op checked te zetten |
controlClass
|
control-class
|
string
|
''
|
Om een css class op de input te plaatsen |
controlTag
|
control-tag
|
string
|
span
|
De tag van het styled-switch element |
controlName
|
control-name
|
string
|
''
|
Het name-attribuut van het input element |
controlValue
|
control-value
|
string
|
''
|
De waarde van het input element |
controlType
|
control-type
|
string
|
radio
|
De type van het input element |
controlDataAttributes
|
control-data-attributes
|
string
|
''
|
Eventuele data-attributen van het input element |
iconPlacement
|
icon-placement
|
string
|
''
|
Verwacht left of right. Dit regelt waar het icoon wordt geplaatst
|
icon
|
icon
|
string
|
''
|
Moet het ID van een icon zijn uit de icon bibliotheek |
prepend
|
prepend
|
string
|
''
|
Element om content voor de kolom met de $slot te plaatsen
|
append
|
append
|
string
|
''
|
Element om content na de kolom met de $slot te plaatsen
|
prependIsIcon
|
prepend-is-icon
|
boolean
|
false
|
Zet op true om de icon in het begin te plaatsen |
hidden
|
hidden
|
boolean
|
false
|
Zet op true om een hidden attribuut te plaatsen op het hoofd element |
dusk
|
dusk
|
string
|
''
|
Komt in @dusk() te staan
|
action
|
action
|
string
|
''
|
Voor een actie-link in het component. Verwacht: edit, remove of add
|
actionClass
|
action-class
|
string
|
''
|
Om een css class mee te geven aan de actie-link |
actionIcon
|
action-icon
|
string
|
''
|
Om een eigen css class mee te geven aan de actie-link |
VoorbeeldCode:
Vektis BV
Nog geen registraties ontvangen
<x-control-btn url="#" append="Nog geen registraties ontvangen">
<span class="text-link">Vektis (12345789)</span>
</x-control-btn><x-control-btn control-name="test" append="Nog geen registraties ontvangen">
Vektis (12345789)
</x-control-btn><x-control-btn sprite-icon="hospital" id="control_1" control-name="test" control-value="12345789">
<b>Vektis BV</b><br>
Gebouw B, Sparrenheuvel 18<br>
3708 JE Zeist<br>
12345789
</x-control-btn>
Vektis BV
Gebouw B, Sparrenheuvel 18
3708 JE Zeist
12345789
Gebouw B, Sparrenheuvel 18
3708 JE Zeist
12345789
<x-control-btn sprite-icon="hospital" action="edit">
<b>Vektis BV</b><br>
Gebouw B, Sparrenheuvel 18<br>
3708 JE Zeist<br>
12345789
</x-control-btn>