[[Program]] ＞ [[JavaScript]] ＞ ライブラリー ＞ [[Vue.js]] ＞ Element
#norelated
#contents
//----------------------------------------
* Vue.js Elementとは？ [#vaa4e623]
Bootstrapの代わりに使えるUIフレームワーク。[[Vue.js]]で作られている。
-Element - A Desktop UI Toolkit for Web https://element.eleme.io/
--豊富なコンポーネント
--美しいデザイン
GitHubからElementをダウンロードできる。
-GitHub - ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web https://github.com/ElemeFE/element
//----------------------------------------
* リファレンス [#q3118f1d]
Bootstrapで用意されている仕組み、パーツとほぼ同じことができる。
-Component | Element https://element.eleme.io/#/en-US/component/installation
以下、Elementのコンポーネント（パーツ）一覧の目次。
グリッドシステムは「Layout」などを見ればOK。
**Components [#c37d21a4]
***Basic [#sb614802]
Layout
Layout Container
Color
Typography
Icon
Button
***Form [#j52deab0]
Radio
Checkbox
Input
InputNumber
Select
Cascader
Switch
Slider
TimePicker
DatePicker
DateTimePicker
Upload
Rate
ColorPicker
Transfer
Form
***Data [#g8d7dab3]
Table
Tag
Progress
Tree
Pagination
Badge
***Notice [#t1cd1bfd]
Alert
Loading
Message
MessageBox
Notification
***Navigation [#m8b1997c]
NavMenu
Tabs
Breadcrumb
Dropdown
Steps
***Others [#fdecfaa7]
Dialog
Tooltip
Popover
Card
Carousel
Collapse
//----------------------------------------
* チュートリアル [#m3bd3ea4]
** 基本形 [#j51b6604]
CDNのリンクで、Elementのcssファイル、jsファイルを利用できる。
-Installation | Element https://element.eleme.io/#/en-US/component/installation
#code(html){{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://unpkg.com/element-ui/lib/umd/locale/ja.js"></script>
<script src="https://unpkg.com/element-ui/lib/umd/locale/ja.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
}}
