Navigation buttons (Boutons de navigation)
Les boutons de navigation sont des flèches cliquables permettant de contrôler le défilement de contenu dans un conteneur scrollable (type carrousel).
Usage
- Ces boutons sont composés de flèches indiquant l’orientation du scroll au clic.
- Ils n’existent que pour le scroll horizontal (flèche vers la gauche et flèche vers la droite).
- Ils existent en 2 versions : intérieur ou extérieur, en fonction de leur position par rapport au conteneur.
N. B. – Ce composant ne fait rien en soit, c’est sont association à un autre composant (comme le carrousel) qui lui confère une action.
Style & code
Dépendances :
- Classe
sipaui
sur un parent (par exemple le<body>
), - Helpers (classes d’aide).
Ces boutons de navigation sont des <button>
portant les classes su-navigation-button
, su-left
ou su-right
en fonction de leur position et une icône su-icon
. Il faudra ajouter une classe pour spécifier s’il s’agit d’un bouton intérieur ou extérieur au conteneur.
À l’intérieur du conteneur
Pour les boutons positionnés à l’intérieur du conteneur, comme pour le carrousel, il faut ajouter la classe su-inside
à chaque bouton.
<style>/* Style utile uiquement pour la démo */
body {background: lightgray; padding: 5px;}
</style>
<button class="su-navigation-button su-inside su-left" data-suswipeprev><i class="su-icon">gauche</i></button>
<button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
À l’extérieur du conteneur
Pour les boutons positionnés à l’extérieur du conteneur, ce sera alors la classe su-outside
qu’il faudra ajouter.
<button class="su-navigation-button su-outside su-left" data-suswipeprev><i class="su-icon">gauche</i></button>
<button class="su-navigation-button su-outside su-right" data-suswipenext><i class="su-icon">droite</i></button>
Inactifs
La version inactive s’obtient en ajoutant la classe su-disabled
.
<style>/* Style utile uiquement pour la démo */
body {background: lightgray; padding: 5px;}
</style>
<button class="su-navigation-button su-inside su-left su-disabled" data-suswipeprev><i class="su-icon">gauche</i></button>
<button class="su-navigation-button su-inside su-right su-disabled" data-suswipenext><i class="su-icon">droite</i></button>
<button class="su-navigation-button su-outside su-left su-disabled" data-suswipeprev><i class="su-icon">gauche</i></button>
<button class="su-navigation-button su-outside su-right su-disabled" data-suswipenext><i class="su-icon">droite</i></button>
Sur fond sombre
Sur fond sombre, ajouter la classe su-negative
sur un parent.
<div class="su-negative">
<button class="su-navigation-button su-inside su-left" data-suswipeprev><i class="su-icon">gauche</i></button>
<button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
<button class="su-navigation-button su-outside su-left" data-suswipeprev><i class="su-icon">gauche</i></button>
<button class="su-navigation-button su-outside su-right" data-suswipenext><i class="su-icon">droite</i></button>
</div>
Liste des classes disponibles
su-navigation-button
su-inside
su-outside
su-left
su-right
Classes annexes
su-disabled
(dépendant des Helpers (classes d’aide))su-negative
(dépendant des Helpers (classes d’aide))su-icon
(dépendant des icônes de SipaUI)