ElementUI?組件之Layout布局(el-row、el-col)
更新時間：2024年07月12日 11:35:48 作者：ChinaDragonDreamer
這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過實例代碼圖文相結合給大家介紹的非常詳細,感興趣的朋友一起看看吧
點擊下載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>通過基礎的 24 分欄，迅速簡便地創(chuàng)建布局。</h4>
<h2>一、基礎布局</h2>
<h5>使用單一分欄創(chuàng)建基礎的柵格布局。</h5>
<h5>通過 row 和 col 組件，并通過 col 組件的 span 屬性我們就可以自由地組合布局。</h5>
<p>
el-row的gutter屬性： 柵格間隔； 默認值0；
<br/>
el-col的span屬性： 柵格占據的列數，默認值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>通過基礎的 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>支持偏移指定的欄數。通過制定 col 組件的 offset 屬性可以指定分欄偏移的欄數。</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>六、響應式布局</h2>
<h5>參照了 Bootstrap 的 響應式設計，預設了五個響應尺寸：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屬性簡介
到此這篇關于ElementUI 組件之Layout布局(el-row、el-col)的文章就介紹到這了,更多相關ElementUI 組件Layout布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue Element Sortablejs實現表格列的拖拽案例詳解
這篇文章主要介紹了Vue Element Sortablejs實現表格列的拖拽案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
在項目開發(fā)中，如果使用到了 vuex，通常我會將所有的接口請求單獨用一個文件管理，這篇文章主要介紹了Vuex中actions如何優(yōu)雅處理接口請求,業(yè)務邏輯寫在 actions 中，本文給大家分享完整流程需要的朋友可以參考下2022-11-11
這篇文章主要介紹了關于element中el-cascader的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue跳轉同一路由報錯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue如何判斷安卓還是IOS，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue.js 實現v-model與{{}}指令方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細介紹了如何使用vue3.2 + elementPlus + pinia 實現多頁簽導航,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下2023-12-12
本文通過實例代碼給大家介紹了Vue實現搜索 和新聞列表功能簡單范例，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2018-03-03
vite打包出現?"default"?is?not?exported?by?"
這篇文章主要給大家介紹了關于vite打包出現?"default"?is?not?exported?by?"node_modules/...問題的解決辦法,文中通過代碼將解決的辦法介紹的非常詳細,對同樣遇到這個問題的朋友具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue3+ts+echarts實現按需引入和類型界定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10