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 Slider
<div class="af-form__slider">
<div class="md-10">
<div style="width: 100%; margin: 0px;">
<div class="rc-slider rc-slider-with-marks">
<div class="rc-slider-rail"></div>
<div class="rc-slider-track" style="visibility: visible; left: 0%; width: 33.3333%;"></div>
<div class="rc-slider-step"><span class="rc-slider-dot rc-slider-dot-active" style="left: 0%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="left: 33.3333%;"></span><span class="rc-slider-dot" style="left: 66.6667%;"></span><span class="rc-slider-dot" style="left: 100%;"></span></div>
<div class="rc-slider-handle" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="3" aria-valuenow="1" aria-disabled="false" style="left: 33.3333%;"></div>
<div class="rc-slider-mark"><span class="rc-slider-mark-text rc-slider-mark-text-active" style="width: 30%; margin-left: -15%; left: 0%;">VERY BAD</span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="width: 30%; margin-left: -15%; left: 33.3333%;">BAD</span><span class="rc-slider-mark-text" style="width: 30%; margin-left: -15%; left: 66.6667%;">NICE</span><span class="rc-slider-mark-text" style="width: 30%; margin-left: -15%; left: 100%;">VERY NICE</span></div>
</div>
</div>
</div>
</div>@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
$heightslide: 6px;
.af-form {
&__slider {
width: 80% !important;
margin-bottom: 1.2em;
// stylelint-disable selector-class-pattern
.rc-slider {
border-radius: 0;
&-rail {
background: $color-mercury;
height: $heightslide;
}
&-track {
background: $color-azur;
height: $heightslide;
border-radius: 0;
}
&-handle {
background: $color-azur;
border-color: $color-azur;
color: $white;
top: 50%;
transform: translate(0, -50%);
margin-top: 0;
width: 20px;
height: 20px;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: $color-silver;
width: 2px;
height: $heightslide;
}
}
&-step {
height: $heightslide;
}
&-dot {
border-radius: 0;
background: $color-gray;
border-color: $color-gray;
width: 2px;
height: $heightslide;
position: absolute;
top: 50%;
transform: translate(0, -50%);
&.active {
background: $color-silver;
border-color: $color-silver;
}
&:nth-child(1) {
height: 12px;
}
&:nth-last-child(1) {
height: 12px;
}
}
}
// stylelint-enable selector-class-pattern
}
}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
Le slider est une alternative aux saisies de valeur.
2) Use case
- Le slider doit être utilisé dans le cadre de saisie d’ordre de grandeur.
- Des valeurs sont indiquées tout le long du slider, à intervalle régulier. Ces valeurs ont un comportement « magnétique », le bouton du slider se positionnera donc automatiquement sur la valeur la plus proche.
- Le nombre de valeurs dans le slider ne doit pas dépasser 7.
3) DO/DONT
Pour une saisie précise on doit remplacer le slider par un champ de formulaire.
5) Utilisation
a) Position
Le slider doit être positionné en dessous de son label ou à droite de son label.
b) Alignement
Le slider doit être aligné à gauche du bloc parent.
c) Contenu
L’unité du slider doit être spécifié dans le label.
d) Rédaction
Le label du slider et les valeurs doivent être le plus clair et concis que possible.
e) Pictogrammes
Aucun pictogramme ne doit être utilisé en plus du label.
f) Action
L’utilisateur peut changer la valeur du slider en restant clic gauche enfoncé sur le bouton du slider et le déplacant à droite ou à gauche.
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-slider/dist/slider.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__slider | 16 / 1 | 400 | Source Sans Pro Regular |