使い方
まず Edge.Provider と Edge.Surface を使用してください。既存のコンポーネントに直接接続する場合は useSurface を使用できます。
スタイルとイベントを維持する
as でレンダリングする HTML タグを選びます。その要素の HTML 属性、イベント、ref を使え、className と style で既存のスタイルを適用できます。Edge.Provider は DOM 要素を追加せず、各 Edge.Surface は要素を 1 つレンダリングします。
スタイルの合成
<Edge.Surface as="button" type="button" onClick={handleExampleClick}> Example button</Edge.Surface>input 要素にはラッパーが必要です。既存の装飾と競合する場合は導入時の注意点を参照してください。外観はスタイル、動きは動きで設定できます。
既存コンポーネントを接続する
Card や Button が自身の HTML 要素をレンダリングしている場合は、コンポーネント内で useSurface(options) を呼び、返された ref をその要素に渡します。コンポーネントは Edge.Provider の内側に配置してください。React 18 の関数コンポーネントでは forwardRef で ref を転送します。
要素の位置が変わる場合は、レイアウトの更新を参照してください。