ElementPlus Layout 布局

2021-09-07 10:10 更新

Layout 布局

通過基礎的 24 分欄，迅速簡便地創(chuàng)建布局。

 組件默認采用了 flex 布局，無需手動設置 type="flex"。

請注意父容器避免使用 inline 相關樣式，會導致組件寬度不能撐滿。

基礎布局

使用單一分欄創(chuàng)建基礎的柵格布局。

單一分欄創(chuàng)建基礎的柵格布局。

通過 ?row ?和 ?col ?組件，并通過 ?col ?組件的 ?span ?屬性我們就可以自由地組合布局。

<template>
  <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>
</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;
  }
</style>

分欄間隔

分欄之間存在間隔。

分欄間隔

Row 組件 提供 ?gutter ?屬性來指定每一欄之間的間隔，默認間隔為 0。

<template>
  <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>
</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;
  }
</style>

混合布局

通過基礎的 1/24 分欄任意擴展組合形成較為復雜的混合布局。

混合布局

<template>
  <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>
</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;
  }
</style>

分欄偏移

支持偏移指定的欄數(shù)。

分欄偏移

通過制定 col 組件的 ?offset ?屬性可以指定分欄偏移的欄數(shù)。

<template>
  <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>
</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;
  }
</style>

對齊方式

默認使用 flex 布局來對分欄進行靈活的對齊.

對齊方式

可通過 ?justify? 屬性來指定 start, center, end, space-between, space-around 其中的值來定義子元素的排版方式。

<template>
  <el-row 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 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 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 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 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>
</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;
  }
</style>

響應式布局

參照了 Bootstrap 的 響應式設計，預設了五個響應尺寸：xs、sm、md、lg 和 xl。

響應式布局

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

<style>
  .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;
  }
</style>

基于斷點的隱藏類

Element Plus 額外提供了一系列類名，用于在某些條件下隱藏元素。這些類名可以添加在任何 DOM 元素或自定義組件上。如果需要，請自行引入以下文件：

import 'element-plus/lib/theme-chalk/display.css'

包含的類名及其含義為：

  • hidden-xs-only - 當視口在 xs 尺寸時隱藏
  • hidden-sm-only - 當視口在 sm 尺寸時隱藏
  • hidden-sm-and-down - 當視口在 sm 及以下尺寸時隱藏
  • hidden-sm-and-up - 當視口在 sm 及以上尺寸時隱藏
  • hidden-md-only - 當視口在 md 尺寸時隱藏
  • hidden-md-and-down - 當視口在 md 及以下尺寸時隱藏
  • hidden-md-and-up - 當視口在 md 及以上尺寸時隱藏
  • hidden-lg-only - 當視口在 lg 尺寸時隱藏
  • hidden-lg-and-down - 當視口在 lg 及以下尺寸時隱藏
  • hidden-lg-and-up - 當視口在 lg 及以上尺寸時隱藏
  • hidden-xl-only - 當視口在 xl 尺寸時隱藏

Row Attributes

參數(shù)說明類型可選值默認值
gutter柵格間隔number—0
justifyflex 布局下的水平排列方式stringstart/end/center/space-around/space-betweenstart
alignflex 布局下的垂直排列方式stringtop/middle/bottomtop
tag自定義元素標簽string*div

Col Attributes

參數(shù)說明類型可選值默認值
span柵格占據(jù)的列數(shù)number—24
offset柵格左側的間隔格數(shù)number—0
push柵格向右移動格數(shù)number—0
pull柵格向左移動格數(shù)number—0
xs<768px 響應式柵格數(shù)或者柵格屬性對象number/object (例如： {span: 4, offset: 4})——
sm≥768px 響應式柵格數(shù)或者柵格屬性對象number/object (例如： {span: 4, offset: 4})——
md≥992px 響應式柵格數(shù)或者柵格屬性對象number/object (例如： {span: 4, offset: 4})——
lg≥1200px 響應式柵格數(shù)或者柵格屬性對象number/object (例如： {span: 4, offset: 4})——
xl≥1920px 響應式柵格數(shù)或者柵格屬性對象number/object (例如： {span: 4, offset: 4})——
tag自定義元素標簽string*div


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號