iView柵格的使用

本文轉載自查看原文 2019-05-10 11:12 3649

一般情況下柵格系統都會把每行row分為12列,但是iview是采用了24柵格系統，將區域進行24等分

基礎用法 實例代碼：

<template>

　　<Row>

　　　　<Col span="12">col-12</Col>

　　</Row> <br>

　　 <Row>

　　　　 <Col span="8">col-8</Col>

　　</Row> <br>

　　<Row>

　　　　<Col span="6">col-6</Col>

　　</Row>

</template>

區塊間隔

　　通過給 row 添加 gutter 屬性，可以給下屬的 col 添加間距，推薦使用 (16+8n)px 作為柵格間隔。

　　注意：在實際開發中需要給col里面的div加上背景顏色才能看出效果，如果是給col加背景則會看不出效果，因為間隔還是屬於col的部分

　　　　　　　　　　　　　　　　　　　　　　　　效果圖　

　　<Row :gutter="16">

　　　　<Col span="6">

　　　　　　<div>col-6</div>

　　　　</Col>

　　　　<Col span="6">

　　　　　　<div>col-6</div>

　　　　</Col>

　　　　<Col span="6">

　　　　　　<div>col-6</div>

　　　　</Col>

　　　　<Col span="6">

　　　　　　<div>col-6</div>

　　　　</Col>

　　</Row>

柵格順序(Flex)

　　通過 Flex（彈性布局）布局的order來改變柵格的順序。

　　說明：這里是通過設置row的type為fiex,再通過設置col的order來設置它顯示的順序

　　　　　　　　　　　　　　　　　　　　效果圖　　

　　<Row type="flex">

　　　　 <Col span="6" order="4">1 </Col>

　　　　<Col span="6" order="3">2</Col>

　　　　<Col span="6" order="2">3</Col>

　　　　<Col span="6" order="1">4</Col>

　　</Row>

　　除上面的方法還可以通過設置 push 和 pull 來改變柵格的順序。 pull 拉（拉向前）柵格向左移動格數， push 推（推向后）柵格向右移動格數

　　<Row>

　　　　<Col span="18" push="6"> 推向后

　　　　　　qwert

　　　　</Col>

　　　　<Col span="6" pull="18"> 拉向前

　　　　　　asdfg

　　　　</Col>

　　</Row>

左右偏移

　　通過設置 offset屬性，將列進行左右偏移設置，偏移柵格數為offset的值。

　　 offset柵格左側的間隔格數

　　<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>

Flex布局（彈性布局）

　　通過給row設置參數justify為不同的值，來定義子元素的排布方式。在flex模式下有效。

　　flex 布局的水平排列方式，可選值為start（向左排列）、end（向右排列）、center（居中排列）、space-around（等寬排列）、space-between（分散排列）

　　注：等寬排列和分散排列的區別是，分散排列會有左右兩邊的邊距，等寬排列左右兩邊是緊靠父元素的

　　 <template>

　　　　 <p>子元素向左排列</p>

　　　　<Row type="flex" justify="start" class="code-row-bg">

　　　　　　 <Col span="4">col-4</Col>

　　　　</Row>

　　　　<p>子元素向右排列</p>

　　　　<Row type="flex" justify="end" class="code-row-bg">

　　　　　　<Col span="4">col-4</Col>

　　　　</Row>

　　　　<p>子元素居中排列</p>

　　　　<Row type="flex" justify="center" class="code-row-bg">

　　　　　　<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>

　　　　</Row>

　　　　<p>子元素分散排列</p>

　　　　<Row type="flex" justify="space-around" class="code-row-bg">

　　　　　　<Col span="4">col-4</Col>

　　　　</Row>

　　</template>

Flex對齊

　　通過給row設置參數 align 為不同的值，來定義子元素在垂直方向上的排布方式。在flex模式下有效。

　　flex 布局下的垂直對齊方式，參數 align可選值為top（頂部對齊）、middle（居中對齊）、bottom（底部對齊）

　　 <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>

響應式布局

　　iview預設六個響應尺寸：xs sm md lg xl xxl

　　　　　　　　　　　　　　　　下面是lg寬度屏幕下的顯示效果

　　<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>

其它屬性的響應式

　　span pull push offset order 屬性可以通過內嵌到 xs sm md lg 屬性中來使用。其中 :xs="6" 相當於 :xs="{ span: 6 }"。

　　　　　　　　　　　　　　　　下面是在lg寬度屏幕下的效果

　　要注意IView采用了24柵格系統，使用時它們的和，包括偏移（offset）加起來要等於24

　　<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>

實例：

<div class="box-b">
　　<Row :gutter="16">
　　　　
　　　　
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　jquery
　　　　　　</div>
　　　　</Col>
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　KAKSHHGD
　　　　　　</div>
　　　　</Col>
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　KDJAAFVDD
　　　　　　</div>
　　　　</Col>
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　KDJAAFVDD
　　　　　　</div>
　　　　</Col>
　　</Row>
</div>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 iview-grid柵格 Bootstrap的核心——柵格系統的使用 bootstrap柵格系統的屬性及使用柵格布局的使用方法 iview的render函數使用 CDN方式使用iview iview 使用筆記關於iView中表單的基本使用 iView的使用【小白向】 iview安裝使用