# Freya Extension - Showcase Complet

Démonstration complète de tous les composants composites Freya Extension. Cette page suit strictement les patterns et le style du showcase officiel PrimeFaces Freya.

## Composants de Formulaire (Field Pattern)

##### fr:fieldInput

Champ de saisie texte avec label et message de validation

##### fr:fieldTextarea

Champ de saisie multiligne pour texte long

##### fr:fieldPassword

Champ mot de passe avec indicateur de force

##### fr:fieldSelect

Liste déroulante avec filtrage

##### fr:fieldCalendar

Sélecteur de date avec icône calendrier

##### fr:fieldNumber

Champ numérique avec symbole et décimales

##### fr:fieldCheckbox

Case à cocher avec label

##### fr:fieldSwitch

Interrupteur ON/OFF moderne

##### fr:fieldMultiSelect

Sélection multiple avec chips

##### fr:fieldRadio

Boutons radio pour sélection unique

##### fr:fieldToggle

Bouton bascule avec labels personnalisés

##### fr:fieldChips

Saisie de tags/mots-clés

##### fr:fieldRating

Évaluation par étoiles

##### fr:fieldColor

Sélecteur de couleur

##### fr:fieldMask

Champ avec masque de saisie

##### fr:fieldAutoComplete

Autocomplétion avec suggestions

##### fr:fieldSpinner

Spinner numérique avec min/max

##### fr:fieldSlider

Slider pour sélection de valeur

##### fr:fieldFileUpload

Upload de fichiers avec contraintes

Formats acceptés: PDF, DOC, DOCX, TXT (max 3 fichiers)

## Composants d'Action

##### Buttons - Variations et Severités

Démonstration des composants fr:button, fr:commandButton, fr:linkButton et fr:splitButton avec différentes severités

###### fr:button (Navigation)

###### fr:commandButton (Action)

###### fr:linkButton (Lien stylisé)

###### fr:splitButton (Menu déroulant)

## Composants de Layout

Contenu de la carte. Le composant fr:card permet d'encapsuler du contenu dans un container élégant avec header optionnel.

Contenu du panneau. Le composant fr:panel supporte le pliage/dépliage et la fermeture.

Cliquez sur l'icône pour plier/déplier ce panneau.

##### Dialogs - fr:actionDialog et fr:formDialog

Dialogs modaux standardisés avec boutons d'action

Ce dialog utilise le composant fr:actionDialog avec des champs fr:field* à l'intérieur.

Le composant fr:formDialog intègre un formulaire avec validation automatique.

## Composants de Navigation

##### fr:breadcrumb - Fil d'Ariane

Navigation hiérarchique

##### fr:steps - Indicateur d'étapes

Affichage de la progression dans un processus multi-étapes

##### fr:tabView - Onglets

Organisation du contenu en onglets

Premier onglet avec informations générales.

Deuxième onglet avec paramètres.

Troisième onglet avec options avancées.

## Composants de Données

##### fr:dataTable - Tableau de données

Tableau avec tri, pagination et sélection

#{user.active ? 'ACTIF' : 'INACTIF'}

Utilisateur sélectionné: #{demoBean.selectedUser.nom} (#{demoBean.selectedUser.email})

## Composants de Feedback

##### fr:message - Message d'information

Affichage de messages avec différents niveaux de sévérité

##### fr:growl - Notifications Toast

Messages toast temporaires

Les notifications growl s'affichent automatiquement lors des actions.

##### fr:inplace - Édition en place

Édition de contenu sans ouvrir de dialog

## Composants Utilitaires

##### fr:spacer - Espacement

Crée un espace vertical entre les éléments

Élément 1

Élément 2 (espacé de 2rem)

##### fr:divider - Séparateur

Ligne de séparation horizontale ou verticale

Contenu avant

Contenu après

##### fr:badge - Badge numérique

Indicateur numérique ou de statut

##### fr:avatar - Avatar utilisateur

Représentation visuelle d'un utilisateur

##### fr:tag - Étiquette

Tag de catégorisation avec couleur

##### fr:progressBar - Barre de progression

Indicateur de progression

## Composants Avancés

Les composants fr:tree, fr:fieldEditor et fr:chart sont disponibles pour des cas d'usage avancés.

fr:tree - Arbre hiérarchique avec sélection
fr:fieldEditor - Éditeur WYSIWYG pour contenu riche
fr:chart - Graphiques interactifs (bar, line, pie, etc.)
fr:treeTable - Table avec structure hiérarchique
fr:dataView - Affichage en grille/liste avec templates

##### Actions du formulaire