Composants

Composants

Boutons classiques

Boutons avec bordure

Boutons avec arrondi

Boutons avec taille

Boutons désactivés

Boutons en chargement

Boutons avec Icônes Font Awesome

Icônes à gauche

Icônes à droite

Boutons Outline

États Spéciaux avec Icônes

Boutons-Liens

Différentes tailles

Petit Moyen Grand

Liens classiques - différentes tailles

Petit lien Lien moyen Grand lien
Exemples de code :

Bouton simple :

<x-ui.button color="primary">Primary</x-ui.button>

Bouton avec bordure :

<x-ui.button color="primary" outline>Primary</x-ui.button>

Bouton avec icône :

<x-ui.button color="primary" icon="fas fa-plus" iconPosition="left">Ajouter</x-ui.button>

Bouton avec taille et arrondi :

<x-ui.button color="primary" size="lg" rounded="full">Large</x-ui.button>

Bouton désactivé :

<x-ui.button color="primary" disabled>Désactivé</x-ui.button>

Bouton en chargement :

<x-ui.button color="primary" loading>Chargement</x-ui.button>

Bouton-lien avec URL complète :

<x-ui.button color="primary" link="https://laravel.com" icon="fas fa-external-link-alt" iconPosition="right">Laravel</x-ui.button>

Bouton-lien avec ancre (ID) :

<x-ui.button color="accent" link="#section1" icon="fas fa-arrow-down" iconPosition="right">Aller à la section 1</x-ui.button>

Bouton-lien avec route Laravel :

<x-ui.button color="primary" link="welcome" icon="fas fa-home" iconPosition="left">Accueil</x-ui.button>

Bouton-lien avec target :

<x-ui.button color="primary" link="https://example.com" target="_blank" icon="fas fa-external-link-alt" iconPosition="right">Nouvel onglet</x-ui.button>

Options target disponibles :

                    _blank, _self, _parent, _top

Lien avec style classique :

<x-ui.button color="primary" link="https://example.com" link_style>Lien classique</x-ui.button>

Lien classique avec icône :

<x-ui.button color="primary" link="https://example.com" link_style icon="fas fa-external-link-alt" iconPosition="right">Lien externe</x-ui.button>

Lien classique avec target :

<x-ui.button color="primary" link="https://example.com" link_style target="_blank">Nouvel onglet</x-ui.button>

Toutes les couleurs disponibles :

                    primary, secondary, accent, success, warning, error, info, neutral

Tailles disponibles :

                    sm, md, lg

Arrondis disponibles :

                    none, sm, md, lg, full

Mode simple (un seul onglet à la fois)

Laravel est un framework PHP élégant et expressif qui facilite le développement d'applications web modernes.
Vous pouvez installer Laravel via Composer en utilisant la commande: composer create-project laravel/laravel mon-projet
Filament est un framework d'administration pour Laravel qui permet de créer des interfaces d'administration rapidement.

Mode multiple (plusieurs onglets peuvent être ouverts)

Les fonctionnalités de base incluent l'authentification, la gestion des utilisateurs, et les CRUD de base.
Les fonctionnalités avancées incluent les notifications, les exports, les imports, et l'intégration avec des APIs externes.
Vous pouvez personnaliser l'apparence, ajouter des champs personnalisés, et créer vos propres composants.

Accordion avec un seul élément

Ceci est un exemple d'accordion avec un seul élément. Parfait pour afficher des informations détaillées de manière compacte.
Ceci est un exemple d'accordion avec un seul élément ouvert par défaut. Parfait pour afficher des informations détaillées de manière compacte.

Accordion ouvert par défaut

Ce premier onglet est ouvert par défaut grâce à l'option open=true.
Ce deuxième onglet est fermé par défaut.
Ce troisième onglet est fermé par défaut.

Accordion multiple ouvert par défaut

Ce premier onglet est ouvert par défaut.
Ce deuxième onglet est fermé par défaut.
Ce troisième onglet est fermé par défaut.

Accordion avec différentes couleurs

Couleur Primary
Cet accordion utilise la couleur primary.
Tous les éléments utilisent la même couleur.
Couleur Success
Cet accordion utilise la couleur success.
Tous les éléments utilisent la même couleur.
Couleur Warning
Cet accordion utilise la couleur warning.
Tous les éléments utilisent la même couleur.
Exemples de code :

Accordion simple :

<x-ui.accordion :items="$items" />

Accordion multiple :

<x-ui.accordion :items="$items" :allowMultiple="true" />

Avec couleur :

<x-ui.accordion :items="$items" color="primary" />

Ouvert par défaut :

<x-ui.accordion :items="$items" :open="true" />

Multiple ouvert par défaut :

<x-ui.accordion :items="$items" :allowMultiple="true" :open="true" />

Structure des données :

                    $items = [
    [
        'title' => 'Titre de l\'onglet',
        'content' => 'Contenu de l\'onglet',
        'customClass' => 'bg-blue-100' // Classes personnalisées ajoutées (optionnel)
    ],
    // ... autres onglets
];

Couleurs disponibles :

                    primary, secondary, accent, success, warning, error, info, neutral

Avec classes personnalisées :

<x-ui.accordion :items="$items" color="primary" :allowMultiple="true" />

Icones Font Awesome

Simple
Light + Warning
Large + Error
Regular + Info
XL + Primary + Spin
Brand + 2XL
Success + Large
Custom Color
Voir toutes les icones disponibles
Exemples de code :

Icône simple :

<x-ui.icon name="fa-home" />

Icône avec type différent :

<x-ui.icon type="fal" name="fa-star" />

Icône avec taille :

<x-ui.icon name="fa-star" size="lg" />

Icône avec couleur prédéfinie :

<x-ui.icon name="fa-heart" color="error" />

Icône avec couleur personnalisée :

<x-ui.icon name="fa-heart" color="red-500" />

Icône avec classe personnalisée :

<x-ui.icon name="fa-user" class="animate-pulse" />

Icône dans un bouton :

<x-ui.button color="primary" icon="fas fa-plus" iconPosition="left">Ajouter</x-ui.button>

Tailles disponibles :

                xs, sm, md, lg, xl, 2xl

Types disponibles :

                fas (solid), fal (light), far (regular), fab (brands), fad (duotone)

Couleurs disponibles :

                primary, secondary, accent, success, warning, error, info, neutral, ou classes Tailwind personnalisées