Créez une surface sémantique avec le paquet de matériaux.
Utilisez GlassPrimitive si le catalogue ne propose pas l’élément sémantique nécessaire.
import { Backdrop, GlassPrimitive, Material } from "@liquidify/glass"
import "@liquidify/glass/glass.css"
export function WeatherSummary() {
return (
<Material default="frosted">
<Backdrop type="low">
<GlassPrimitive as="article" aria-labelledby="weather-title">
<h2 id="weather-title">Today</h2>
<p>Clear, 24°C</p>
</GlassPrimitive>
</Backdrop>
</Material>
)
}as détermine la sémantique ; les props de matériau déterminent l’apparence. Ajoutez la mise en page via des classes et des tokens publics, sans importer les fichiers internes du moteur.