Uso

Empieza con Edge.Provider y Edge.Surface. Usa useSurface para conectar directamente un componente existente.

Conectar un área

Completa primero la Instalación. Si tu framework usa Componentes de Servidor, usa Edge en un módulo cliente con la directiva "use client".

Envuelve el área con Edge.Provider y usa Edge.Surface solo en los elementos que deban responder. Las dos tarjetas comparten una luz. Cada Edge.Provider anidado crea una luz independiente.

Tarjeta de ejemplo

Ambas tarjetas responden a la misma luz.

Otra tarjeta de ejemplo

Ambas tarjetas responden a la misma luz.

Una luz, tus componentes

<Edge.Provider>
  <Edge.Surface>Example card</Edge.Surface>
  <Edge.Surface>Another example card</Edge.Surface>
</Edge.Provider>

El ejemplo es interactivo al activar JavaScript.

Una luz, tus componentes

<Edge.Provider>
  <Edge.Surface>Example card</Edge.Surface>
  <Edge.Surface>Another example card</Edge.Surface>
</Edge.Provider>

Conservar estilos y eventos

Elige la etiqueta HTML con as. Puedes usar sus atributos, eventos y refs nativos, y aplicar tus estilos mediante className y style. Edge.Provider no añade elementos DOM; cada Edge.Surface renderiza un elemento.

Composición de estilos

<Edge.Surface as="button" type="button" onClick={handleExampleClick}>
  Example button
</Edge.Surface>

Los elementos input necesitan un contenedor. Si hay conflictos con la decoración existente, consulta Consideraciones de integración. Configura la apariencia en Estilo y el movimiento en Movimiento.

Conectar un componente existente

Si Card o Button ya renderiza su propio elemento HTML, llama a useSurface(options) dentro del componente y asigna el ref devuelto a ese elemento. Mantén el componente dentro de Edge.Provider. En React 18, reenvía el ref mediante forwardRef.

Si cambia la posición del elemento, consulta actualizaciones de diseño.