retour

Storybook

Boutons

Typographie

Titre niveau 1 - Le plus grand titre

Titre niveau 2 - Sous-titre principal

Titre niveau 3 - Titre de section

Titre niveau 4 - Sous-section

Titre niveau 5 - Petit titre
Titre niveau 6 - Le plus petit titre

Alertes

Information
Opération réussie
Attention
Erreur critique

Badges

Nouveau
Validé
En attente
Refusé

Modales / panels


<button data-modal-target="confirmDeleteModal"
             data-modal-toggle="confirmDeleteModal"
             class="btn-primary"
             type="button">
      Modale
</button>
<twig:Modal id="confirmDeleteModal">
    <twig:block name="modal_header">
        <h3 class="text-xl font-semibold text-gray-900">
            Ouverture de la Modale
        </h3>
    </twig:block>

    <twig:block name="modal_body">
        <p class="text-base leading-relaxed text-gray-500">
            🥳 Bravo vous avez ouvert la Modale avec succés !
        </p>
    </twig:block>

    <twig:block name="modal_footer">
        <button data-modal-hide="confirmDeleteModal"
                                    type="button"
                class="btn-outline">
            Retour
        </button>
        <button data-modal-hide="confirmDeleteModal"
                   id="confirmDeleteButton" type="button"
                   class="btn-primary">
            Merci
        </button>
    </twig:block>
</twig:Modal>

<button data-drawer-target="monDrawer"
        data-drawer-show="monDrawer"
        data-drawer-placement="right"
        class="btn-secondary">
    Ouvrir le panneau
</button>

<twig:Panel id="monDrawer" title="Mon Panneau Latéral" width="w-1/3">
    <twig:block name="content">
        <p class="mb-6 text-sm text-gray-500">
            On peut appeler ceci un drawer
            <a href="#" class="text-primary-600 underline font-medium">
                exemple de lien
            </a>
            reste du texte
        </p>
    </twig:block>
</twig:Panel>

Tableau

Product name Category Brand Description Price Actions
MacBook pro 3 PC Apple 300 $2999 
                
<div class="mx-auto max-w-screen-xl px-4 lg:px-12">
    <div class="table-container">
        <!-- Barre de recherche et boutons -->
        <div class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
            <div class="w-full md:w-1/2">
                <form class="flex items-center">
                    <div class="relative w-full">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <twig:ux:icon name="lucide:search" height="20" width="20"/>
                        </div>
                        <input type="text" class="table-search" placeholder="Search" required="">
                    </div>
                </form>
            </div>
            <div class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0
                    items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
                <button type="button" class="btn-primary">
                    <twig:ux:icon name="lucide:plus" height="14" width="14" class="mr-2"/>
                    Add product
                </button>
                <div class="flex items-center space-x-3 w-full md:w-auto">
                    <button id="actionsDropdownButton" class="btn-secondary flex">
                        Actions
                    </button>
                    <button id="filterDropdownButton" class="btn-outline flex items-center">
                        Filter
                    </button>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="table">
                <thead>
                <tr>
                    <th>Product name</th>
                    <th>Category</th>
                    <th>Brand</th>
                    <th>Description</th>
                    <th>Price</th>
                    <th><span class="sr-only">Actions</span></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>MacBook pro 3</th>
                    <td>PC</td>
                    <td>Apple</td>
                    <td>300</td>
                    <td>$2999</td>
                    <td class="flex items-center justify-end">
                        <button class="table-dropdown">
                            <twig:ux:icon name="lucide:more-horizontal" height="20" width="20"/>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <nav class="flex flex-col md:flex-row justify-between items-start md:items-center space-y-3 md:space-y-0 p-4">
            <span class="text-sm text-gray-500">
                Showing <span class="font-semibold">1-10</span> of <span class="font-semibold">1000</span>
            </span>
            <ul class="inline-flex items-stretch -space-x-px">
                <li>
                    <a href="#" class="table-pagination table-pagination-rounded-l">
                        <twig:ux:icon name="lucide:chevron-left" height="20" width="20"/>
                    </a>
                </li>
                <li>
                    <a href="#" class="table-pagination table-pagination-rounded-r">
                        <twig:ux:icon name="lucide:chevron-right" height="20" width="20"/>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>