使用法

以下の例では、Surfaceが白（またはダークモードの場合は暗い灰色）で表示されることに注意してください。 

  1. import {
  2.    __experimentalSurface as Surface,
  3.    __experimentalText as Text,
  4. } from '@wordpress/components';
  6. function Example() {
  7.    return (
  8.    <Surface>
  9.    <Text>Code is Poetry</Text>
  10.    </Surface>
  11.    );
  12. }

プロパティ

backgroundSize: number

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

「ドット」および「グリッド」バリアントのグリッドサイズを決定します。

borderBottom: boolean

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

下の境界線を描画します。

borderLeft: boolean

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

左の境界線を描画します。

borderRight: boolean

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

右の境界線を描画します。

borderTop: boolean

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

上の境界線を描画します。

variant: string

  • 必須: いいえ
  • デフォルト: false
  • 許可される値: primary, secondary, tertiary, dotted, grid

Surfaceの背景色を変更します。

  • primary: ほぼすべてのケースで使用されます。
  • secondary: 内部のSurfaceコンポーネントのための二次的な背景として使用されます。
  • tertiary: アプリ/サイト全体の背景として使用されます。ダークモードでのみ表示されます。使用ケースは稀です。
  • grid: グリッドを表示するために使用されます。
  • dotted: ドットグリッドを表示するために使用されます。