Skip to Main Content

Bouton à bascule

Un bouton à bascule est utilisé pour activer ou désactiver une option binaire dans un système, ce qui signifie que l’action est effectuée ou non.

Une fois que le bouton est déplacé pour activer ou désactiver l’option, le résultat est obtenu immédiatement.

Utilisez-le quand :

  • Un utilisateur doit choisir d’activer ou de désactiver une option pour avoir des résultats instantanés.
  • Chaque option peut être contrôlée de façon indépendante.

Ne l’utilisez pas quand :

  • D’autres actions sont nécessaires pour effectuer la tâche. Utilisez plutôt les cases à cocher ou les boutons radio.
  • L’utilisateur doit choisir entre deux types de contenu. Dans ce cas, utilisez un commutateur de contenu, et non un bouton à bascule.

Composant interactif

Intégration des bibliothèques

Utilisez le code ci-dessous pour ajouter cet élément à votre projet. Téléchargez la dernière version de la bibliothèque pour implémenter facilement notre ensemble complet d’éléments.

Angular HTML

angular

Étape 1. Installer

Effectuer la commande suivante pour installer ce composant.

npm i [NPM-PLACE-HOLDER]/ds-toggle

Étape 2. Importer

Importer les éléments suivants dans votre dossier app.module.ts.

import { DsToggleModule } from 'ds-toggle';

Extraits de code

Bouton à bascule 
 <cpc-ds-toggle 
      id="rememberMe" 
      text="A quick brown fox jumps over a lazy dog"
      (onChanged) = "onToggle($event)"
      [setValue]="toggleValue"
      ></cpc-ds-toggle>
Propriétés
Nom Type Défaut Description
id string id

Identifiant du bouton à bascule
text string  

Permet d’entrer le texte de l’étiquette du bouton à bascule
SetValue boolean true

Permet d’indiquer si le bouton à bascule est coché ou décoché

HTML

Étape 1: Importer CSS

Importer les éléments suivants dans votre thème ou votre page.

<link type="text/css" href="[CSS-PLACE-HOLDER]" rel="stylesheet">

Étape 2: Importer JS 

<script src="[JS-PLACE-HOLDER]"></script>

Extraits de code

Bouton à bascule 
 <div data-title="Toggle">
                <h2 class="section-heading">Toggle</h2>
                <button id="rememberMe" class="by-keyboard" type="button" data-switch-toggle-pressed data-switch-toggle data-switch-toggle-labels disabled>
                    <div class="toggleText">A quick brown fox jumps over a lazy dog</div>
                </button>
  </div>

Exemples de codes

Section de base

Veuillez noter que ce composant pourrait nécessiter un élément de style supplémentaire.

Télécharger les fichiers

Angulaire

En tant que composant de la liste de base, il fournit un style de conception d’article, mais aucun comportement en soi.

Télécharger les fichiers

Lignes directrices

Interaction avec le clavier

Lorsque la fonction de basculement est mise en évidence :

  • La barre d’espacement permet de passer d’un état à l’autre
  • La touche Entrée permet de passer d’un état à l’autre

Généralement, la fonction de basculement restera mise en évidence après le changement d’état.

Test

Au moment de tester une fonction de basculement, le testeur doit s’assurer de ce qui suit :

  • Est entièrement accessible au moyen du clavier.
  • Les indications concernant les états de survol et de mise en évidence sont claires et bien en vue.
  • Le passage d’un état à l’autre est clair et la couleur n’est pas le seul indicateur du changement.
  • Le basculement est immédiat.
  • Le basculement a le rôle d’un bouton.
  • Le lecteur d’écran annonce l’étiquette du basculement, son rôle et son état (activé/non activé).

Remarque importante

L’élément de basculement est seulement conçu, du point de vue de l’accessibilité, pour prendre en charge les états opposés (oui/non, marche/arrêt). Il n’est pas conçu pour prendre en charge les états contextuels (p. ex., système impérial/métrique, format Liste/format Carte).

Contenu connexe