導入時の注意点

動きの設定を選ぶ

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

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

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

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

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

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

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

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

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>

input 要素をラップする

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

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

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

React での呼び出し方はlight.refresh()を参照してください。

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

Edge は軸に沿った矩形を前提とします。回転、遠近変換、別ドキュメントへのポータルには対応していません。同一ドキュメント内のポータルは光を共有できます。フォーカス、選択、検証についてはアクセシビリティを参照してください。