ElementUI?組件之Layout布局(el-row、el-col)
更新時(shí)間：2024年07月12日 11:35:48 作者：ChinaDragonDreamer
這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
Vue引入ElementUI并使用的詳細(xì)過(guò)程
點(diǎn)擊下載learnelementuispringboot項(xiàng)目源碼
效果圖
el-row_el-col.vue頁(yè)面效果圖
項(xiàng)目里el-row_el-col.vue代碼
<script>
export default {
name:'el-row_el-col 布局'
}
</script>
<template>
<div class="root">
<h1>Layout 布局</h1>
<h4>通過(guò)基礎(chǔ)的 24 分欄，迅速簡(jiǎn)便地創(chuàng)建布局。</h4>
<h2>一、基礎(chǔ)布局</h2>
<h5>使用單一分欄創(chuàng)建基礎(chǔ)的柵格布局。</h5>
<h5>通過(guò) row 和 col 組件，并通過(guò) col 組件的 span 屬性我們就可以自由地組合布局。</h5>
<p>
el-row的gutter屬性： 柵格間隔； 默認(rèn)值0；
<br/>
el-col的span屬性： 柵格占據(jù)的列數(shù)，默認(rèn)值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 屬性來(lái)指定每一欄之間的間隔，默認(rèn)間隔為 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>通過(guò)基礎(chǔ)的 1/24 分欄任意擴(kuò)展組合形成較為復(fù)雜的混合布局。</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ù)。通過(guò)制定 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>五、對(duì)齊方式</h2>
<h5>通過(guò) flex 布局來(lái)對(duì)分欄進(jìn)行靈活的對(duì)齊。</h5>
<p>將 type 屬性賦值為 'flex'，可以啟用 flex 布局，并可通過(guò) justify 屬性來(lái)指定 start, center, end, space-between, space-around 其中的值來(lái)定義子元素的排版方式。</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è)計(jì)，預(yù)設(shè)了五個(gè)響應(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>基于斷點(diǎn)的隱藏類(lèi)</h2>
<p>
Element 額外提供了一系列類(lèi)名，用于在某些條件下隱藏元素。這些類(lèi)名可以添加在任何 DOM 元素或自定義組件上。如果需要，請(qǐng)自行引入以下文件
import 'element-ui/lib/theme-chalk/display.css';
</p>
<h4>包含的類(lèi)名及其含義為：</h4>
<ul id="ulist">
<li>hidden-xs-only - 當(dāng)視口在 xs 尺寸時(shí)隱藏</li>
<li>hidden-sm-only - 當(dāng)視口在 sm 尺寸時(shí)隱藏</li>
<li>hidden-sm-and-down - 當(dāng)視口在 sm 及以下尺寸時(shí)隱藏</li>
<li>hidden-sm-and-up - 當(dāng)視口在 sm 及以上尺寸時(shí)隱藏</li>
<li>hidden-md-only - 當(dāng)視口在 md 尺寸時(shí)隱藏</li>
<li>hidden-md-and-down - 當(dāng)視口在 md 及以下尺寸時(shí)隱藏</li>
<li>hidden-md-and-up - 當(dāng)視口在 md 及以上尺寸時(shí)隱藏</li>
<li>hidden-lg-only - 當(dāng)視口在 lg 尺寸時(shí)隱藏</li>
<li>hidden-lg-and-down - 當(dāng)視口在 lg 及以下尺寸時(shí)隱藏</li>
<li>hidden-lg-and-up - 當(dāng)視口在 lg 及以上尺寸時(shí)隱藏</li>
<li>hidden-xl-only - 當(dāng)視口在 xl 尺寸時(shí)隱藏</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屬性簡(jiǎn)介
el-col屬性簡(jiǎn)介
到此這篇關(guān)于ElementUI 組件之Layout布局(el-row、el-col)的文章就介紹到這了,更多相關(guān)ElementUI 組件Layout布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解
這篇文章主要介紹了Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Vuex中actions優(yōu)雅處理接口請(qǐng)求的方法
在項(xiàng)目開(kāi)發(fā)中，如果使用到了 vuex，通常我會(huì)將所有的接口請(qǐng)求單獨(dú)用一個(gè)文件管理，這篇文章主要介紹了Vuex中actions如何優(yōu)雅處理接口請(qǐng)求,業(yè)務(wù)邏輯寫(xiě)在 actions 中，本文給大家分享完整流程需要的朋友可以參考下2022-11-11
關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問(wèn)題及解決
這篇文章主要介紹了vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue如何判斷安卓還是IOS，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js 實(shí)現(xiàn)v-model與{{}}指令方法
這篇文章主要介紹了vue.js 實(shí)現(xiàn)v-model與{{}}指令方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
使用vue3.2實(shí)現(xiàn)多頁(yè)簽導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了如何使用vue3.2 + elementPlus + pinia 實(shí)現(xiàn)多頁(yè)簽導(dǎo)航,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-12-12
Vue實(shí)現(xiàn)搜索 和新聞列表功能簡(jiǎn)單范例
本文通過(guò)實(shí)例代碼給大家介紹了Vue實(shí)現(xiàn)搜索 和新聞列表功能簡(jiǎn)單范例，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2018-03-03
vite打包出現(xiàn)?"default"?is?not?exported?by?"
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問(wèn)題的解決辦法,文中通過(guò)代碼將解決的辦法介紹的非常詳細(xì),對(duì)同樣遇到這個(gè)問(wèn)題的朋友具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06
vue3+ts+echarts實(shí)現(xiàn)按需引入和類(lèi)型界定方式
這篇文章主要介紹了vue3+ts+echarts實(shí)現(xiàn)按需引入和類(lèi)型界定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10