Estilo
Elige cómo responde una superficie a la luz sin cambiar sus estilos base.
Comparar la respuesta del borde
Elige un estilo y mueve el puntero alrededor de la tarjeta. La configuración elegida también se aplica a las tarjetas, los bloques de código y los elementos de navegación del sitio.
Raised
Ilumina el borde orientado hacia la luz. Predeterminado.
const light = useLight();const surface = useSurface(light, { edgeStyle: "raised" });
<Card ref={surface}> Your component</Card>Valores de estilo
| Valor | Comportamiento |
|---|---|
raised | Ilumina el borde orientado hacia la luz. Predeterminado. |
recessed | Dibuja el reflejo hacia dentro, a una distancia igual al grosor del borde decorativo. Mantiene la dirección de la luz seleccionada. |
matte | Suaviza la respuesta del borde. |
Consulta las opciones adicionales en la Referencia de la API.
Raised
Usa edgeStyle: 'raised' para resaltar el borde hacia fuera.
Recessed
Usa edgeStyle: 'recessed' para dibujar el reflejo hacia dentro a una distancia igual al grosor del borde decorativo, por ejemplo en contenedores de input. Mantiene la dirección de la luz seleccionada.
Matte
Usa edgeStyle: 'matte' para un borde más suave y discreto.
Personalizar el reflejo
Cada superficie usa su propio color de texto, incluso si está anidada, y el border-radius del elemento DOM conectado. Cambia el reflejo con color y multiplica la intensidad compartida con intensity. Usa shadowColor="transparent" para quitar la sombra del borde opuesto. borderWidth cambia solo el grosor decorativo, no el borde real. Pasa las opciones a Edge.Surface; no necesitas declarar variables CSS.
El efecto simula de forma aproximada la dirección de la luz sobre rectángulos alineados con los ejes, sin reproducir una fuente de luz puntual física. Cerca del centro, la intensidad del reflejo disminuye en una región proporcional al tamaño de la superficie.
Para usar pseudoelementos existentes o contenedores de inputs, consulta Consideraciones de integración.