Fournisseurs et primitives pour les surfaces en verre CSS/SVG.
Cette API de bas niveau est expérimentale. Installez-la directement pour créer vos surfaces ou utiliser les fournisseurs hors de @liquidify/react :
pnpm add @liquidify/glassSi vous ne chargez pas la feuille de styles complète de React, importez le CSS du moteur :
import "@liquidify/glass/glass.css"Theme, Material et Backdrop : valeurs locales d’environnement.IncreaseContrast et LiquidTokenProvider : contraste et personnalisation des tokens.GlassPrimitive : élément en verre polymorphe.useGlass : classes, attributs de données et props de style pour votre surface.import { GlassPrimitive, Material, Theme } from "@liquidify/glass"
import "@liquidify/glass/glass.css"
export function CustomPanel({ children }: { children: React.ReactNode }) {
return (
<Theme type="system">
<Material default="frosted">
<GlassPrimitive as="section" aria-label="Account summary">
{children}
</GlassPrimitive>
</Material>
</Theme>
)
}GlassPrimitive utilise div par défaut. as adapte les props natives et le type de ref. Les fournisseurs sont facultatifs ; le moteur monte les filtres partagés sur le client. Un fournisseur Material explicite délimite sa configuration.
material-tokens.css contient des variables générées pour la composition avancée. Utilisez glass.css, sauf si vous configurez directement le moteur.