# ガイド · 導入時の注意点

既存の擬似要素、input 要素、レイアウト変更と組み合わせる方法を確認します。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ja/docs/integration/

<a id="choose-an-input-mode"></a>

## 動きの設定を選ぶ

system は動きを減らす設定と入力機器の設定に従います。dynamic は動きを減らす設定でもマウスやペンに追従します。static は方向を固定します。タッチで画面基準の照明位置を更新します。スクロール中や指を離した後も最後の位置を保ち、その下を移動するサーフェスが反応します。再びタッチすると位置を更新します。 タッチ追従も選択したモーションモードに従います。static は固定され、system は動きを減らす設定が有効な場合に固定されます。

<a id="understand-rendering-cost"></a>

## レンダリングの負荷を理解する

各ライトは最大 1 フレームを予約し、スタイルの書き込み前に形状を読み取り、変更のない出力を省略します。グラデーションの変更にはブラウザーの描画処理が必要なため、フレームレートや電池消費は保証しません。

<a id="preserve-native-interactions"></a>

## ネイティブの操作を維持する

ラベル、文字のコントラスト、基本の境界線、キーボードフォーカスを維持してください。装飾はポインターイベントを遮らず、入力値、選択、キーボード操作、ポータルは従来どおり管理できます。

強制カラーモードでは装飾が非表示になります。選択、検証、利用可否はハイライトに頼らず伝えてください。

<a id="existing-decorations"></a>

## 既存の擬似要素と組み合わせる

Edge はデフォルトで `::after` にハイライトを描画します。既存の `::after` を維持するには `pseudoElement: 'before'` を設定します。両方の擬似要素が使用済みなら、外側にラッパーを追加して適用してください。

既存の擬似要素を維持

```tsx
import { Edge } from '@bolerish/edge';

<Edge.Provider>
  <Edge.Surface as="article" pseudoElement="before" className="existing-after">
    Your existing ::after stays intact.
  </Edge.Surface>
</Edge.Provider>
```

<a id="wrap-inputs-you-own"></a>

## input 要素をラップする

ネイティブの input では擬似要素を安定して表示できません。代わりに周囲の `label` または `div` に接続し、border-radius を合わせます。input のラベル、フォーカス、検証、キーボード操作は維持してください。くぼんだ外観には `recessed` を使います。

<a id="refresh-after-layout-changes"></a>

## レイアウト変更後に更新する

サイズ変更、入れ子のスクロール、ビューポートの変更、フォントやリソースの読み込みで位置とサイズを自動更新します。サイズ通知を伴わず位置や境界線の太さだけが変わった場合は、レイアウト反映後に `light.refresh()` を呼び出してください。ポインターが静止していても更新されます。

React での呼び出し方は[light.refresh()](https://edge.bolerish.com/ja/docs/react/use-light/#refresh)を参照してください。

<a id="geometry-limits"></a>

## 対応する形状とドキュメントの範囲

Edge は軸に沿った矩形を前提とします。回転、遠近変換、別ドキュメントへのポータルには対応していません。同一ドキュメント内のポータルは光を共有できます。フォーカス、選択、検証については[アクセシビリティ](https://edge.bolerish.com/ja/docs/integration/#preserve-native-interactions)を参照してください。