Snippet Accordions Materiel Design 2026 23040042

Élévation

inventory_2 Collection Surface expand_more

Les surfaces élevées créent une hiérarchie visuelle naturelle. Ombre douce et profondeur subtile.

layers Niveaux d'élévation expand_more

Material Design définit 5 niveaux d'élévation pour organiser l'interface utilisateur.

shadow Système d'ombres expand_more

Les ombres sont calculées dynamiquement pour simuler l'éclairage naturel.

Outline

crop_free Contours précis expand_more

Style épuré avec bordures définies. Idéal pour les interfaces denses en informations.

border_color États interactifs expand_more

Les bordures changent de couleur au survol et à la sélection pour un feedback clair.

Filled

square Surface pleine expand_more

Arrière-plan solide avec couleur primaire. Fort contraste pour une lisibilité maximale.

opacity Opacité contrôlée expand_more

Variations d'opacité pour les états hover, focus et pressed selon Material 3.

Tonal

palette Couleur tonale expand_more

Utilisation de la palette secondaire avec une faible saturation pour un look doux.

blender Harmonie visuelle expand_more

S'intègre parfaitement avec d'autres composants sans créer de conflit visuel.

Dynamic

auto_awesome Material You Nouveau expand_more

Couleurs générées dynamiquement à partir du fond d'écran de l'utilisateur (Android 12+).

color_lens Schémas adaptatifs expand_more

Adaptation automatique au thème système (clair/sombre) avec transitions fluides.

Surface

dashboard Surface Container expand_more

Conteneur de surface Material 3 avec couleur de fond légèrement teintée.

invert_colors Teinte de surface expand_more

Mélange subtil de la couleur primaire dans le fond pour une cohérence visuelle.

Inverse

dark_mode Surface sombre expand_more

Version inverse pour les thèmes sombres. Contraste optimisé pour la lisibilité.

contrast Contraste élevé expand_more

Conforme aux normes d'accessibilité WCAG AAA pour le contraste des couleurs.

Gradient

gradient Dégradé subtil expand_more

Dégradés légers pour ajouter de la profondeur sans compromettre la lisibilité.

water_drop Fluidité visuelle expand_more

Transitions de couleurs fluides pour une expérience utilisateur apaisante.

Minimal

minimize Réduction maximale expand_more

Uniquement l'essentiel. Séparateurs fins et espacement généreux.

vertical_align_center Lisibilité pure expand_more

Aucune distraction visuelle. Focus total sur le contenu textuel.

Playful

celebration Ludique & Joyeux expand_more

Design arrondi et asymétrique pour une expérience plus décontractée et amusante.

toys Approche créative expand_more

Parfait pour les applications éducatives, enfants ou créatives. Couleurs vives.

emoji_emotions Émotion positive expand_more

L'interface peut exprimer de la personnalité tout en restant fonctionnelle.

component_exchange

Composants Material Web natifs

<md-list> accordéon

Paramètres de confidentialité Gérez vos données personnelles

expand_more

Notifications Personnalisez vos alertes