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

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

Fieldset

x-ui.forms.fieldset

Composant pour regrouper logiquement plusieurs champs de formulaire avec un titre et une description, en s’appuyant sur le fieldset daisyUI.

Exemple simple

Informations de base

Titre

Entre 3 et 255 caractères.

Slug

Ces champs sont requis pour créer l’élément.

Code :

<x-ui.forms.fieldset
    legend="Informations de base"
    description="Ces champs sont requis pour créer l’élément."
>
    <x-ui.forms.label text="Titre" for="title">
        <x-ui.forms.input name="title" placeholder="Titre…" class="w-full" />
        <x-ui.forms.validator hint="Entre 3 et 255 caractères." />
    </x-ui.forms.label>

    <x-ui.forms.label text="Slug" for="slug">
        <x-ui.forms.input name="slug" placeholder="slug-exemple" class="w-full" />
    </x-ui.forms.label>
</x-ui.forms.fieldset>

Slots & layout personnalisé

Profil utilisateur

Prénom

Nom

Email

Adresse email invalide

Regroupe les champs liés à l’identité de l’utilisateur.

Code :

<x-ui.forms.fieldset
    fieldsetClass="w-full"
    contentClass="grid md:grid-cols-2 gap-4"
>
    <x-slot:legendSlot>
        <span class="flex items-center gap-2">
            <x-ui.icon name="heroicon-o-user" class="w-4 h-4 text-primary" />
            <span>Profil utilisateur</span>
        </span>
    </x-slot:legendSlot>

    <x-slot:descriptionSlot>
        <span class="text-sm text-neutral-500">
            Regroupe les champs liés à l’identité de l’utilisateur.
        </span>
    </x-slot:descriptionSlot>

    <x-ui.forms.label text="Prénom" for="first_name">
        <x-ui.forms.input name="first_name" placeholder="Jane" class="w-full" />
    </x-ui.forms.label>

    <x-ui.forms.label text="Nom" for="last_name">
        <x-ui.forms.input name="last_name" placeholder="Doe" class="w-full" />
    </x-ui.forms.label>

    <div class="md:col-span-2">
        <x-ui.forms.label text="Email" for="email">
            <x-ui.forms.input name="email" type="email" placeholder="jane.doe@example.com" class="w-full" />
            <x-ui.forms.validator :error="$errors->first('email')" />
        </x-ui.forms.label>
    </div>
</x-ui.forms.fieldset>

Input

x-ui.forms.input

Champ de saisie texte basé sur le composant input de daisyUI, avec gestion intégrée des tailles, couleurs, erreurs et accessibilité.

Exemple simple

Titre

Code :

<x-ui.forms.label text="Titre" for="title">
    <x-ui.forms.input
        name="title"
        placeholder="Mon super titre"
        class="w-full"
    />
</x-ui.forms.label>

Tailles, couleurs & erreurs

Email (sm, secondary)

Nous ne partagerons jamais votre email.

Email (lg, primary, erreur)

Adresse email invalide

Code :

<x-ui.forms.label text="Email" for="email">
    <x-ui.forms.input
        name="email"
        type="email"
        size="lg"
        color="primary"
        placeholder="vous@example.com"
        class="w-full"
    />
    <x-ui.forms.validator name="email" :error="$errors->first('email')" />
</x-ui.forms.label>

Variantes (ghost, couleurs, disabled)

Recherche (ghost)

Nom (accent, md)

Champ désactivé

Ce champ est en lecture seule.

Code :

<x-ui.forms.label text="Recherche" for="search">
    <x-ui.forms.input name="search" ghost="true" placeholder="Rechercher…" class="w-full" />
</x-ui.forms.label>

<x-ui.forms.label text="Email" for="email">
    <x-ui.forms.input name="email" type="email" size="lg" color="primary" class="w-full" />
    <x-ui.forms.validator :error="$errors->first('email')" />
</x-ui.forms.label>

Textarea

x-ui.forms.textarea

Zone de texte multi-lignes basée sur le composant textarea de daisyUI, avec support des tailles, couleurs, erreurs et intégration Livewire.

Exemple simple

Description

Code :

<x-ui.forms.label text="Description" for="description">
    <x-ui.forms.textarea
        name="description"
        rows="4"
        placeholder="Décrivez votre demande…"
        class="w-full"
    ></x-ui.forms.textarea>
</x-ui.forms.label>

Tailles, couleurs & erreurs

Notes internes (sm, secondary)

Astuce : utilise des puces pour structurer.

Description détaillée (erreur)

La description détaillée est requise

Code :

<x-ui.forms.label text="Description" for="description">
    <x-ui.forms.textarea
        name="description"
        rows="6"
        placeholder="Détaillez votre feedback…"
        class="w-full"
    ></x-ui.forms.textarea>
    <x-ui.forms.validator name="description" :error="$errors->first('description')" />
</x-ui.forms.label>

Variantes (ghost, tailles, info)

Commentaire (ghost)

Contexte (lg, info)

Plus il y a de contexte, plus c’est facile à reproduire.

Code :

<x-ui.forms.label text="Commentaire" for="comment">
    <x-ui.forms.textarea name="comment" ghost="true" rows="3" class="w-full"></x-ui.forms.textarea>
</x-ui.forms.label>

<x-ui.forms.label text="Description" for="description">
    <x-ui.forms.textarea name="description" rows="6" class="w-full"></x-ui.forms.textarea>
    <x-ui.forms.validator name="description" :error="$errors->first('description')" />
</x-ui.forms.label>

Select

x-ui.forms.select

Liste déroulante basée sur le composant select de daisyUI, avec support des tailles, couleurs, erreurs et intégration avec Livewire.

Exemple simple

Type de feedback

Code :

<x-ui.forms.label text="Type de feedback" for="type">
    <x-ui.forms.select name="type" class="w-full">
        <option value="">Sélectionnez un type…</option>
        <option value="bug">Bug</option>
        <option value="idea">Idée</option>
        <option value="question">Question</option>
    </x-ui.forms.select>
</x-ui.forms.label>

Tailles, couleurs & erreurs

Priorité (md, secondary)

Statut (erreur)

La sélection est obligatoire

Code :

<x-ui.forms.label text="Priorité" for="priority">
    <x-ui.forms.select
        name="priority"
        size="md"
        color="secondary"
        class="w-full"
    >
        <option value="low">Basse</option>
        <option value="medium">Moyenne</option>
        <option value="high">Haute</option>
    </x-ui.forms.select>
</x-ui.forms.label>

Range

x-ui.forms.range

Curseur de sélection numérique basé sur le composant range de daisyUI, avec support des tailles, couleurs, erreurs et attributs min, max, step.

Exemple simple

Volume (0–100)

Code :

<x-ui.forms.label text="Volume (0–100)" for="volume">
    <x-ui.forms.range
        name="volume"
        min="0"
        max="100"
        :value="50"
        class="w-full"
    />
</x-ui.forms.label>

Tailles, couleurs & erreurs

Niveau (sm, secondary)

Satisfaction (lg, accent)

Range avec erreur

Veuillez choisir une valeur

Code :

<x-ui.forms.range
    name="level"
    min="0"
    max="10"
    step="1"
    size="sm"
    color="secondary"
    :value="5"
    class="w-full"
/>

<x-ui.forms.range
    name="satisfaction"
    min="0"
    max="100"
    size="lg"
    color="accent"
    :value="75"
    class="w-full"
/>

Toggle

x-ui.forms.toggle

Interrupteur (switch) basé sur <input type="checkbox"> stylé avec le composant toggle de daisyUI. Compatible wire:model et x-model. Support des tailles (xs, sm, md, lg, xl) et des couleurs.

Exemple simple

Activer les notifications

Code :

<x-ui.forms.label text="Activer les notifications" for="notif">
    <x-ui.forms.toggle name="notif" />
</x-ui.forms.label>

Tailles & couleurs

sm, primary

md, secondary

lg, accent

Code :

<x-ui.forms.toggle name="opt" size="sm" color="primary" />
<x-ui.forms.toggle name="opt" size="md" color="secondary" />
<x-ui.forms.toggle name="opt" size="lg" color="accent" />

Checkbox

x-ui.forms.checkbox

Case à cocher basée sur <input type="checkbox"> stylée avec le composant checkbox de daisyUI. Compatible wire:model et x-model. Support des tailles (xs, sm, md, lg, xl) et des couleurs.

Exemple simple

Se souvenir de moi

Code :

<div class="flex items-center gap-2">
    <x-ui.forms.checkbox name="remember" />
    <label for="remember" class="cursor-pointer">Se souvenir de moi</label>
</div>

Tailles & couleurs

sm, primary

md, secondary

lg, accent

Code :

<x-ui.forms.checkbox name="opt" size="sm" color="primary" />
<x-ui.forms.checkbox name="opt" size="md" color="secondary" />
<x-ui.forms.checkbox name="opt" size="lg" color="accent" />

Radio

x-ui.forms.radio

Bouton radio basé sur <input type="radio"> stylé avec le composant radio de daisyUI. Compatible wire:model et x-model. Chaque option doit avoir le même name et un value distinct.

Groupe de choix

Choisir une option

Option A

Option B

Option C

Code :

<x-ui.forms.radio name="choice" value="a" />
<label for="choice-a">Option A</label>
<x-ui.forms.radio name="choice" value="b" />
<label for="choice-b">Option B</label>

Tailles & couleurs

sm (primary), md (secondary), lg (accent)

Code :

<x-ui.forms.radio name="size" value="1" size="sm" color="primary" />
<x-ui.forms.radio name="size" value="2" size="md" color="secondary" />
<x-ui.forms.radio name="size" value="3" size="lg" color="accent" />

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

Dropdown simple

Profil Paramètres Déconnexion

Dropdown avec icône

Mon profil Mes commandes Se déconnecter

Dropdown avec classes personnalisées

Créer Modifier Supprimer

Dropdown ouvert par défaut

Option 1 Option 2 Option 3

Exemples de code :

Dropdown simple :

<x-ui.dropdown>
    <x-slot:buttonSlot>
        Options
    </x-slot:buttonSlot>
    <a href="#">Profil</a>
    <a href="#">Paramètres</a>
</x-ui.dropdown>

Dropdown avec icône :

<x-ui.dropdown icon="fa-user">
    <x-slot:buttonSlot>
        Menu utilisateur
    </x-slot:buttonSlot>
    <a href="#">Mon profil</a>
</x-ui.dropdown>

Dropdown avec classes personnalisées :

<x-ui.dropdown
    addButtonClasses="bg-primary text-white"
    buttonSlot="Actions">
    <a href="#">Option 1</a>
</x-ui.dropdown>

Dropdown ouvert par défaut :

<x-ui.dropdown :open="true">
    <x-slot:buttonSlot>
        Menu
    </x-slot:buttonSlot>
    <a href="#">Option</a>
</x-ui.dropdown>

Propriétés disponibles :

open: bool (défaut: false)
addButtonClasses: string (classes CSS supplémentaires pour le bouton)
buttonClass: string (classes CSS complètes pour le bouton)
buttonSlot: slot (contenu du bouton)
icon: string (nom de l'icône Font Awesome)

Skeleton par défaut

Skeleton Avatar

Skeleton Ligne

Skeleton Bloc

Skeleton Carte

Skeleton Liste

Skeleton Aléatoire

Le type "random" génère un skeleton de type aléatoire (avatar, line, block, ou card)

Combinaisons

Exemples de code :

Skeleton par défaut :

<x-ui.skeleton />
<x-ui.skeleton width="w-64" />
<x-ui.skeleton width="w-80" height="h-40" />

Skeleton Avatar :

<x-ui.skeleton type="avatar" avatarSize="md" />
<x-ui.skeleton type="avatar" avatarSize="lg" width="w-64" />

Skeleton Ligne :

<x-ui.skeleton type="line" lines="3" width="w-64" />
<x-ui.skeleton type="line" lines="5" width="w-full" />

Skeleton Bloc :

<x-ui.skeleton type="block" width="w-64" />
<x-ui.skeleton type="block" width="w-80" height="h-40" />
<x-ui.skeleton type="block" width="w-96" rounded="false" />

Skeleton Carte :

<x-ui.skeleton type="card" width="w-64" />
<x-ui.skeleton type="card" width="w-80" />

Skeleton Liste :

<x-ui.skeleton type="list" lines="3" width="w-64" />
<x-ui.skeleton type="list" lines="5" width="w-full" />

Skeleton Aléatoire :

<x-ui.skeleton type="random" width="w-64" />

Propriétés disponibles :

type: string (default, avatar, line, block, card, list, random)
lines: int (nombre de lignes pour type 'line' ou 'list', défaut: 3)
width: string (largeur Tailwind, ex: 'w-64', 'w-full', défaut: 'w-52')
height: string (hauteur Tailwind, ex: 'h-32', 'h-40', défaut: null)
avatarSize: string (xs, sm, md, lg, xl pour type 'avatar', défaut: 'md')
rounded: bool (arrondi pour les blocs, défaut: true)

Types disponibles :

default : Affichage par défaut avec bloc et lignes
avatar : Avatar circulaire avec texte à côté
line : Lignes de texte de largeurs variables
block : Bloc avec image et texte
card : Carte complète avec image, titre, texte et boutons
list : Liste d'éléments avec avatar et texte
random : Type aléatoire parmi avatar, line, block, card

Note :

Le composant skeleton utilise la classe CSS skeleton qui doit être définie dans votre CSS. Cette classe crée une animation de chargement avec un effet de brillance.

Timeline simple

2024-01-15
Création du projet

Initialisation du projet Laravel avec toutes les dépendances nécessaires.
2024-02-20
Première version

Mise en place de l'architecture de base et des premiers modules.
2024-03-10
Déploiement

Premier déploiement en production avec succès.

Timeline avec icônes personnalisées

2024-01-15
Étape 1

Description de l'étape 1
2024-02-20
Étape 2

Description de l'étape 2
2024-03-10
Étape 3

Description de l'étape 3

Timeline avec contenu HTML

2024-01-15
Événement important

Description de base

Nouveau
2024-02-20
Mise à jour

Description de base

Voir les détails →

Exemples de code :

Timeline simple :

<x-ui.timeline :items="[
    [
        'date' => '2024-01-15',
        'title' => 'Titre',
        'description' => 'Description'
    ]
]" />

Timeline avec icône personnalisée :

<x-ui.timeline :items="[
    [
        'date' => '2024-01-15',
        'title' => 'Titre',
        'description' => 'Description',
        'icon' => '<svg...></svg>'
    ]
]" />

Timeline avec contenu HTML :

<x-ui.timeline :items="[
    [
        'date' => '2024-01-15',
        'title' => 'Titre',
        'description' => 'Description',
        'content' => '<div>Contenu HTML</div>'
    ]
]" />

Propriétés disponibles :

items: array (requis)
    - date: string (optionnel)
    - title: string (optionnel)
    - description: string (optionnel)
    - content: string (optionnel, HTML)
    - icon: string (optionnel, HTML SVG)

Note :

Le composant timeline est responsive et s'adapte automatiquement sur mobile avec un mode compact. Les éléments alternent entre gauche et droite sur desktop.

Titre simple

Titre principal

Titre avec sous-titre

Titre principal

Sous-titre descriptif

Titre avec couleurs

Titre Primary

Titre Success

Titre Warning

Titre Error

Titre Info

Titre avec différentes tailles

Titre 2xl

Titre xl

Titre lg

Titre md

Titre sm

Titre avec niveaux HTML

H1

H2

H3

H4

Titre avec classes personnalisées

Titre personnalisé

Sous-titre personnalisé

Exemples de code :

Titre simple :

<x-ui.title title="Titre principal" />

Titre avec sous-titre :

<x-ui.title
    title="Titre principal"
    subtitle="Sous-titre descriptif" />

Titre avec couleur :

<x-ui.title title="Titre" color="primary" />

Titre avec taille personnalisée :

<x-ui.title title="Titre" titleSize="2xl" />

Titre avec niveau HTML :

<x-ui.title title="Titre" levelTitle="1" />

Propriétés disponibles :

title: string (titre principal)
subtitle: string (sous-titre)
levelTitle: int (1-6, défaut: 1)
levelSubtitle: int (1-6, défaut: 2)
color: string (none, primary, secondary, accent, success, warning, error, info, neutral)
colorSubtitle: string (même que color)
titleSize: string (sm, md, lg, xl, 2xl, défaut: xl)
subtitleSize: string (sm, md, lg, xl, 2xl, défaut: lg)
classContainer: string (classes CSS pour le conteneur)
classTitle: string (classes CSS pour le titre)
classSubtitle: string (classes CSS pour le sous-titre)

Datepicker simple

Select Date

Datepicker avec différentes couleurs

Primary

Secondary

Accent

Success

Warning

Error

Datepicker avec différents formats

Format: M d, Y

Format: MM-DD-YYYY

Format: DD-MM-YYYY

Format: YYYY-MM-DD

Format: D d M, Y

Datepicker avec valeur initiale

Date avec valeur

Datepicker requis

Date requise *

Datepicker désactivé

Date désactivée

Datepicker dans un formulaire

Date de naissance *

Date de rendez-vous

Exemples de code :

Datepicker simple :

<x-ui.datepicker />

Datepicker avec couleur :

<x-ui.datepicker label="Date" color="primary" />
<x-ui.datepicker label="Date" color="secondary" />

Datepicker avec format personnalisé :

<x-ui.datepicker format="DD-MM-YYYY" />
<x-ui.datepicker format="YYYY-MM-DD" />

Datepicker avec valeur initiale :

<x-ui.datepicker value="2024-12-25" />
<x-ui.datepicker :value="\$date" />

Datepicker requis :

<x-ui.datepicker label="Date" required />

Datepicker désactivé :

<x-ui.datepicker disabled value="2024-01-15" />

Datepicker dans un formulaire :

<form method="POST" action="/submit">
        <x-ui.datepicker name="date" label="Date" required />
    <button type="submit">Envoyer</button>
</form>

Propriétés disponibles :

name: string (nom du champ, défaut: 'date')
value: string|Carbon (valeur initiale, format YYYY-MM-DD)
label: string (label du champ, défaut: 'Select Date')
placeholder: string (placeholder, défaut: 'Select date')
color: string (primary, secondary, accent, success, warning, error, info, neutral, défaut: 'primary')
format: string (M d, Y, MM-DD-YYYY, DD-MM-YYYY, YYYY-MM-DD, D d M, Y, défaut: 'M d, Y')
required: bool (champ requis, défaut: false)
disabled: bool (champ désactivé, défaut: false)
class: string (classes CSS pour le conteneur)
inputClass: string (classes CSS pour l'input)

Formats disponibles :

M d, Y : Jan 15, 2024
MM-DD-YYYY : 01-15-2024
DD-MM-YYYY : 15-01-2024
YYYY-MM-DD : 2024-01-15
D d M, Y : Mon 15 Jan, 2024

Note :

Le composant génère automatiquement un champ caché avec le nom spécifié pour la soumission de formulaire. La valeur est au format YYYY-MM-DD pour la compatibilité avec les bases de données.

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

URLs complètes

Ancres (IDs)

Routes Laravel

Différentes tailles

Différents targets

Style lien classique

Liens classiques avec icônes

Liens classiques - différentes tailles

Exemples de code :

Fieldset

Exemple simple

Slots & layout personnalisé

Input

Exemple simple

Tailles, couleurs & erreurs

Variantes (ghost, couleurs, disabled)

Textarea

Exemple simple

Tailles, couleurs & erreurs

Variantes (ghost, tailles, info)

Select

Exemple simple

Tailles, couleurs & erreurs

Range

Exemple simple

Tailles, couleurs & erreurs

Toggle

Exemple simple

Tailles & couleurs

Checkbox

Exemple simple

Tailles & couleurs

Radio

Groupe de choix

Tailles & couleurs

Mode simple (un seul onglet à la fois)

Mode multiple (plusieurs onglets peuvent être ouverts)

Accordion avec un seul élément

Accordion ouvert par défaut

Accordion multiple ouvert par défaut

Accordion avec différentes couleurs

Couleur Primary

Couleur Success

Couleur Warning

Exemples de code :

Icones Font Awesome

Exemples de code :

Dropdown simple

Dropdown avec icône

Dropdown avec classes personnalisées

Dropdown ouvert par défaut

Exemples de code :

Skeleton par défaut

Skeleton Avatar

Skeleton Ligne

Skeleton Bloc

Skeleton Carte

Skeleton Liste

Skeleton Aléatoire

Combinaisons

Exemples de code :

Timeline simple

Timeline avec icônes personnalisées

Timeline avec contenu HTML

Exemples de code :

Titre simple