sf-panel.vue

1.0.4 • Public • Published

SfPanel sf面板

布局, 表单

经常用于表单页面

示例

基本用法

Alt text

<SfPanel title="水果" tip="提示">
  香蕉
</SfPanel>
import SfPanel from 'sf-panel.vue'
Vue.use(SfPanel)

使用折叠展开功能

Alt text

<SfPanel title="水果" toggle-able :is-expend.sync="isExpend">
  香蕉
</SfPanel>
export default {
  data() {
    return {
      isExpend: true,
    }
  }
}

定制主题样式

Alt text

:root {
  --color-primary: #E6A23C;
  --color-warning: #F56C6C;
}

切换为 erp 主题

Alt text

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

插入自定义操作

Package Sidebar

Install

npm i sf-panel.vue

Weekly Downloads

7

Version

1.0.4

License

MIT

Unpacked Size

1.07 MB

Total Files

23

Last publish

Collaborators

  • successhr_fe