sf-panel.vue
v1.0.4
Published
<!-- 该 README.md 根据 api.yaml 和 docs/*.md 自动生成,为了方便在 GitHub 和 NPM 上查阅。如需修改,请查看源文件 -->
Downloads
19
Maintainers
Readme
SfPanel sf面板
布局, 表单
经常用于表单页面
示例
基本用法
<SfPanel title="水果" tip="提示">
香蕉
</SfPanel>
import SfPanel from 'sf-panel.vue'
Vue.use(SfPanel)
使用折叠展开功能
<SfPanel title="水果" toggle-able :is-expend.sync="isExpend">
香蕉
</SfPanel>
export default {
data() {
return {
isExpend: true,
}
}
}
定制主题样式
:root {
--color-primary: #E6A23C;
--color-warning: #F56C6C;
}
切换为 erp 主题
import SfPanel from 'sf-panel.vue'
Vue.use(SfPanel, { projectType: 'erp' })
API
Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| title | string | | ''
| 标题, 不传不显示header |
| tip | string | | ''
| 提示 |
| toggleAble | boolean | | false
| 使用展开折叠功能 |
| isExpend | boolean | | true
| 是否展开, 当toggleAble=true 时使用 |
Slots
tip
插入自定义提示
action
插入自定义操作