Element-ui-Basic

1、Layout 佈局

一、基礎佈局

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

.el-row { margin-bottom: 20px; } .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; }

 

 

 

 

 

注意：設置以後會顯示x軸滾動條問題，給容器設置溢出隱藏便可。

element共分爲24塊，:span="6" 即每一個容器佔6份

 

二、分欄間隔

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

注意： :gutter="20" 每一個容器的間隔20像素，這裏的間隔指的是容器的左右內邊距，如不須要，能夠單獨設置：padding-left:0

 

三、分欄偏移

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

注意： :offset="6" 指的是容器向右偏移6份

 

四、對齊方式：

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

注意： 利用flex進行靈活佈局， 使用前請先確認瀏覽器是否支持。

容器變成彈性盒子type="flex"

水平對齊方式：justify="center" 居中對齊 left左對齊 right右對齊 space-between兩端對齊 space-around等邊距

垂直對齊方式align='top' 上對齊 middle 居中對齊 bottom 下對齊

 

五、響應式佈局

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

xs	<768px 響應式柵格數或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})
sm	≥768px 響應式柵格數或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})
md	≥992px 響應式柵格數或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})
lg	≥1200px 響應式柵格數或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})
xl	≥1920px 響應式柵格數或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})

 

六、基於斷點的隱藏

先引入如下文件：import 'element-ui/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 尺寸時隱藏

例如：只在xs下隱藏

<div class="hidden-xs-only"></div>

 

七、col上的屬性：

<el-row :gutter="10"> <el-col :span='8' :push='16'><div class="grid-content bg-purple">123</div></el-col> <el-col :span='8' :pull='8'><div class="grid-content bg-purple-light">456</div></el-col> <el-col :span='8' :pull='8'><div class="grid-content bg-purple">789</div></el-col> </el-row>

注意： :push='16'向右偏移16份 :pull='8' 向左偏移8份

 

2、佈局容器

用於佈局的容器組件，方便快速搭建頁面的基本結構：

<el-container>：外層容器。當子元素中包含 <el-header> 或 <el-footer> 時，所有子元素會垂直上下排列，不然會水平左右排列。

<el-header>：頂欄容器。

<el-aside>：側邊欄容器。

<el-main>：主要區域容器。

<el-footer>：底欄容器

<el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container> </el-container> </el-container> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </el-container> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container> </el-container>

.el-header, .el-footer { background-color: #B3C0D1; color: #333; text-align: center; line-height: 60px; } .el-aside { background-color: #D3DCE6; color: #333; text-align: center; line-height: 200px; } .el-main { background-color: #E9EEF3; color: #333; text-align: center; line-height: 160px; } .el-container { margin-bottom: 40px; } .el-container:nth-child(5) .el-aside, .el-container:nth-child(6) .el-aside { height: 260px; line-height: 260px; } .el-container:nth-child(7) .el-aside { height: 320px; line-height: 320px; }

 

 

container上的屬性：

direction子元素的方向，horizontal水平排列，vertical垂直排列

header上的屬性：

height高度

aside上的屬性

width寬度

footer上的屬性：

height高度

 

3、色彩

<el-tag>標籤一</el-tag> <el-tag type="success">標籤二</el-tag> <el-tag type="info">標籤三</el-tag> <el-tag type="warning">標籤四</el-tag> <el-tag type="danger">標籤五</el-tag>

 

4、字體

font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微軟雅黑",Arial,sans-serif;

5、ICON圖標

<i class="el-icon-edit"></i> <i class="el-icon-share"></i> <i class="el-icon-delete"></i> <el-button type="primary" icon="el-icon-search">搜索</el-button>

 

 

 

 

 

6、按鈕

<el-row> 基本語法 <el-button>默認按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">信息按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險按鈕</el-button> </el-row> <el-row> <el-button plain>樸素按鈕</el-button> <el-button type="primary" plain>主要按鈕</el-button> <el-button type="success" plain>成功按鈕</el-button> <el-button type="info" plain>信息按鈕</el-button> <el-button type="warning" plain>警告按鈕</el-button> <el-button type="danger" plain>危險按鈕</el-button> </el-row> <el-row> <el-button round>圓角按鈕</el-button> <el-button type="primary" round>主要按鈕</el-button> <el-button type="success" round>成功按鈕</el-button> <el-button type="info" round>信息按鈕</el-button> <el-button type="warning" round>警告按鈕</el-button> <el-button type="danger" round>危險按鈕</el-button> </el-row> <el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row> <el-row> 禁用狀態 <el-button disabled>默認按鈕</el-button> <el-button type="primary" disabled>主要按鈕</el-button> <el-button type="success" disabled>成功按鈕</el-button> <el-button type="info" disabled>信息按鈕</el-button> <el-button type="warning" disabled>警告按鈕</el-button> <el-button type="danger" disabled>危險按鈕</el-button> </el-row> <el-row> 文字按鈕 <el-button type="text">文字按鈕</el-button> <el-button type="text" disabled>文字按鈕</el-button> </el-row> <el-row> 圖標按鈕 <el-button type="primary" icon="el-icon-edit"></el-button> <el-button type="primary" icon="el-icon-share"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-search">搜索</el-button> <el-button type="primary">上傳<i class="el-icon-upload el-icon--right"></i></el-button> </el-row> <el-row> 按鈕組 <el-button-group> <el-button type="primary" icon="el-icon-arrow-left">上一頁</el-button> <el-button type="primary">下一頁<i class="el-icon-arrow-right el-icon--right"></i></el-button> </el-button-group> <el-button-group> <el-button type="primary" icon="el-icon-edit"></el-button> <el-button type="primary" icon="el-icon-share"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button> </el-button-group> </el-row> <el-row> 加載中 <el-button type="primary" :loading="true">加載中</el-button> </el-row>

 

 

 

 

屬性：

size按鈕尺寸，默認最大，medium、small、mini依次變小

<el-button>默認按鈕</el-button> <el-button size='medium'>medium</el-button> <el-button size='small'>small</el-button> <el-button size='mini'>mini</el-button>

 

 

 

 

type類型，primary / success / warning / danger / info / text

<el-button>默認按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">信息按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險按鈕</el-button> <el-button type="text">文字按鈕</el-button>

 

 

 

 

 

plain樸素按鈕，round圓角按鈕，circle圓形按鈕，loading加載中狀態，disabled禁用按鈕，icon圖標類名，autofocus得到焦點，native-type原生type屬性，button / submit / reset