スタイル

基本のスタイルを変えずに、サーフェスが光に反応する方法を選びます。

境界の反応を比較する

スタイルを選び、カードの周りでポインターを動かしてください。選択した設定は、このサイトのカード、コードブロック、ナビゲーションにも反映されます。

スタイル

Raised

光に面した境界を明るくします。デフォルトです。

コンポーネントの色とレイアウトはそのままです。

境界のスタイルを比較

const light = useLight();
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>

JavaScript を有効にするとサンプルを操作できます。

境界のスタイルを比較

const light = useLight();
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>

スタイルの値

スタイルの値
値	動作
`raised`	光に面した境界を明るくします。デフォルトです。
`recessed`	ハイライトを装飾の境界線の太さ分だけ内側に描画します。選択した光の方向は維持します。
`matte`	境界の反応を柔らかくします。

その他のオプションはAPI リファレンスを参照してください。

Raised

外側に浮き出る境界を表現するには edgeStyle: 'raised' を使います。

Recessed

input のラッパーなどで、ハイライトを装飾の境界線の太さ分だけ内側に描くには edgeStyle: 'recessed' を使います。選択した光の方向は維持します。

Matte

控えめで柔らかい境界にするには edgeStyle: 'matte' を使います。

ハイライトを調整する

入れ子でも各サーフェスは自身の文字色と、接続した DOM 要素の border-radius を使います。color でハイライトの色を変え、intensity で共有するライトの強度を調整できます。反対側の影を消すには shadowColor="transparent" を使います。borderWidth はハイライトの太さだけを変え、実際の境界線には影響しません。オプションを Edge.Surface に渡せばよく、CSS 変数の宣言は不要です。

この効果は、座標軸に平行な長方形に対して光が当たる方向を近似的に表現するもので、物理的な点光源を再現するものではありません。サーフェスの中心付近では、その大きさに比例した領域でハイライトの強度が弱まります。

既存の擬似要素や input のラッパーと組み合わせる場合は、導入時の注意点を参照してください。