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 :

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.

<div style="background: lightgray; padding: 10px">
    <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>
</div>

À 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.

<div style="background: lightgray; padding: 10px">
    <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>

Inactifs

La version inactive s’obtient en ajoutant la classe su-disabled.

<div style="background: lightgray; padding: 10px">
    <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>
</div>

Sur fond sombre

Sur fond sombre, ajouter la classe su-negative sur un parent.

<div style="background: dimgray; padding: 10px" 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

Le code a bien été copié !