Edge.Surface

DOM 要素に照明効果を適用します。

Edge.Surface

最も近い Edge.Provider に接続した HTML 要素を 1 つレンダリングします。as で選んだタグに応じた HTML 属性、イベント、ref を使えます。

Edge.Surface のシグネチャ

<Edge.Surface as="article" edgeStyle="raised">
  Your content
</Edge.Surface>

Edge.Surface props
Prop / オプション	型	デフォルト	説明
`pseudoElement`	`'after' \| 'before'`	`'after'`	装飾に使う擬似要素です。既存の ::after を保つには before を選びます。両方が使用済み、またはネイティブ入力の場合はラッパーを使います。不正な値は RangeError を発生させます。
`edgeStyle`	`'raised' \| 'recessed' \| 'matte'`	`'raised'`	境界が光に反応する方法です。3 つのスタイルはいずれもコンポーネントの外観を維持します。
`color`	`string`	`currentColor`	ハイライトの色です。デフォルトでは DOM 要素の文字色に従います。CSS 変数を含む任意の CSS 色文字列を指定できます。
`shadowColor`	`string`	`#0008`	反対側の境界の色です。任意の CSS 色文字列を指定できます。明るいサーフェスの影を消すには transparent を使います。
`borderWidth`	`number`	`1`	装飾の太さをピクセルで指定します。 DOM 要素の境界線は変えません。負数は 0 に制限され、有限でない値はデフォルト値になります。
`intensity`	`number`	`1`	共有するライトの強度に掛ける値です。有限値は 0〜1 に制限され、有限でない値はデフォルト値になります。
`as`	`HTML tag name`	`'div'`	描画する HTML 要素です。ネイティブの属性と ref は選んだタグに従います。独自の React コンポーネントは指定できません。
`children`	`ReactNode`	`Unset`	DOM 要素の内側に表示する内容です。input など擬似要素を直接表示できない要素にはラッパーを使います。
`ref`	`Ref<HTMLElement for the chosen tag>`	`Unset`	内部登録用の ref とともに描画した要素に渡します。React 19 のコールバック ref のクリーンアップを維持します。
`className`	`string`	`Unset`	装飾用クラスと結合する既存のクラスです。
`style`	`CSSProperties`	`Unset`	装飾の設定の後に結合するインラインスタイルです。意図して上書きする場合を除き、Edge が管理する CSS 変数は維持してください。

Edge.Surface は必ず Edge.Provider の内側で使ってください。外側でレンダリングするとエラーになります。input 要素や既存の擬似要素との競合については、導入時の注意点を参照してください。

ハイライトは DOM 要素の境界線の外側に揃います。既存コンポーネントがレンダリングする DOM 要素には、useSurface で接続します。