Fullscreen button (Bouton plein écran)

Les boutons « plein écran » sont placés sur une image et permettent d’afficher cette même image en plein écran. Cette action est accessible par le tap ou le clic.

Usage

Le bouton plein écran est généralement intégré sur l’image principale d’un article au sein du détail article.
Il permet d’afficher l’image en plein écran et non rognée, généralement avec un voile et une croix de fermeture.

Style & code

Dépendances :

Ce composant est un simili-bouton qui peut être positionné sur une photo d’un détail article (il ne peut être utilisé dans une liste d’articles) pour pouvoir agrandir cette photo, seule ou dans un diaporama. Le clic / tap ouvre donc la photo en plein écran, avec un voile et une croix de fermeture, plus, le cas échéant, la navigation du diaporama. On parle de simili-bouton parce que sa zone de clic est beaucoup plus grande que le bouton lui-même, puisque toute la surface de la photo est cliquable.

Il existe 2 boutons : un pour l’agrandissement d’une photo et un pour les diaporama.

Base

Pour insérer ces boutons il suffit d’un <span> avec une de ces deux classes :

  • su-button-fullscreen
  • su-button-slideshow

Dans ce span, on ajoute un texte pour le rendre accessible, c’est-à-dire pour que les lecteurs d’écran apportent aux déficients visuels l’information liée à cette icône. Ce qui donne : <span class="su-button-fullscreen">Voir en plein écran</span>.

N. B. – Ces icônes se positionnent en absolu par rapport au parent, il faut donc que ce parent ait une position relative. Le parent indiqué pour ces icônes est un élément avec la classe d’image su-media-container qui possède cette position relative. Si vous devez utiliser un autre type de parent lui ajouter la classe su-relative disponible dans les Helpers (classes d’aide).

<div class="su-media-container" style="height: 90px; background: var(--gris); margin-bottom: var(--marge-s)">
    <button class="su-button-fullscreen"><span>Voir en plein écran</span></button>
</div>
<div class="su-media-container" style="height: 90px; background: var(--gris); margin-bottom: var(--marge-s)">
    <button class="su-button-slideshow"><span>Ouvrir le diaporama</span></button>
</div>

Mise en situation

<div class="su-row">
    <div class="su-col-lg-12 su-media-container">
        <figure>
            <div class="su-ratio-16-7 su-main-picture">
                <img class="su-media" alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
            </div>
            <figcaption>Golf du Morbihan.</figcaption>
        </figure>
        <button class="su-button-fullscreen"><span>Voir en plein écran</span></button>
    </div>
</div>

Liste des classes disponibles

  • su-button-fullscreen
  • su-button-slideshow

Classes annexes

Le code a bien été copié !