Element-ui框架學習

element-ui:已開源,使用率多,開發團隊實力更強,element 提供了 Sketch 和 Axure 工具 對設計人員友好;當前共46個組件,對表格/樹相對薄弱,但是團隊影響力大,文檔按期維護更新也是一個優勢,組件整體色調用色沒有antd明亮

1.Layout 布局
例:
row屬性:
type 屬性賦值為 'flex',可以啟用 flex 布局,
justify 屬性來指定 start, center, end, space-between, space-around 其中的值來定義子元素的
排版方式
col屬性:
span 屬性我們就可以自由地組合布局。
offset 屬性可以指定分欄偏移的欄數。
col屬性響應式: :xs="8" :sm="6" :md="4" :lg="3" :xl="1";
<el-row :gutter="20" type="flex" justify="center">
<el-col :span="24" :offset="6"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
2.Container 布局容器
<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>
3.提供Color 色彩和字體規范
4.圖標:<i class="el-icon-edit"></i>
5.button:
type="primary / success / warning / danger / info / text" //按鈕類型(還有文字按鈕)
icon="el-icon-edit" //是否帶有圖標
circle/round/plain //按鈕形狀
disabled:
<el-button type="primary" icon="el-icon-search" circle>搜索</el-button>
6.單選
<el-radio disabled v-model="radio1" label="選中且禁用">備選項</el-radio>
7.checkbox
<el-checkbox-group v-model="checkList">
<el-checkbox label="復選框 A"></el-checkbox>
<el-checkbox label="復選框 B"></el-checkbox>
<el-checkbox label="復選框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="選中且禁用" disabled></el-checkbox>
</el-checkbox-group>
<........之后沒有一個個去記錄,除了寫法不一樣,很多大致功能似......................................>

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • HTML 5 HTML5概述 因特網上的信息是以網頁的形式展示給用戶的,因此網頁是網絡信息傳遞的載體。網頁文件是用...
    阿啊阿吖丁閱讀 4,060評論 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,627評論 1 45
  • 每逢月圓之夜,青云山頂就會傳來凄厲的嚎叫聲,老人們趁機嚇唬小孩,聽見沒,要是不聽話,狼就會把你拖走。 七歲的強子沒...
    7f6a4ce04201閱讀 896評論 1 2
  • 自從我在敦煌避了兩次暑以來,還沒有見過這么頻繁的下雨,沒有三天兩頭,也有隔三差五了。七月流火,但租住的房子里仍宜人...
    松江華德閱讀 1,264評論 7 9
  • 2018.8.26 今天去聽了一節高效閱讀課,這是第一節高效閱讀課,講的是古詩的記憶方法。古詩的記憶方法就是先理解...
    鵑花開閱讀 185評論 0 0