Aller au contenu
PHIL
English

Switch

composant

An on and off control: a checkbox with the role switch, which the browser checks and submits without JavaScript.

Aperçu

Clair

Code 
<twig:Label><twig:Switch name="news" :checked="true" /> Newsletter</twig:Label>

Sombre

Code 
<twig:Label><twig:Switch name="news" :checked="true" /> Newsletter</twig:Label>

Essayer

Changez les propriétés ; le serveur rend l’exemple de nouveau.

<twig:Label><twig:Switch name="news" :checked="true" /> Newsletter</twig:Label>

Variantes

size

The switch size.

size="default"
size="sm"

checked

Whether the switch is initially checked.

checked="false"
checked="true"

Installation

php bin/console ux:install switch --kit=github.com/parler-haut-interagir-librement/ux-kit

Propriétés

PropriétéTypePar défautDescription
size 'default'|'sm' 'default' The switch size.
checked bool false Whether the switch is initially checked.

Accessibility

A form control like another: name it with a Label. phil-ux keeps its target wide enough for a finger.

Fichiers à copier

templates/components/Switch.html.twig 
{%- props
    ## 'default'|'sm' The switch size.
    size = 'default',
    ## bool Whether the switch is initially checked.
    checked = false
-%}
<input type="checkbox" role="switch" data-slot="switch" data-size="{{ size }}"{% if checked %} checked{% endif %}{{ attributes.defaults({class: 'isSwitch' ~ (size is same as('sm') ? ' isSmall' : '')}) }}>