7. Les éléments d'écran
Tout ce qu'il faut pour un site complet, sans rien installer.
page "produit" :
variable note = 3
variable quantite = 1
variable envoi = 40
calcul total = quantite * 24
titre "Lampe de bureau"
ligne :
icone "panier" avec taille grande et description "Panier"
badge "Nouveau" avec fond vert
avatar "Camille Martin"
etoiles note avec modifiable
compteur quantite avec minimum 1 et maximum 10 et description "Quantité"
texte "Total : {total en euros}"
progression envoi avec pourcentage et maximum 100
chargement "Chargement des avis…"
code qr "https://exemple.fr/lampe" avec taille petite et description "Lien vers ce produit"
bouton "Ajouter au panier" avec icone "plus"Onglets, menus dépliants et carrousel
page "aide" :
titre "Aide"
onglets :
onglet "Livraison" avec icone "document" :
texte "Livraison en trois jours ouvrés."
onglet "Retours" :
texte "Trente jours pour changer d'avis."
deroulant "Comment commander ?" :
texte "Ajoute un produit au panier, puis valide."
accordeon :
deroulant "Annulation" avec ouvert :
texte "Jusqu'à 24 heures avant l'envoi."
deroulant "Paiement" :
texte "Par carte ou par virement."
carrousel avec automatique 5 et visibles 1 :
image "salle.jpg" avec description "La salle du restaurant"
image "terrasse.jpg" avec description "La terrasse"Le fil d'Ariane et le menu
page "accueil" :
menu :
lien "Accueil" vers "accueil"
lien "La carte" vers "carte"
titre "Accueil"
page "carte" :
fil d'Ariane :
lien "Accueil" vers "accueil"
texte "La carte"
titre "La carte"Dans un menu, le lien de la page où l'on est est marqué comme actif. Les liens d'un menu passent à la ligne quand la place manque. Un menu vertical : range ses liens en colonne, sans jamais ouvrir une deuxième colonne : un sommaire de hauteur limitée défile. Il se combine avec repliable (menu vertical repliable :).
page "guide" :
titre "Le guide"
menu vertical :
lien "Installer" vers "guide"
lien "Les pages" vers "guide"Un menu repliable : se range derrière un bouton burger (nommé « Menu » pour les lecteurs d'écran) sur un petit écran (téléphone) ; l'icône devient une croix quand le menu est ouvert. Un lien choisi, un toucher à côté ou la touche Échap referment le menu. Sur grand écran, il reste ouvert :
page "accueil" :
menu repliable :
lien "Accueil" vers "accueil"
lien "La carte" vers "accueil"
lien "Réserver" vers "accueil"
titre "Accueil"