Storybook

A mettre en page

Ajouter une organisation
Retour Annuler
Modifier
Supprimer
Edition organisation

Système de couleurs

Default
.bg-default
Success
.bg-success
Warning
.bg-warning
Danger
.bg-danger
Info
.bg-info
Default
.text-default
Success
.text-success
Warning
.text-warning
Danger
.text-danger
Info
.text-info

Typographie

Titre niveau 1

Titre niveau 2

Titre niveau 3

Titre niveau 4

Titre niveau 5
Titre niveau 6

Boutons

Variants de boutons

<twig:button variant="default">
    Default
</twig:button>
                    
<twig:button variant="outline">
    Outline
</twig:button>
                    
<twig:button variant="success">
    Succès
</twig:button>
                    
<twig:button variant="warning">
    Avertissement
</twig:button>
                    
<twig:button variant="danger">
    Danger
</twig:button>
                    
<twig:button variant="info">
    Info
</twig:button>

Boutons avec liens

Lien Default 
<twig:button variant="default" tag="link" attributes="{href: "#"}">
    Lien Default
</twig:button>
Lien Outline 
<twig:button variant="outline" tag="link" attributes="{href: "#"}">
    Lien Outline
</twig:button>
Lien Succès 
<twig:button variant="success" tag="link" attributes="{href: "#"}">
    Lien Succès
</twig:button>

Boutons avec icônes

<twig:button variant="default">
    <twig:block name="iconLeft">
        <svg>...</svg>
    </twig:block>
    Ajouter
</twig:button>
                    
<twig:button variant="success">
    Valider
    <twig:block name="iconRight">
        <svg>...</svg>
    </twig:block>
</twig:button>
                    
<twig:button variant="danger">
    <twig:block name="iconLeft">
        <svg>...</svg>
    </twig:block>
    Supprimer
</twig:button>

Modals

Modal simple

<twig:button variant="default" data-modal-target="simpleModal" data-modal-toggle="simpleModal">Ouvrir la modal</twig:button>
<twig:modal id="simpleModal" title="Modal simple">
    <twig:block name="modal_body">
        Contenu de la modal simple.
    </twig:block>
    <twig:block name="modal_footer">
        <twig:button variant="outline" data-modal-hide="simpleModal">Fermer</twig:button>
    </twig:block>
</twig:modal>

Modal de confirmation

<twig:button variant="danger" data-modal-target="confirmModal" data-modal-toggle="confirmModal">Supprimer</twig:button>
<twig:modal id="confirmModal" title="Confirmation de suppression">
    <twig:block name="modal_body">
        Êtes-vous sûr de vouloir supprimer cet élément?
    </twig:block>
    <twig:block name="modal_footer">
        <twig:button variant="outline" data-modal-hide="confirmModal">Annuler</twig:button>
        <twig:button variant="danger" attributes="{href: "#"}" tag="link">
            <twig:block name="iconLeft">
                <twig:ux:icon name="flowbite:trash-bin-outline" height="14" width="14"/>
            </twig:block>
            Supprimer
        </twig:button>
    </twig:block>
</twig:modal>

Composant delete-button

<twig:delete-button deleteUrl="/exemple/supprimer/123">Supprimer l'élément</twig:delete-button>

Fonctionnalités du composant delete-button

  • Génère automatiquement un ID unique pour la modal
  • Crée un bouton avec l'icône de suppression
  • Affiche une modal de confirmation
  • Le bouton de suppression dans la modal pointe vers l'URL spécifiée

Modal large

<twig:button variant="info" data-modal-target="largeModal" data-modal-toggle="largeModal">Modal large</twig:button>
<twig:modal id="largeModal" title="Modal de grande taille" large="true">
    <twig:block name="modal_body">
        Ceci est une modal de grande taille avec plus d'espace pour le contenu.
        <div class="py-4">
            Utilisez cette modal quand vous avez besoin d'afficher beaucoup d'informations 
            ou des formulaires complexes.
        </div>
    </twig:block>
    <twig:block name="modal_footer">
        <twig:button variant="outline" data-modal-hide="largeModal">Fermer</twig:button>
        <twig:button variant="info" data-modal-hide="largeModal">Valider</twig:button>
    </twig:block>
</twig:modal>

Drawers

EditButtonWithDrawer - Bouton d'édition avec drawer

Édition

Contenu du formulaire d'édition.

Vous pouvez mettre n'importe quel contenu ici.

<twig:edit-button-with-drawer
    id="edit-drawer-example"
    drawer:placement="right"
    drawer:title="Édition"
>
    Éditer
    <twig:block name="drawerContent">
        <p class="mb-6">Contenu du formulaire d'édition.</p>
        <p>Vous pouvez mettre n'importe quel contenu ici.</p>
    </twig:block>
</twig:edit-button-with-drawer>

Fonctionnalités du composant edit-button-with-drawer

  • Affiche un bouton d'édition ouvrant un drawer
  • drawer:placement pour définir de quel côté afficher le drawer : right (par défaut) ou left
  • drawer:title pour définir le titre du drawer (par défaut : null)
  • <twig:block name="drawerContent"> pour définir le contenu du drawer