Card
Card es un Glass de fondo con el contenido en su espacio local: x = 0, y = 0 es el centro, y z = 0 ya va por delante del vidrio. No tiene layout interno: para eso están Flex y Box.
Uso
<Card width={380} height={300} x={230} z={1}>
<Text text="Título" fontSize={32} anchorX={0.5} anchorY={0.5} y={80} />
<GlassButton label="Continuar" width={200} y={-80} onclick={go} />
</Card>Referencia de props
| Prop | Tipo | Default | Rango | Descripción |
|---|---|---|---|---|
width | number | requerido | | Ancho del card en píxeles. |
height | number | requerido | | Alto del card en píxeles. |
radius | number | radius.md del tema (16) | | Radio de esquinas en píxeles. |
blur | number | el de material.surface del tema (1.5) | | Blur del fondo (frosted glass): sigma en píxeles CSS, como backdrop-filter: blur(). 0 = sin blur. |
tint | string | el de material.surface del tema ('#ffffff') | | Color de tinte CSS. |
tintOpacity | number | el de material.surface del tema (0.06) | 0..1 | Opacidad del tinte. |
rim | number | el de material.surface del tema (0.24, el equivalente del fresnelStrength 0.06 anterior) | | Stroke de canto con sesgo hacia la luz global (rim de <Glass>). |
x | number | — | | Posición X del centro del card. |
y | number | — | | Posición Y del centro del card. |
z | number | — | | z de mundo del vidrio (su nivel de captura). El contenido va en z + 0.01 de mundo con z = 0 local: queda por delante del vidrio sin pedirlo. |
children | Snippet | — | | Contenido del card, en su espacio local: x = 0, y = 0 es el centro del card y z = 0 ya va por delante del vidrio (children de <Glass>). Card no hace layout interno: para eso, envolver el contenido en <Flex>/<Box>. Un <GlassButton> con z = 0 adentro es un nivel de captura más (z + 0.01 de mundo) y refracta al card. |