ElementUI?組件之Layout布局(el-row、el-col)
更新時間：2024年07月12日 11:35:48 作者：ChinaDragonDreamer
這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細,感興趣的朋友一起看看吧
點擊下載learnelementuispringboot項目源碼
效果圖
el-row_el-col.vue頁面效果圖
項目里el-row_el-col.vue代碼
<script>
export default {
name:'el-row_el-col 布局'
}
</script>
<template>
<div class="root">
<h1>Layout 布局</h1>
<h4>通過基礎(chǔ)的 24 分欄，迅速簡便地創(chuàng)建布局。</h4>
<h2>一、基礎(chǔ)布局</h2>
<h5>使用單一分欄創(chuàng)建基礎(chǔ)的柵格布局。</h5>
<h5>通過 row 和 col 組件，并通過 col 組件的 span 屬性我們就可以自由地組合布局。</h5>
<p>
el-row的gutter屬性： 柵格間隔； 默認值0；
<br/>
el-col的span屬性： 柵格占據(jù)的列數(shù)，默認值24；
</p>
<!--
<el-row :gutter="10">
<el-col span="32" :span="8"> <div></div></el-col> 8/32 即此div顯示寬度為1/4
</el-row>
-->
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<h2>二、分欄間隔</h2>
<h5>分欄之間存在間隔。Row 組件 提供 gutter 屬性來指定每一欄之間的間隔，默認間隔為 0。</h5>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<h2>三、混合布局</h2>
<h5>通過基礎(chǔ)的 1/24 分欄任意擴展組合形成較為復雜的混合布局。</h5>
<el-row :gutter="20">
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<h2>四、分欄偏移</h2>
<h5>支持偏移指定的欄數(shù)。通過制定 col 組件的 offset 屬性可以指定分欄偏移的欄數(shù)。</h5>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<h2>五、對齊方式</h2>
<h5>通過 flex 布局來對分欄進行靈活的對齊。</h5>
<p>將 type 屬性賦值為 'flex'，可以啟用 flex 布局，并可通過 justify 屬性來指定 start, center, end, space-between, space-around 其中的值來定義子元素的排版方式。</p>
<el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<h2>六、響應(yīng)式布局</h2>
<h5>參照了 Bootstrap 的 響應(yīng)式設(shè)計，預(yù)設(shè)了五個響應(yīng)尺寸：xs、sm、md、lg 和 xl。</h5>
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<h2>基于斷點的隱藏類</h2>
<p>
Element 額外提供了一系列類名，用于在某些條件下隱藏元素。這些類名可以添加在任何 DOM 元素或自定義組件上。如果需要，請自行引入以下文件
import 'element-ui/lib/theme-chalk/display.css';
</p>
<h4>包含的類名及其含義為：</h4>
<ul id="ulist">
<li>hidden-xs-only - 當視口在 xs 尺寸時隱藏</li>
<li>hidden-sm-only - 當視口在 sm 尺寸時隱藏</li>
<li>hidden-sm-and-down - 當視口在 sm 及以下尺寸時隱藏</li>
<li>hidden-sm-and-up - 當視口在 sm 及以上尺寸時隱藏</li>
<li>hidden-md-only - 當視口在 md 尺寸時隱藏</li>
<li>hidden-md-and-down - 當視口在 md 及以下尺寸時隱藏</li>
<li>hidden-md-and-up - 當視口在 md 及以上尺寸時隱藏</li>
<li>hidden-lg-only - 當視口在 lg 尺寸時隱藏</li>
<li>hidden-lg-and-down - 當視口在 lg 及以下尺寸時隱藏</li>
<li>hidden-lg-and-up - 當視口在 lg 及以上尺寸時隱藏</li>
<li>hidden-xl-only - 當視口在 xl 尺寸時隱藏</li>
</ul>
</div>
</template>
<style>
.el-row{
margin-bottom: 20px;
&:last-child{
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.root{
margin-left: 300px;
margin-right: 300px;
}
#ulist{
padding: 0;
margin: 0;
//list-style-type: none;
}
#ulist li{
//float: left;
text-align: left;
}
</style>el-row屬性簡介
el-col屬性簡介
到此這篇關(guān)于ElementUI 組件之Layout布局(el-row、el-col)的文章就介紹到這了,更多相關(guān)ElementUI 組件Layout布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中實現(xiàn)父子組件雙向數(shù)據(jù)流的三種方案分享
通常情況下,父子組件的通信都是單向的,或父組件使用props向子組件傳遞數(shù)據(jù),或子組件使用emit函數(shù)向父組件傳遞數(shù)據(jù),本文將嘗試講解Vue中常用的幾種雙向數(shù)據(jù)流的使用,需要的朋友可以參考下2023-08-08
用面向?qū)ο蟮乃季S去理解Vue組件，可以將所有的事物都抽象為對象，而類或者說是組件，都具有屬性和操作。這篇文章主要介紹了嘗試用面向?qū)ο笏季S理解Vue組件,需要的朋友可以參考下2021-07-07
uniapp微信小程序使用webview嵌套uniappH5并實現(xiàn)通信詳細步驟
在開發(fā)微信小程序的時候,我們有時候會遇到將H5頁面嵌入到小程序頁面中的情況,這篇文章主要給大家介紹了關(guān)于uniapp微信小程序使用webview嵌套uniappH5并實現(xiàn)通信的詳細步驟,需要的朋友可以參考下2024-05-05
vue使用路由守衛(wèi)實現(xiàn)菜單的權(quán)限設(shè)置
我們使?vue-element-admin前端框架開發(fā)后臺管理系統(tǒng)時,?般都會涉及到菜單的權(quán)限控制問題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-06-06
VUE如何實現(xiàn)點擊文字添加顏色(動態(tài)修改class)
這篇文章主要介紹了VUE如何實現(xiàn)點擊文字添加顏色(動態(tài)修改class),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家介紹了Vue2?中的數(shù)據(jù)劫持簡寫示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要給大家介紹了關(guān)于Vue中$root使用方法及注意事項的相關(guān)資料,vue中$root是用來訪問根組件的,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
在本篇文章里小編給大家整理的是關(guān)于vue實現(xiàn)百度語音合成的實例內(nèi)容，以及相關(guān)代碼，需要的朋友們參考下。2019-10-10
vue draggable resizable gorkys與v-chart使用與總結(jié)
這篇文章主要介紹了vue draggable resizable gorkys與v-chart使用與總結(jié),本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
詳解vue3中setUp和reactive函數(shù)的用法
這篇文章主要介紹了vue3函數(shù)setUp和reactive函數(shù)的相關(guān)知識及setup函數(shù)和reactive函數(shù)的注意點，通過具體代碼給大家介紹的非常詳細,需要的朋友可以參考下2021-06-06