工作区 (Sheets)
v-sheet
组件是一块可改变的 paper ,它支持 Vuetify 组件的一些基本特性。
使用
工作区组件支持强调效果,圆角,自定义颜色等功能。它既可以作为其他组件的容器也可以单独使用。
API
组件 | 描述 |
---|---|
v-sheet | Primary Component |
组件结构
v-sheet
组件只有一个默认插槽。
元素 / 区域 | 描述 |
---|---|
1. 容器 | 主要内容区域 |
指南
在构建用户界面时,可以创建组件容器来包含其他的组件。其中 v-sheet
组件就是一个很好的选择。它提供了最基础的强调效果,圆角和背景颜色修改。
属性 (Props)
下面列举了 v-sheet
组件能够使用的标准属性。
强调效果 (Elevation)
v-sheet
组件接受一个从 0 到 24 (其中 0 为默认值)的强调效果。elevation 属性的值修改了 CSS 的 box-shadow
属性。更多信息可以参考 Material Design 的 强调效果设计规范Elevation Design Specification。
圆角 (Rounded)
rounded 属性默认会加上一个 4px 的 border-radius
。默认情况下,v-sheet
组件没有圆角效果。可以通过改变 rounded 的值,提供圆角半径和位置的信息。例如,tr-xl l-pill 等同于 rounded-tr-xl rounded-l-pill。详细的缩写参考可以访问 Border Radius 页面。
颜色
工作区和它包含的部件可以有不同的尺寸和颜色。
v-sheet
组件可以使用自定义的,诸如 warning
,amber darken-3
和 deep-purple accent
这样的 Material Design 颜色 。同样也可以使用 rgb,rgba 和 hexadecimal 这样的值。
示例
下面展示了一些 v-sheet
组件更为高级的用法和实际项目中的例子。
祝贺页面
这个例子展示了使用工作区组件创建一个祝贺加入 Vuetify 社区的横幅。
核对通知
例子中使用了工作区组件来创建了一个横幅,告诉用户账户账单已经核对。
隐私政策
创建一个隐私政策的通知,这是一个 v-sheet
组件的非常不错的应用。
推荐程序
即使对应于简单的使用情况,v-sheet
组件也可以轻松地包含内容和其他组件。