vue iviem UI grid布局
Grid 栅格
概述

我们采用了24栅格系统,将区域进行24等分,这样可以轻松应对大部分布局问题。使用栅格系统进行网页布局,可以使页面排版美观、舒适。
我们定义了两个概念,行row
和列col
,具体使用方法如下:
- 使用
row
在水平方向创建一行 - 将一组
col
插入在row
中 - 在每个
col
中,键入自己的内容 - 通过设置
col
的span
参数,指定跨越的范围,其范围是1到24 - 每个
row
中的col
总和应该为24
注意:非 template/render 模式下,需使用 i-col
。
代码示例



<template>
<Row type="flex">
<Col span="6" order="4">1 | order-4</Col>
<Col span="6" order="3">2 | order-3</Col>
<Col span="6" order="2">3 | order-2</Col>
<Col span="6" order="1">4 | order-1</Col>
</Row>
</template>
<script>
export default { }
</script>

<template>
<Row>
<Col span="18" push="6">col-18 | push-6</Col>
<Col span="6" pull="18">col-6 | pull-18</Col>
</Row>
</template>
<script>
export default { }
</script>

<template>
<Row>
<Col span="8">col-8</Col>
<Col span="8" offset="8">col-8 | offset-8</Col>
</Row>
<br>
<Row>
<Col span="6" offset="8">col-6 | offset-8</Col>
<Col span="6" offset="4">col-6 | offset-4</Col>
</Row>
<br>
<Row>
<Col span="12" offset="8">col-12 | offset-8</Col>
</Row>
</template>
<script>
export default { }
</script>

<template>
<p>子元素向左排列</p>
<Row type="flex" justify="start" class="code-row-bg">
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
</Row>
<p>子元素向右排列</p>
<Row type="flex" justify="end" class="code-row-bg">
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
</Row>
<p>子元素居中排列</p>
<Row type="flex" justify="center" class="code-row-bg">
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
</Row>
<p>子元素等宽排列</p>
<Row type="flex" justify="space-between" class="code-row-bg">
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
</Row>
<p>子元素分散排列</p>
<Row type="flex" justify="space-around" class="code-row-bg">
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
<Col span="4">col-4</Col>
</Row>
</template>
<script>
export default { }
</script>

<template>
<p>顶部对齐</p>
<Row type="flex" justify="center" align="top" class="code-row-bg">
<Col span="4"><p style="height: 80px">col-4</p></Col>
<Col span="4"><p style="height: 30px">col-4</p></Col>
<Col span="4"><p style="height: 100px">col-4</p></Col>
<Col span="4"><p style="height: 60px">col-4</p></Col>
</Row>
<p>底部对齐</p>
<Row type="flex" justify="center" align="bottom" class="code-row-bg">
<Col span="4"><p style="height: 80px">col-4</p></Col>
<Col span="4"><p style="height: 30px">col-4</p></Col>
<Col span="4"><p style="height: 100px">col-4</p></Col>
<Col span="4"><p style="height: 60px">col-4</p></Col>
</Row>
<p>居中对齐</p>
<Row type="flex" justify="center" align="middle" class="code-row-bg">
<Col span="4"><p style="height: 80px">col-4</p></Col>
<Col span="4"><p style="height: 30px">col-4</p></Col>
<Col span="4"><p style="height: 100px">col-4</p></Col>
<Col span="4"><p style="height: 60px">col-4</p></Col>
</Row>
</template>
<script>
export default { }
</script>

<template>
<Row>
<Col :xs="2" :sm="4" :md="6" :lg="8">Col</Col>
<Col :xs="20" :sm="16" :md="12" :lg="8">Col</Col>
<Col :xs="2" :sm="4" :md="6" :lg="8">Col</Col>
</Row>
</template>
<script>
export default { }
</script>

<template>
<Row>
<Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
<Col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
<Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
</Row>
</template>
<script>
export default { }
</script>
API
Row props
属性 |
说明 |
类型 |
默认值 |
---|---|---|---|
gutter |
栅格间距,单位 px,左右平分 |
Number |
0 |
type |
布局模式,可选值为flex或不选,在现代浏览器下有效 |
String |
- |
align |
flex 布局下的垂直对齐方式,可选值为top、middle、bottom |
String |
- |
justify |
flex 布局下的水平排列方式,可选值为start、end、center、space-around、space-between |
String |
- |
class-name |
自定义的class名称 |
String |
- |
Col props
属性 |
说明 |
类型 |
默认值 |
---|---|---|---|
span |
栅格的占位格数,可选值为0~24的整数,为 0 时,相当于display:none |
Number | String |
- |
order |
栅格的顺序,在flex布局模式下有效 |
Number | String |
- |
offset |
栅格左侧的间隔格数,间隔内不可以有栅格 |
Number | String |
- |
push |
栅格向右移动格数 |
Number | String |
- |
pull |
栅格向左移动格数 |
Number | String |
- |
class-name |
自定义的class名称 |
String |
- |
xs |
<768px 响应式栅格,可为栅格数或一个包含其他属性的对象 |
Number | Object |
- |
sm |
≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 |
Number | Object |
- |
md |
≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 |
Number | Object |
- |
lg |
≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象 |
Number | Object |
- |
vue iviem UI grid布局的更多相关文章
- WPF界面设计技巧(9)—使用UI自动化布局
原文:WPF界面设计技巧(9)-使用UI自动化布局 最近一直没时间更新这系列文章,因为我一直在埋头编写我的第一个WPF应用程序:MailMail 今天开始编写附属的加密/解密工具,对UI自动化布局有些 ...
- vue mandmobile ui实现三列列表的方法
vue mandmobile ui实现三列列表的方法 请问这种列表的要用那个组件好呢?Cellitem 只能用到两列,这个要三列的怎么弄?mand的好像没有listview,grid组件的 问了man ...
- VUE常用UI组件插件及框架
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
- UWP学习记录2-设计和UI之布局
UWP学习记录2-设计和UI之布局 1.导航基础知识 应用里,多个页面会有层次关系或者对等关系.这两种关系,通常在一个复杂应用里都会存在,而关系的选定依据: 对于对等导航,一般用选项卡(tabs)或者 ...
- WPF中Grid布局
WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...
- NGUI UI Grid, two column
NGUI UI Grid, two column, set Arrangement Horizontal, Column Limit 2.
- [转]使用CSS3 Grid布局实现内容优先
使用CSS3 Grid布局实现内容优先 http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...
- Kendo Web UI Grid添加一个html控件如(checkbox,button)
在Kendo Web UI Grid增加一个控件如效果图: <div id="grid1"></div><script> $("#gr ...
- wpf后置代码中的Grid布局以及图片路径的设置
之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...
随机推荐
- 牛客新年AK场之模拟二维数组
链接:https://ac.nowcoder.com/acm/contest/3800/D来源:牛客网 题目描述 Rinne 喜欢使用一种奇怪的方法背单词,现在这些单词被放在了一个 n×mn \tim ...
- 洛谷 P1981 表达式求值(模拟)
嗯... 题目链接:https://www.luogu.org/problem/P1981 这道题其实是数组模拟栈.首先处理乘法:注意从后往前处理,处理后归零.然后把数都加起来即可. AC代码: #i ...
- pdf .js和tableexport.js使用时遇到的2问题。
pdf .js 问题一:报错 network.js:71 The provided value 'moz-chunked-arraybuffer' is not a valid enum value ...
- Try-Catch无法正确定位异常位置,我推荐2个有效技巧
宇宙第一开发IDE Visual Studio的调试功能非常强大,平常工作debug帮助我们解决不少问题.今天分享两个异常捕获的技巧,希望能够帮助解决一些问题. 以下两种情况,我相信大家都会遇到过. ...
- CentOS7安装jenkis
注意:终止运行Ctrl+c , 退回到shell命令Ctrl+d 一.先检查是否有java [root@huangyh huangyh]# rpm -qa |grep java 或 java 因为C ...
- 模仿虎牙App 导航栏切换
昨天看虎牙直播,发现导航栏挺有意思,自己也做个玩玩 <view class="tab_list row"> <view class="tab_item ...
- 201771010135杨蓉庆《面向对象程序设计(java)》第四周学习总结
学习目标 1.掌握类与对象的基础概念,理解类与对象的关系: 2.掌握对象与对象变量的关系: 3.掌握预定义类的基本使用方法,熟悉Math类.String类.math类.Scanner类.LocalDa ...
- 关于永久POE
1.传统POE 在我们的企业网络中,经常会使用交换机给IP电话或者无线AP供电,以使得其正常的工作. 正常情况下,我们都知道,普通的POE是在PSE交换机启动完成后,然后再给PD(Power Devi ...
- python开发环境搭建及编辑器选择与安装
内容来源:https://www.cnblogs.com/sanzangTst/p/7278337.html https://www.cnblogs.com/sanzangTst/p/7282154. ...
- onclick="this.src=this.src+'?'"是什么意思?
onclick="this.src=this.src+'?'" 这是表示当前图片链接 在当前链接值的基础上添加了一个问号 譬如当前src="check.aspx" ...