Vue.js_Element - プログラミング探して！

Program ＞ JavaScript ＞ライブラリー＞ Vue.js ＞ Element

Vue.js Elementとは？
リファレンス
- Components
  - Basic
  - Form
  - Data
  - Notice
  - Navigation
  - Others
チュートリアル
- 基本形

Vue.js Elementとは？ †

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

リファレンス †

Bootstrapで用意されている仕組み、パーツとほぼ同じことができる。

Component | Element https://element.eleme.io/#/en-US/component/installation

以下、Elementのコンポーネント（パーツ）一覧の目次。
グリッドシステムは「Layout」などを見ればOK。

Components †

Basic †

Layout
Layout Container
Color
Typography
Icon
Button

Form †

Radio
Checkbox
Input
InputNumber
Select
Cascader
Switch
Slider
TimePicker
DatePicker
DateTimePicker
Upload
Rate
ColorPicker
Transfer
Form

Data †

Table
Tag
Progress
Tree
Pagination
Badge

Notice †

Alert
Loading
Message
MessageBox
Notification

Navigation †

NavMenu
Tabs
Breadcrumb
Dropdown
Steps

Others †

Dialog
Tooltip
Popover
Card
Carousel
Collapse

チュートリアル †

基本形 †

CDNのリンクで、Elementのcssファイル、jsファイルを利用できる。

Installation | Element https://element.eleme.io/#/en-US/component/installation

<!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="https://unpkg.com/element-ui/lib/umd/locale/ja.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

Last-modified: 2018-11-17 (土) 19:40:00 (1980d)