跳转到内容

Paper 纸张

在 Material Design 中,我们在屏幕上展现了纸张的物理属性。

应用程序的背景类似于纸张的平坦、不透明的纹理,应用程序的行为模仿了纸张的能力,可以重新调整大小、洗牌和装订成多张纸。

基础的纸张组件

<Paper elevation={0} />
<Paper />
<Paper elevation={3} />

变体

如果你想要一个轮廓的曲面,你可以使用 variant 属性。

<Paper variant="outlined" />
<Paper variant="outlined" square />

高度

The elevation can be used to establish a hierarchy between other content. 实际上,高度控制着表面的阴影大小。 在黑暗模式下,提高高度也使表面变得更亮。

elevation=0
elevation=1
elevation=2
elevation=3
elevation=4
elevation=6
elevation=8
elevation=12
elevation=16
elevation=24
elevation=0
elevation=1
elevation=2
elevation=3
elevation=4
elevation=6
elevation=8
elevation=12
elevation=16
elevation=24

黑暗模式下的阴影更改是通过对 background-image 属性应用半透明渐变来完成的。 当覆盖 Paper的样式时,这可能会导致混乱。 仅设置 background-color 属性不会影响与高度相关的阴影。 要在黑暗模式下忽略阴影并设置不受高度影响的背景颜色,请覆盖 background<code> 属性(或同时覆盖 <code>backgroundbackground-image)。