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

Les listes

{{ item.title }}

{{ item.lorem }}

<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 MusicTopus">
            <span>MusicTopus</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>