tms-vue3-ui
Version:
Vue3基础UI库，提供JSONSchema编辑器，支持基于JSONSchema生成表单。
47 lines (38 loc) • 3.66 kB
Markdown
# 布局框（frame）
提供自适应页面的布局。
## 使用
```js
import Vue from 'vue'
import { Frame } from 'tms-vue-ui'
Vue.use(Frame)
```
```
<tms-frame></tms-frame>
```
## 插槽（slots）
| 名称 | 说明 |
| ------ | ------------------------------------------- |
| header | 自定义顶部内容 |
| footer | 自定义底部内容 |
| left | 自定义图片内容。屏幕宽度小于等于 768 隐藏。 |
| center | 自定义标题内容 |
| right | 自定义描述内容。屏幕宽度小于等于 768 隐藏。 |
## 属性（props）
| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | --------------------------------------------------------------- | ------ | ------------------------------------------------------- |
| back-color | 背景底色 | string | #f0f3f6 |
| footer-color | 脚部区域底色 | string | #f0f3f6 |
| footer-min-height | 脚部区域最小高度。仅当未指定 footer 插槽未指定内容时有效。 | string | 32px |
| left-color | 左侧区域底色 | string | #f0f3f6 |
| center-color | 中间区域底色 | string | #fff |
| right-color | 右侧区域底色 | string | #f0f3f6 |
| header-color | 头部区域底色 | string | #f0f3f6 |
| header-min-height | 头部区域最小高度。仅当未指定 header 插槽未指定内容时有效。 | string | 32px |
| left-width | 左侧区域宽度 | string | 25% |
| left-width-sm | 左侧区域宽度 | string | 100% |
| right-width | 右侧区域宽度 | string | 25% |
| right-width-sm | 右侧区域宽度 | string | 100% |
| center-margin | 中间区域边距 | string | 0 8px |
| center-margin-sm | 屏幕小于 768 时，中间区域边距 | string | - |
| display | 显示哪些区域。只要将要显示的区域设置成 true，不显示的不用设置。 | object | {header: true, footer: true, left: true, right: true} |
| display-sm | 屏幕小于 768 时，显示哪些区域 | object | {header: true, footer: true, left: false, right: false} |