此组件已弃用。请编写自己的 CSS,最好使用 @wordpress/theme 中提供的 设计令牌 (design tokens)。

Surface 是一个核心组件,用于渲染主背景色。

用法

在下面的示例中,请注意 Surface 如何以白色(或在深色模式下为深灰色)渲染。

import {
    __experimentalSurface as Surface,
    __experimentalText as Text,
} from '@wordpress/components';

function Example() {
    return (
        <Surface>
            <Text>Code is Poetry</Text>
        </Surface>
    );
}

属性

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:用于显示点状网格。