Product Tour

Code de base

• • L'affichage est provoqué par la classe is-active.
• • Vous pouvez ajouter n'importe quel texte ou composant dans .product-tour-content

Avec flèche

Même display que précédemment, la flèche en plus.

• • Celle-ci se place par défaut en haut et au centre.
• • Les snippets suivant vous montrer comment modifier ce comportement.

Positionnement de la flèche

Reprenant les règles déjà connues de Trilogy, il est possible de changer le positionnement de la flèche. Par défaut, celle-ci est en haut du composant.

• • Flèche en bas : is-bottom
• • Flèche à droite : is-right
• • Flèche à gauche : is-left

Alignement de la flèche

Reprenant les règles déjà connues de Trilogy, il est possible de changer l'alignement de la flèche. Par défaut, celle-ci est centrée.

• • Flèche à 20% : is-one-fifth
• • Flèche à 25% : is-one-quarter
• • Flèche à 33% : is-one-thrid
• • Flèche à 40% : is-two-fifths
• • Flèche à 60% : is-three-fifths
• • Flèche à 66% : is-two-thirds
• • Flèche à 75% : is-three-quarters
• • Flèche à 80% : is-four-fifths

Positionnement et alignement de la flèche

Vous pouvez évidemment cumuler les règles de positionnement et d'alignement en cumulant les règles des deux snippets précédents.

Icône de fermeture

Celle-ci sera placée en haut à droite, sans possibilité de la déplacer. La classe close est impérative. De même que la taille d'icône (toutes les tailles d'icônes classiques sont utilisables).

Image / icône décorative

Vous pouvez agrémenter le composant d'une icône/image décorative (sans oublier de préciser sa taille), si nécessaire. Celle-ci peut se placer à gauche ou à droite en fonction de la classe que vous utilisez : has-icon-left ou has-icon-right.

Aperçu

Mode responsive

Exemple de titre

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

 

HTML

Copier HTML

<div class="product-tour has-icon-left is-active"> <div class="arrow"></div> <span class="icon is-medium"> <img src="https://tinyfac.es/data/avatars/475605E3-69C5-4D2B-8727-61B7BB8C4699-500w.jpeg" class="is-rounded" alt="placeholder rounded decorative"> </span> <button class="icon close is-small" aria-label="close"> <i class="tri-times" aria-hidden="true"></i> </button> <div class="product-tour-content"> <p class="suptitle">Exemple de titre</p> <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div>

Liens de navigation

Dans le cas d'un step-by-step interactif, des liens Pécédent et Suivant seront nécessaires et peuvent être ajoutés comme suit.

Aperçu

Mode responsive

Exemple de titre

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Précédent

Suivant

 

HTML

Copier HTML

<div class="product-tour has-icon-left is-active"> <div class="arrow"></div> <span class="icon is-medium"> <img src="https://tinyfac.es/data/avatars/475605E3-69C5-4D2B-8727-61B7BB8C4699-500w.jpeg" class="is-rounded" alt="placeholder rounded decorative"> </span> <button class="icon close is-small" aria-label="close"> <i class="tri-times" aria-hidden="true"></i> </button> <div class="product-tour-content"> <p class="suptitle">Exemple de titre</p> <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <div class="columns is-mobile is-centered"> <div class="column is-6 has-text-left"> <a class="link">Précédent</a> </div> <div class="column is-6 has-text-right"> <a class="link">Suivant</a> </div> </div> </div> </div>