Elevation

使用法

影の効果は value プロパティを使用して生成されます。

import {
   __experimentalElevation as Elevation,
   __experimentalSurface as Surface,
   __experimentalText as Text,
} from '@wordpress/components';
function Example() {
   return (
   <Surface>
   <Text>Code is Poetry</Text>
   <Elevation value={ 5 } />
   </Surface>
   );
}

プロパティ

active: number

アクティブ時の影のサイズ値（value および isInteractive プロパティを参照）。

• 必須: いいえ
  

borderRadius: CSSProperties[ ‘borderRadius’ ]

影のボーダー半径をレンダリングします。

• 必須: いいえ
• デフォルト: inherit
  

focus: number

フォーカス時の影のサイズ値（value および isInteractive プロパティを参照）。

• 必須: いいえ
  

hover: number

ホバー時の影のサイズ値（value および isInteractive プロパティを参照）。

• 必須: いいえ
  

isInteractive: boolean

hover、active、および focus の影の値が自動的に計算され、レンダリングされるかどうかを決定します。

• 必須: いいえ
• デフォルト: false
  

offset: number

影の次元オフセット（マージン）。

• 必須: いいえ
• デフォルト: 0
  

value: number

スタイルシステムのエレベーションシステムに基づく影のサイズ。 value は影の強さを決定し、深さの感覚を与えます。

以下の例では、isInteractive がアクティブになり、より良い深さの感覚を与えます。

import { __experimentalElevation as Elevation } from '@wordpress/components';
function Example() {
   return (
   <div>
   <Elevation isInteractive value={ 200 } />
   </div>
   );
}

• 必須: いいえ
• デフォルト: 0