Configurez le thème, le matériau, l’arrière-plan, le contraste et les tokens.
Définissez les valeurs générales avec des fournisseurs. Utilisez une prop locale lorsqu’une surface nécessite un traitement différent :
import {
Backdrop,
IncreaseContrast,
LiquidTokenProvider,
Material,
Theme,
} from "@liquidify/glass"
import "@liquidify/glass/glass.css"
export function ProductEnvironment({ children }: { children: React.ReactNode }) {
return (
<Theme type="system">
<Material default="regular">
<Backdrop type="low">
<IncreaseContrast level="auto">
<LiquidTokenProvider tokens={{ "--lq-color-accent": "#5b5bd6" }}>
{children}
</LiquidTokenProvider>
</IncreaseContrast>
</Backdrop>
</Material>
</Theme>
)
}Utilisez frosted pour les arrière-plans complexes ou le texte nécessitant plus de séparation, regular pour les interfaces courantes et clear pour les arrière-plans calmes qui restent lisibles.
<Material default="regular">
<GlassPrimitive as="nav">…</GlassPrimitive>
<GlassPrimitive as="aside" material="frosted">…</GlassPrimitive>
</Material>La prop material du composant a priorité sur le fournisseur.
Backdrop ne dessine pas d’arrière-plan. Il indique la fréquence de changement du contenu existant :
static : contenu fixe.low : interfaces courantes.high : vidéo ou animation continue.Limitez high à la région qui en a besoin.