Group 组件使用教程
优质
小牛编辑
139浏览
2023-12-01
安装
import { Group } from 'vux'
export default {
components: {
Group
}
}
// 在入口文件全局引入
import Vue from 'vue'
import { Group } from 'vux'
Vue.component('group', Group)
Group
是一个特殊的表单wrapper
组件,主要用于将表单分组,单个表单元素也算一组。常见的表单组件都必须
作为Group
的子组件。 属于Group
子组件的有:Cell, XInput, XTextarea, XSwitch, Calendar, XNumber, Radio, XAddress, Datetime, Selector
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
title | string | 分组标题 | -- | |
title-color | string | 分组标题文字颜色 | -- | |
label-width | string | 为子元素设定统一label宽度 | -- | |
label-align | string | 为子元素设定统一对齐方式 | -- | |
label-margin-right | string | 为子元素设定统一的右边margin | -- | |
gutter | string | 设定group的上边距,只能用于没有标题时 | -- |
插槽
名字 | 说明 | 版本要求 |
默认插槽 | 子组件插槽 | -- |
title | 标题插槽 | v2.5.1 |
样式变量
名字 | 默认值 | 说明 | 继承自变量 |
@group-title-margin-top | .77em | 标题的margin-top | |
@group-title-margin-bottom | .3em | 标题的margin-bottom | |
@group-footer-title-margin-top | .3em | 底部标题的margin-top | |
@group-footer-title-margin-bottom | .77em | 底部标题的margin-bottom |