Source Code HTML / SASS
Vous trouverez ici les démos et le code source statiques du composant.
On expose les différentes déclinaisons du composant au format HTML et SASS.
Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre storybook.
Classic Radio Switch
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="radioswitch">Switch radios *</label>
</div>
<div class="col-md-10">
<div class="af-form-switch">
<div class="af-form__radio-custom">
<input class="af-form__input-radio" id="check0" name="placeName" value="0" type="radio" />
<label class="af-form__label" for="check0"><span class="af-form__description">Choix 1</span></label>
</div>
<div class="af-form__radio-custom">
<input class="af-form__input-radio" id="check1" name="placeName" value="1" type="radio" checked="checked" />
<label class="af-form__label" for="check1"><span class="af-form__description">Choix 2</span></label>
</div>
<div class="af-form__radio-custom">
<input class="af-form__input-radio" id="check2" name="placeName" value="2" type="radio" />
<label class="af-form__label" for="check2"><span class="af-form__description">Choix 3</span></label>
</div>
<div class="af-form__radio-custom">
<input class="af-form__input-radio" id="check3" name="placeName" value="3" type="radio" />
<label class="af-form__label" for="check3"><span class="af-form__description">Choix 44444444444444</span></label>
</div><span class="af-btn-switch-slider" style="left:64px;width:64px;"></span>
</div>
</div>
</div>@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-form {
&-switch {
width: auto;
height: 24px;
display: inline-block;
position: relative;
&::before {
content: '';
width: 100%;
height: 24px;
display: inline-block;
position: absolute;
border-radius: 15px;
background-color: $color-mercury;
z-index: 0;
}
.af-form__radio-custom {
width: auto;
height: 24px;
display: inline-block;
position: relative;
margin: 0;
padding: 0 12px;
font-size: 0.819rem;
color: $color-pager-link;
box-sizing: border-box;
z-index: 1;
cursor: pointer;
user-select: none;
.af-form__label,
.af-form__input-radio:checked+.af-form__label,
&:hover .af-form__label {
padding: 0;
background: none;
border: none;
box-shadow: none;
}
.af-form__description {
padding: 0;
}
}
.af-btn-switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
transition: 0.4s;
z-index: 0;
display: inline-block;
width: 100%;
&::before {
position: absolute;
display: block;
width: 100%;
content: '';
height: 30px;
top: -2px;
padding: 0 12px;
background-color: $color-azur;
border-radius: 15px;
box-shadow: 0 2px 4px 0 rgba(123, 123, 123, 0.5);
transform: translateX(0);
transition: 0.4s;
}
}
}
}React interactions
Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.
Vous avez la possibilité de jouer avec les propriétés du composant React sur notre storybook.
Generales Guidelines
Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.
Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.
1) Définition
Un switch est un composant de saisie binaire, proposant les états actif ou inactif.
2) Use case
- Un switch est utilisé pour sélectionner activer/désactiver rapidement une option unique.
- Un switch enregistre le changement d’état automatiquement et immédiatement, contrairement à une checkbox.
3) DO/DONT
- Le switch ne doit être remplacé par un bouton radio si la liste de réponses est exclusive.
- Le switch doit être remplacé par un switch si le bouton ne s’applique que pour une donnée.
- Un switch ne peut pas être utilisé dans un formulaire comportant un bouton « appliquer » ou « enregistrer » à sa fin.
4) Avancé
L’usage du switch est limitée à une instance par ligne.
5) Utilisation
a) Position
Le switch doit être placé à droite de son label.
b) Alignement
Le switch sera ferré à gauche de la colonne de saisie, à la même hauteur.
c) Contenu
Le label est centré, switch adapté à la largeur du texte.
d) Rédaction
Le label d’un switch doit clairement indiquer l’item qu’il représente.
e) Pictogrammes
Aucun pictogramme ne doit être utilisé en plus du label.
f) Action
L’état actif ne peut être représenté que par une seule couleur par page, par défaut le [bleu AXA].
g) Variations
- Inactif
- Actif
Style
Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.
On liste également les codes couleur utilisés, cliquez-ici pour voir l'ensemble des couleurs du Design System
Imports SASS
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
@import '@axa-fr/react-toolkit-form-input-switch/dist/switch.scss';
Typography
Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.
| Class | Font-size (px/rem) | Font-weight | Font-family |
|---|---|---|---|
| .af-form-switch | 16 / 1 | 400 | Source Sans Pro Regular |