当前位置: 首页 > 文档资料 > VUX 中文文档 >

Group 组件使用教程

优质
小牛编辑
143浏览
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

属性

名字类型默认值说明版本要求
titlestring分组标题--
title-colorstring分组标题文字颜色--
label-widthstring为子元素设定统一label宽度--
label-alignstring为子元素设定统一对齐方式--
label-margin-rightstring为子元素设定统一的右边margin--
gutterstring设定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