Les composants
+ +-
+
- Les titres +
- Les grilles +
- Les boutons +
- Les formulaires +
- Les modales +
- Les boites +
- Les messages flash +
- Les notifications +
- Les icônes +
- Les listes +
- Les paginations +
- Les barres de navigation +
Les titres
+Titre de niveau 1
+Titre de niveau 2
+Titre de niveau 3
+Titre de niveau 4
+Titre de niveau 5
+Titre de niveau 6
+ +Les grilles
++ Se référer à la documentation de Knacss. +
+ +Les boutons
+ + + + + + + +Les formulaires
++<div class="field"> + <label for="email">Adresse e-mail</label> + <input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr"> +</div> ++
+<div class="field"> + <label for="message">Message*</label> + <textarea name="message" id="message" rows="6" required ></textarea> +</div> ++
+<div class="field"> +<label for="sortOrder">Trier par</label> +<select id="sortOrder"> + <option value="artists_sort-asc">Artiste (A-Z)</option> + <option value="artists_sort-desc">Artiste (Z-A)</option> + <option value="year-asc">Année (A-Z)</option> + <option value="year-desc">Année (Z-A)</option> + <option value="country-asc">Pays (A-Z)</option> + <option value="country-desc">Pays (Z-A)</option> + <option value="formats.name-asc">Format (A-Z)</option> + <option value="formats.name-desc">Format (Z-A)</option> +</select> +</div> ++
+<div class="field"> + <label for="choix1">choix 1</label> + <input type="radio" id="choix1" name="choix" value="choix1" checked> + <label for="choix2">choix 2</label> + <input type="radio" id="choix2" name="choix" value="choix2"> +</div> ++
+<div class="field"> + <label for="checkbox1">choix 1</label> + <input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked> + <label for="checkbox2">choix 2</label> + <input type="checkbox" id="checkbox2" name="checkbox" value="checkbox2"> +</div> ++ +
Les modales
+ ++<div class="modal" :class="{'is-visible': showModal}"> + <div class="modal-background"></div> + <div class="modal-card"> + <header>Titre</header> + <section> + Ceci est une modale + </section> + <footer> + <button class="button is-primary" @click="toggleModal">Ok</button> + <button class="button" @click="toggleModal">Annuler</button> + </footer> + </div> +</div> ++ +
Les boites
++<div class="box"> + Contenu +</div> ++ +
Les messages flash
++<div class="flash"> + <div class="header"> + Erreur + </div> + <div class="body"> + Ceci est une erreur + </div> +</div> ++ +
Les notifications
+ ++<button + type="button" + class="button is-primary" + onclick="showToastr('Ceci est une notification');" +> + Afficher une notification +</button> + +<div id="toastr"> + <button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"></button> + <span></span> +</div> ++ +
Les icônes
+ .icon-plus + .icon-user + .icon-search + .icon-mail + .icon-link + .icon-link-ext + .icon-heart + .icon-eye + .icon-spin + .icon-sun + .icon-moon + .icon-trash + .icon-blind + +Les listes
++<div class="grid grid-cols-1 md:grid-cols-2 list"> + <div class="item"> + Contenu + </div> +</div> ++ +
Les paginations
+ ++<nav class="pagination" role="navigation" aria-label="Pagination"> + <ul class="pagination-list"> + <li><a class="pagination-link is-current" aria-label="Aller à la page 1">1</a></li> + <li><a class="pagination-link" aria-label="Aller à la page 2">2</a></li> + <li><a class="pagination-link is-disabled">…</a></li> + <li><a class="pagination-link" aria-label="Aller à la page 11">11</a></li> + </ul> +</nav> ++ +
Les barres de navigation
++<nav class="navbar" aria-label="Navigation principale"> + <div class="navbar-brand"> + <a class="navbar-item" href="/"> + <img src="/img/logo.png" alt="Logo My Music Library"> + <span>My Music Library</span> + </a> + + <a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar"> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + </a> + </div> + + <div id="navbar" class="navbar-menu"> + <div class="navbar-start"> + <div class="navbar-item"> + <div class="buttons"> + <a class="button is-primary" href="/ajouter-un-album"> + <i class="icon-plus"></i> + <span> + Ajouter un album + </span> + </a> + </div> + </div> + </div> + + <div class="navbar-end"> + <a class="navbar-item" href="/nous-contacter"> + Nous contacter + </a> + <div class="navbar-item has-dropdown"> + <a class="navbar-link"> + <i class="icon-user"></i> + <span> + <%= user.username %> + </span> + </a> + + <div class="navbar-dropdown"> + <a class="navbar-item" href="/ma-collection"> + Ma collection + </a> + </div> + </div> + <div class="navbar-item apparence"> + <div class="theme-switch-wrapper"> + <label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement"> + <input type="checkbox" id="checkbox" /> + <div class="slider round"></div> + </label> + </div> + </div> + <div class="navbar-item"> + <div class="buttons"> + <button type="button" class="button is-primary" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site"> + <i class="icon-eye"></i> + </button> + <a class="button is-danger" href="/se-deconnecter"> + Déconnexion + </a> + </div> + </div> + </div> + </div> +</nav> ++