vue 之element-ui Layout 布局
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
vue 之 element Layout 布局
1.//<el-row></el-row>行元素,布局最外层容器,里面子元素如果浮动以后,一般父级可以不清除浮动,
2. <el-row :gutter="20" type="flex" justify="center" align="top">
3. //<el-col></el-col>块级元素,布局里层容器
4. <el-col :span="24" :offset="6" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
5. </el-row>
注解 row 标签
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
gutter | 栅格间隔 | number | 是数值就行 | 0 |
type | 布局模式, | 可选 flex,现代浏览器下有效 | string | 无 |
justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
tag | 自定义元素标签 | string | * | div |
注解 col 标签
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
span | 栅格占据的列数 | number | 无 | 24 |
offset | 栅格左侧的间隔格数 | number | 无 | 0 |
push | 栅格向右移动格数 | number | 无 | 0 |
pull | 栅格向左移动格数 | number | 无 | 0 |
xs | <768px 响应式栅格数或者栅格属性对象 | number/object | (例如: {span: 4, offset: 4}) | 无 |
sm | ≥768px 响应式栅格数或者栅格属性对象 | number/object | (例如: {span: 4, offset: 4}) | 无 |
md | ≥992px 响应式栅格数或者栅格属性对象 | number/object | (例如: {span: 4, offset: 4}) | 无 |
lg | ≥1200px 响应式栅格数或者栅格属性对象 | number/object | (例如: {span: 4, offset: 4}) | 无 |
xl | ≥1920px 响应式栅格数或者栅格属性对象 | number/object | (例如: {span: 4, offset: 4}) | 无 |
tag | 自定义元素标签 | string | * | div |
引用element-ui,element-ui地址
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)