test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-01 10:47:57 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs: translation japanese (#536)

Browse Source
This commit is contained in:
Yamamoto Ken 2020-11-04 11:30:14 +09:00 committed by GitHub
parent 5a688e0217
commit 4c3f2103b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
73 changed files with 17810 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
website/app.vue
View File

@ -14,6 +14,7 @@ import zhLocale from '@element-plus/locale/lang/zh-CN'
import enLocale from '@element-plus/locale/lang/en'
import esLocale from '@element-plus/locale/lang/es'
import frLocale from '@element-plus/locale/lang/fr'
import jaLocale from '@element-plus/locale/lang/ja'
import { Language } from './enums/language'
const lang = location.hash.replace('#', '').split('/')[1] || Language.CN
@ -28,6 +29,9 @@ const localize = lang => {
case Language.FR:
use(frLocale)
break
case Language.JP:
use(jaLocale)
break
default:
use(enLocale)
}

1
website/components/header.vue
View File

@ -138,6 +138,7 @@ export default {
[Language.EN]: 'English',
[Language.ES]: 'Español',
[Language.FR]: 'Français',
[Language.JP]: '日本語',
},
}
},

5
website/components/search.vue
View File

@ -73,6 +73,11 @@ export default {
empty: 'Aucun résultat',
index: 'fr',
},
[Language.JP]: {
search: '検索',
empty: '検索結果なし',
index: 'jp',
},
},
}
},

242
website/docs/jp/alert.md Normal file
View File

@ -0,0 +1,242 @@
## Alert
重要なalertメッセージを表示します。
### 基本的な使い方
alertコンポーネントは、自動的には消えないページ内の非オーバーレイ要素です。
:::demo alertは `type` で定義された4種類のテーマを提供しており、デフォルト値は `info` です。
```html
<template>
<el-alert
title="success alert"
type="success">
</el-alert>
<el-alert
title="info alert"
type="info">
</el-alert>
<el-alert
title="warning alert"
type="warning">
</el-alert>
<el-alert
title="error alert"
type="error">
</el-alert>
</template>
```
:::
### テーマ
alertは、`ライト`と`ダーク`の2つの異なるテーマを提供しています。
:::demo テーマを変更するために `effect` を設定します。
```html
<template>
<el-alert
title="success alert"
type="success"
effect="dark">
</el-alert>
<el-alert
title="info alert"
type="info"
effect="dark">
</el-alert>
<el-alert
title="warning alert"
type="warning"
effect="dark">
</el-alert>
<el-alert
title="error alert"
type="error"
effect="dark">
</el-alert>
</template>
```
:::
### カスタマイズ可能なクローズボタン
閉じるボタンをテキストや他の記号にカスタマイズします。
:::demo alertでは、クローズ可能かどうかを設定することができます。閉じるボタンのテキストや閉じるコールバックもカスタマイズ可能です。`closable`属性はコンポーネントを閉じられるかどうかを決める。戻り値は `boolean` で、デフォルトは `true` です。`close-text` 属性を設定することで、デフォルトの十字マークを閉じるボタンに置き換えることができます。`close-text` は文字列でなければならないので注意が必要である。コンポーネントが閉じられたときに `close` イベントが発生する。
```html
<template>
<el-alert
title="unclosable alert"
type="success"
:closable="false">
</el-alert>
<el-alert
title="customized close-text"
type="info"
close-text="Gotcha">
</el-alert>
<el-alert
title="alert with callback"
type="warning"
@close="hello">
</el-alert>
</template>
<script>
export default {
methods: {
hello() {
alert('Hello World!');
}
}
}
</script>
```
:::
### アイコン付き
アイコンを表示することで可読性が向上します。
:::demo `show-icon` 属性を設定すると、現在のalertタイプに対応するアイコンを表示します。
```html
<template>
<el-alert
title="success alert"
type="success"
show-icon>
</el-alert>
<el-alert
title="info alert"
type="info"
show-icon>
</el-alert>
<el-alert
title="warning alert"
type="warning"
show-icon>
</el-alert>
<el-alert
title="error alert"
type="error"
show-icon>
</el-alert>
</template>
```
:::
## 中央揃えのテキスト
テキストを中央に配置するには `center` 属性を使用します。
:::demo
```html
<template>
<el-alert
title="success alert"
type="success"
center
show-icon>
</el-alert>
<el-alert
title="info alert"
type="info"
center
show-icon>
</el-alert>
<el-alert
title="warning alert"
type="warning"
center
show-icon>
</el-alert>
<el-alert
title="error alert"
type="error"
center
show-icon>
</el-alert>
</template>
```
:::
### 説明文付き
説明には、より詳細な情報が記載されたメッセージが含まれています。
:::demo 必須の `title` 属性の他に、`description` 属性を追加することで、alertをより詳細に説明することができます。説明はテキスト文字列のみを格納することができ、自動的にワードラップされます。
```html
<template>
<el-alert
title="with description"
type="success"
description="This is a description.">
</el-alert>
</template>
```
:::
### アイコンと説明文付き
:::demo 最後に、アイコンと説明文の例です。
```html
<template>
<el-alert
title="success alert"
type="success"
description="more text description"
show-icon>
</el-alert>
<el-alert
title="info alert"
type="info"
description="more text description"
show-icon>
</el-alert>
<el-alert
title="warning alert"
type="warning"
description="more text description"
show-icon>
</el-alert>
<el-alert
title="error alert"
type="error"
description="more text description"
show-icon>
</el-alert>
</template>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | タイトル | string | — | — |
| type | コンポーネントタイプ | string | success/warning/info/error | info |
| description | 説明的なテキスト。デフォルトのスロット | string | — | — |
| closable | クローズ可能な場合かどうか | boolean | — | true |
| center | テキストを中央に配置するかどうか | boolean | — | false |
| close-text | カスタマイズしたクローズボタンのテキスト | string | — | — |
| show-icon | タイプアイコンが表示されているま | boolean | — | false |
| effect | テーマを選ぶ | string | light/dark | light |
### スロット
| Name | Description |
|------|--------|
| — | description |
| title | alertタイトルの内容 |
### イベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| close | alertが閉じたときにトリガーされます | — |

145
website/docs/jp/avatar.md Normal file
View File

@ -0,0 +1,145 @@
## Avator
avatorは、人やオブジェクトを表現するために使用することができます。画像、アイコン、文字をサポートしています。
### 基本
avatorの形状とサイズを設定するために `shape` と `size` プロップを使う
:::demo
```html
<template>
<el-row class="demo-avatar demo-basic">
<el-col :span="12">
<div class="sub-title">circle</div>
<div class="demo-basic--circle">
<div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
<div class="block" v-for="size in sizeList" :key="size">
<el-avatar :size="size" :src="circleUrl"></el-avatar>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="sub-title">square</div>
<div class="demo-basic--circle">
<div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
<div class="block" v-for="size in sizeList" :key="size">
<el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
export default {
data () {
return {
circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
sizeList: ["large", "medium", "small"]
}
}
}
</script>
```
:::
### タイプ
イメージ、アイコン、文字をサポートしています。
:::demo
```html
<template>
<div class="demo-type">
<div>
<el-avatar icon="el-icon-user-solid"></el-avatar>
</div>
<div>
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div>
<el-avatar> user </el-avatar>
</div>
</div>
</template>
```
:::
### イメージ読み込みエラー時のフォールバック
イメージ読み込みエラー時のフォールバック
:::demo
```html
<template>
<div class="demo-type">
<el-avatar :size="60" src="https://empty" @error="errorHandler">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
</el-avatar>
</div>
</template>
<script>
export default {
methods: {
errorHandler() {
return true
}
}
}
</script>
```
:::
### イメージがそのコンテナにどのようにフィットするか
[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)と同様に、イメージavatorのコンテナに画像がどのようにフィットするかを設定します。
:::demo
```html
<template>
<div class="demo-fit">
<div class="block" v-for="fit in fits" :key="fit">
<span class="title">{{ fit }}</span>
<el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
}
}
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
| icon | 表現タイプをIconに設定します。詳細はアイコンコンポーネントを確認してください。 | string | | |
| size | avatorサイズを設定する | number/string | number / large / medium / small | large |
| shape | セットavatorの形を設定する | string | circle / square | circle |
| src | 画像avator用の画像アドレス | string | | |
| srcSet | ユーザーエージェントが使用する可能性のある画像ソースのセットを示すコンマで区切られた1つ以上の文字列のリスト | string | | |
| alt | この属性は画像の代替テキストの説明を定義します。 | string | | |
| fit | 画像avatorのコンテナに画像がどのようにフィットするかを設定します。 | string | fill / contain / cover / none / scale-down | cover |
### イベント
| Event Name | Description | Parameters |
| ------ | ------------------ | -------- |
| error | img のロードエラー時のハンドラ、デフォルトのフォールバック動作を防ぐために false を返します。 |(e: Event) |
### スロット
| Slot Name | Description |
| default | avatorの内容をカスタマイズ |

60
website/docs/jp/backtop.md Normal file
View File

@ -0,0 +1,60 @@
## Backtop
ボタンでトップに戻る
### 基本的な使い方
下にスクロールすると右下のボタンが表示されます。
:::demo
```html
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
```
:::
### カスタマイズ
表示エリアは40px \* 40pxです。
:::demo
```html
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
UP
</div>
</el-backtop>
</template>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
| target | スクロール対象 | string | | |
| visibility-height | ボタンはスクロールの高さがこの値に達するまで表示されません。 | number | | 200 |
| right | ライトディスタンス | number | | 40 |
| bottom | ボトムディスタンス | number | | 40 |
### イベント
| Event Name | Description | Parameters |
| ---------- | ------------------- | ----------- |
| click | クリックするとトリガー | click event |

124
website/docs/jp/badge.md Normal file
View File

@ -0,0 +1,124 @@
## Badge
ボタンやアイコンの数字やステータスマーク
### 基本的な使い方
新しいメッセージの量を表示します。
:::demo 量は `value` で定義します。`value` は `Number` または `String` を受け入れる。
```html
<el-badge :value="12" class="item">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">replies</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">replies</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="clearfix">
comments
<el-badge class="mark" :value="12" />
</el-dropdown-item>
<el-dropdown-item class="clearfix">
replies
<el-badge class="mark" :value="3" />
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### 最大値
最大値をカスタマイズすることができます。
:::demo 最大値はプロパティ `max` で定義され `Number` である。value` が `Number` である場合にのみ動作することに注意すること。
```html
<el-badge :value="200" :max="99" class="item">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge :value="100" :max="10" class="item">
<el-button size="small">replies</el-button>
</el-badge>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### カスタマイズ
数字以外のテキスト内容を表示します。
:::demo `value` が `String` の場合、カスタマイズしたテキストを表示することができる。
```html
<el-badge value="new" class="item">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge value="hot" class="item">
<el-button size="small">replies</el-button>
</el-badge>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### 小さな赤い点
注目すべきコンテンツには、赤い点を使ってマークをつけましょう。
:::demo 属性 `is-dot` を用いる。`Boolean` である。
```html
<el-badge is-dot class="item">query</el-badge>
<el-badge is-dot class="item">
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
</el-badge>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | 表示値 | string, number | — | — |
| max | 最大値を超えると '{max}+' を表示します。`value` が `Number` の場合にのみ動作します。 | number | — | — |
| is-dot | 小さな点が表示されている場合 | boolean | — | false |
| hidden | かくしbadge | boolean | — | false |
| type | ボタンタイプ | string | primary / success / warning / danger / info | — |

131
website/docs/jp/border.md Normal file
View File

@ -0,0 +1,131 @@
<script>
import bus from '../../bus';
const varMap = {
'$--box-shadow-light': 'boxShadowLight',
'$--box-shadow-base': 'boxShadowBase',
'$--border-radius-base': 'borderRadiusBase',
'$--border-radius-small': 'borderRadiusSmall'
};
const original = {
boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
borderRadiusBase: '4px',
borderRadiusSmall: '2px'
}
export default {
mounted() {
this.setGlobal();
},
methods: {
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
boxShadowLight: '',
boxShadowBase: '',
borderRadiusBase: '',
borderRadiusSmall: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(varMap).forEach((c) => {
if (value[c]) {
this[varMap[c]] = value[c]
} else {
this[varMap[c]] = original[varMap[c]]
}
});
}
}
}
}
</script>
## Border
ボタンやカード、ポップアップなどで使用できるborderを標準化しています。
### Border
borderのスタイルはいくつかあります。
<table class="demo-border">
<tbody>
<tr>
<td class="text">Name</td>
<td class="text">Thickness</td>
<td class="line">Demo</td>
</tr>
<tr>
<td class="text">Solid</td>
<td class="text">1px</td>
<td class="line">
<div></div>
</td>
</tr>
<tr>
<td class="text">Dashed</td>
<td class="text">2px</td>
<td class="line">
<div class="dashed"></div>
</td>
</tr>
</tbody>
</table>
### 半径(radius)
いくつかの半径(radius)のスタイルがあります。
<el-row :gutter="12" class="demo-radius">
<el-col :span="6" :xs="{span: 12}">
<div class="title">No Radius</div>
<div class="value">border-radius: 0px</div>
<div class="radius"></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Small Radius</div>
<div class="value">border-radius: {{borderRadiusSmall}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusSmall }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Large Radius</div>
<div class="value">border-radius: {{borderRadiusBase}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusBase }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Round Radius</div>
<div class="value">border-radius: 30px</div>
<div class="radius radius-30"></div>
</el-col>
</el-row>
### 影
シャドウスタイルの選択肢はほとんどありません。
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowBase }"
></div>
<span class="demo-shadow-text">Basic Shadow box-shadow: {{boxShadowBase}}</span>
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowLight }"
></div>
<span class="demo-shadow-text">Light Shadow box-shadow: {{boxShadowLight}}</span>

49
website/docs/jp/breadcrumb.md Normal file
View File

@ -0,0 +1,49 @@
## Breadcrumb(パンくず)
現在のページの位置を表示し、ブラウザバックを容易にします。
### 基本的な使い方
:::demo `el-breadcrumb` では、`el-breadcrumb-item` はホームページから始まる各レベルを表すタグである。このコンポーネントは `String` 属性 `separator` を持ち、セパレータを決定する。デフォルト値は'/'である。
```html
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
```
:::
### アイコンセパレータ
:::demo `separator-class` を `iconfont` をセパレータとして使用するように設定します．
```html
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
```
:::
### Breadcrumb(パンくず)属性
| Attribute | Description | Type | Accepted Values | Default|
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | セパレータ文字 | string | — | / |
| separator-class | アイコンセパレータのクラス名 | string | — | - |
### Breadcrumb(パンくず)項目属性
| Attribute | Description | Type | Accepted Values | Default|
|---------- |-------------- |---------- |-------------------------------- |-------- |
| to | リンクのターゲットルート、`vue-router` の `to` と同じ | string/object | — | — |
| replace | `true` の場合、ナビゲーションは履歴を残しません。 | boolean | — | false |

165
website/docs/jp/button.md Normal file
View File

@ -0,0 +1,165 @@
## Button
広く使われているbuttonです。
### 基本的な使い方
:::demo Button のスタイルを定義するには `type`, `plain`, `round`, `circle` を使います。
```html
<el-row>
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
<el-row>
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</el-row>
<el-row>
<el-button round>Round</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="info" round>Info</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</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>
```
:::
### 無効化button
`disabled` 属性はbuttonが無効になっているかどうかを判定します。
:::demo buttonが無効になっているかどうかを判断するには `disabled` 属性を用いる。これは `Boolean` 値を受け取ります。
```html
<el-row>
<el-button disabled>Default</el-button>
<el-button type="primary" disabled>Primary</el-button>
<el-button type="success" disabled>Success</el-button>
<el-button type="info" disabled>Info</el-button>
<el-button type="warning" disabled>Warning</el-button>
<el-button type="danger" disabled>Danger</el-button>
</el-row>
<el-row>
<el-button plain disabled>Plain</el-button>
<el-button type="primary" plain disabled>Primary</el-button>
<el-button type="success" plain disabled>Success</el-button>
<el-button type="info" plain disabled>Info</el-button>
<el-button type="warning" plain disabled>Warning</el-button>
<el-button type="danger" plain disabled>Danger</el-button>
</el-row>
```
:::
### テキストbutton
枠線と背景のないbuttonです。
:::demo
```html
<el-button type="text">Text Button</el-button>
<el-button type="text" disabled>Text Button</el-button>
```
:::
### アイコンbutton
アイコンを使ってButtonにさらに意味を持たせましょう。アイコンだけでスペースを確保したり、テキストと一緒に使うこともできます。
:::demo アイコンを追加するには `icon` 属性を使います。アイコンのリストは要素のアイコンコンポーネントにあります。テキストの右側にアイコンを追加するには、`<i>` タグを使用します。カスタムアイコンも使用できます。
```html
<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">Search</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
```
:::
### buttonグループ
buttonグループとして表示され、同じよう操作をグループ化することができます。
:::demo buttonをグループ化するにはタグ `<el-button-group>` を使用します。
```html
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
<el-button type="primary">Next Page<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>
```
:::
### 読み込みbutton
buttonをクリックしてデータを読み込むと、読み込み状態が表示されます。
:::demo ロード状態を表示するために `loading` 属性を `true` に設定します。
```html
<el-button type="primary" :loading="true">Loading</el-button>
```
:::
### サイズ
Buttonコンポーネントにはデフォルトサイズの他に、3つの追加サイズが用意されており、異なるシナリオの中から選択することができます。
:::demo 追加のサイズを `medium`, `small`, `mini` で設定するには、属性 `size` を使用します。
```html
<el-row>
<el-button>Default</el-button>
<el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button>
</el-row>
<el-row>
<el-button round>Default</el-button>
<el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button>
</el-row>
```
:::
### 属性
| Attribute | Description | Type | Accepted values | Default |
|---------- |-------- |---------- |------------- |-------- |
| size | buttonサイズ | string | medium / small / mini | — |
| type | buttonタイプ | string | primary / success / warning / danger / info / text | — |
| plain | プレーンbuttonか判定する | boolean | — | false |
| round | ラウンド(丸みを持った)buttonか判定する | boolean | — | false |
| circle | サークル(丸)buttonか判定する | boolean | — | false |
| loading | 読み込み中か判定する | boolean | — | false |
| disabled | buttonを無効化する | boolean | — | false |
| icon | アイコンクラス名 | string | — | — |
| autofocus | ネイティブbuttonの `オートフォーカス` と同じ | boolean | — | false |
| native-type | ネイティブbuttonの `タイプ` と同じ | string | button / submit / reset | button |

66
website/docs/jp/calendar.md Normal file
View File

@ -0,0 +1,66 @@
## Calendar
日付を表示します。
### 基本的なこと
:::demo 現在表示されている月を指定するために `value` を設定する。`value` が指定されない場合は現在の月を表示する。`value` は双方向のバインディングをサポートする。
```html
<el-calendar v-model="value">
</el-calendar>
<script>
export default {
data() {
return {
value: new Date()
}
}
}
</script>
```
:::
### カスタムコンテンツ
:::demo `scoped-slot` に `dateCell` という名前を設定することで、calendarセルに表示する内容をカスタマイズすることができる。`scoped-slot`では、日付(現在のセルの日付)とデータ(type, isSelected, day属性を含む)を取得することができます。詳細は以下のAPIドキュメントを参照のこと。
```html
<el-calendar>
<!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
<template
slot="dateCell"
slot-scope="{date, data}">
<p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
</p>
</template>
</el-calendar>
<style>
.is-selected {
color: #1989FA;
}
</style>
```
:::
### レンジ
:::demo calendarの表示範囲を指定するために `range` 属性を設定する。開始時刻は月曜日、終了時刻は日曜日でなければならず、期間は2ヶ月を超えてはならない。
```html
<el-calendar :range="['2019-03-04', '2019-03-24']">
</el-calendar>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|-----------------|------------------- |---------- |---------------------- |--------- |
| value / v-model | バインディング値 | Date/string/number | — | — |
| range | 開始時刻と終了時刻を含む時間範囲。開始時間は週の開始日、終了時間は週の終了日でなければならず、時間幅は2ヶ月を超えることはできません。 | Array | — | — |
| first-day-of-week | 週の最初の日| Number | 1 to 7 | 1 |
### デートセルスコープスロット
| Attribute | Description | Type | Accepted Values | Default |
|-----------------|-------------- |---------- |---------------------- |--------- |
| date | セルが表す日付 | Date | — | — |
| data | {type, isSelected, day}. `type` は日付が属する月を示し、オプションの値は前月、現在の月、次の月です。`isSelected` は日付が選択されているかどうかを示す。`day`はyyyy-MM-dd形式でフォーマットされた日付です。 | Object | — | — |

169
website/docs/jp/card.md Normal file
View File

@ -0,0 +1,169 @@
## Card
cardコンテナに情報を統合する
### 基本的な使い方
cardはタイトル、内容、操作を含む。
:::demo cardは `header` と `body` からなる。ヘッダはオプションであり、その内容の分布はスロットの名前に依存します。
```html
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }}
</div>
</el-card>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
</style>
```
:::
### シンプルなcard
ヘッダー部分は省略可能です。
:::demo
```html
<el-card class="box-card">
<div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }}
</div>
</el-card>
<style>
.text {
font-size: 14px;
}
.item {
padding: 18px 0;
}
.box-card {
width: 480px;
}
</style>
```
:::
### 画像付き
設定を追加することで、よりリッチなコンテンツを表示することができます。
:::demo `body-style` 属性は、カスタム `body` の CSS スタイルを定義します。この例ではレイアウトにも `el-col` を用いています。
```html
<el-row>
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
<el-card :body-style="{ padding: '0px' }">
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span>Yummy hamburger</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">Operating</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<style>
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
<script>
export default {
data() {
return {
currentDate: new Date()
};
}
}
</script>
```
:::
### シャドウ
cardのシャドウを表示するタイミングを定義することができます。
:::demo `shadow` 属性は、cardの影をいつ表示するかを決定します。`always`, `hover`, `never` のいずれかです。
```html
<el-row :gutter="12">
<el-col :span="8">
<el-card shadow="always">
Always
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover">
Hover
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never">
Never
</el-card>
</el-col>
</el-row>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| header | cardのタイトルを指定します。`slot#header` で渡された DOM も受け付ける。 | string| — | — |
| body-style | ボディのCSSスタイル | object| — | { padding: '20px' } |
| shadow | cardの影を表示するタイミング | string | always / hover / never | always |

212
website/docs/jp/carousel.md Normal file
View File

@ -0,0 +1,212 @@
## Carousel(カルーセル)
限られたスペースに一連の画像やテキストをループさせる
### 基本的な使い方
:::demo `el-carousel` と `el-carousel-item` を組み合わせれば、carouselができあがります。各スライドの内容は完全にカスタマイズ可能で、`el-carousel-item`タグの中に配置するだけです。デフォルトでは、マウスがインジケータの上にカーソルを置くとcarouselが切り替わります。`trigger`を`click`に設定すると、インジケータがクリックされたときだけcarouselが切り替わります。
```html
<template>
<div class="block">
<span class="demonstration">Switch when indicator is hovered (default)</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="block">
<span class="demonstration">Switch when indicator is clicked</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### インジケータ
インジケータはcarouselの外側に表示することができます。
:::demo `indicator-position` 属性はインジケータの位置を決定します。デフォルトではcarouselの内側にあり、`indicator-position` を `outside` に設定すると外側に移動し、`indicator-position` を `none` に設定するとインジケータは非表示になります。
```html
<template>
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### 矢印
矢印が表示されるタイミングを定義することができます。
:::demo `arrow` 属性は、いつ矢印が表示されるかを決定します。デフォルトでは、マウスがcarouselの上にカーソルを置いたときに表示されます。`arrow` を `always` または `never` に設定すると、矢印を恒久的に表示/非表示にすることができます。
```html
<template>
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### カードモード
ページが十分に広くても高さが限られている場合、carouselのカードモードを有効にすることができます。
:::demo `type` を `card` にするとカードモードになります。見た目とは別に、カードモードと共通モードの最大の違いは、両側のスライドをクリックするとcarouselが直接カードモードに切り替わることです。
```html
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
デフォルトでは `direction` は `horizontal` である。`direction` を `vertical` に設定することで、carouselを垂直方向に表示させることができる。
:::demo
```html
<template>
<el-carousel height="200px" direction="vertical" :autoplay="false">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### carousel属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | carouselの高さ | string | — | — |
| initial-index | アクティブになったスライドのインデックス(0始まり) | number | — | 0 |
| trigger | インディケータの発動方法 | string | hover/click | hover |
| autoplay | スライドを自動的にループさせるかどうか | boolean | — | true |
| interval | 自動ループの間隔 (ミリ秒単位) | number | — | 3000 |
| indicator-position | インディケータの位置 | string | outside/none | — |
| arrow | 矢印が表示されている場合 | string | always/hover/never | hover |
| type | carouselのタイプ | string | card | — |
| loop | ループ表示 | boolean | - | true |
| direction | 表示方向 | string | horizontal/vertical | horizontal |
### carouselイベント
| Event Name | Description | Parameters |
|---------|---------|---------|
| change | アクティブなスライドが切り替わったときにトリガされます。 | index of the new active slide, index of the old active slide |
### carouselメソッド
| Method | Description | Parameters |
|---------- |-------------- | -- |
| setActiveItem | 手動でスライドを切り替える | index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` |
| prev | 前のスライドに切り替える | — |
| next | 次のスライドに移る | — |
### carousel-アイテム属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| name | アイテムの名前は `setActiveItem` で使われています。 | string | — | — |
| label | 対応するインジケータのテキスト内容 | string | — | — |

1987
website/docs/jp/cascader.md Normal file
View File

File diff suppressed because it is too large Load Diff

284
website/docs/jp/checkbox.md Normal file
View File

@ -0,0 +1,284 @@
## Checkbox
複数の選択肢がある場合の選択肢グループ
### 基本的な使い方
checkbox単独で使用して2つの状態を切り替えることができます。
:::demo `el-checkbox` の `v-model` バインド変数)を定義する。デフォルト値は単一の `checkbox` の場合、 `Boolean` で、チェックを選択した場合は `true` になります。el-checkbox`タグ内の内容は、checkboxのボタンに続く説明文になります。
```html
<template>
<!-- `checked` should be true or false -->
<el-checkbox v-model="checked">Option</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked: true
};
}
};
</script>
```
:::
### 無効状態
checkboxを無効にした状態。
:::demo `disabled` 属性を設定する。
```html
<template>
<el-checkbox v-model="checked1" disabled>Option</el-checkbox>
<el-checkbox v-model="checked2" disabled>Option</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked1: false,
checked2: true
};
}
};
</script>
```
:::
### Checkboxグループ
1つのグループに固定された複数のcheckboxに使用され、選択肢が選択されているかどうかをチェックして表示します。
:::demo `checkbox-group` 要素は `Array` としてバインドされた `v-model` を用いて複数のcheckboxを一つのグループにまとめて管理することができる。`el-checkbox` 要素の内部では、`label` がcheckboxの値である。このタグにコンテンツが入れ子になっていない場合、`label` はcheckboxのボタンに続く説明文としてレンダリングされます。`label` は配列の要素の値にも対応する。 指定された値が配列に存在する場合は選択され、その逆(指定されていない値は選択されない)も同様である。
```html
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="Option A"></el-checkbox>
<el-checkbox label="Option B"></el-checkbox>
<el-checkbox label="Option C"></el-checkbox>
<el-checkbox label="disabled" disabled></el-checkbox>
<el-checkbox label="selected and disabled" disabled></el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data () {
return {
checkList: ['selected and disabled','Option A']
};
}
};
</script>
```
:::
### 不確定
`indeterminate`プロパティは「すべてをチェックする」効果を加えるのに役立ちます。
:::demo
```html
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default {
data() {
return {
checkAll: false,
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
isIndeterminate: true
};
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
```
:::
### 最小/最大チェック項目
`min` と `max` プロパティは、チェックする項目の数を制限するのに役立つ。
:::demo
```html
<template>
<el-checkbox-group
v-model="checkedCities"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default {
data() {
return {
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions
};
}
};
</script>
```
:::
### ボタンスタイル
ボタンスタイルのcheckbox。
:::demo `EL-CHECKBOX` 要素を `EL-CHECKBOX-BUTTON` 要素に変更すればよい。また、`size` 属性も提供されています。
```html
<template>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default {
data () {
return {
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
cities: cityOptions
};
}
}
</script>
```
:::
### 境界線をつける
:::demo `border`属性はcheckboxに境界線を追加することができます。
```html
<template>
<div>
<el-checkbox v-model="checked1" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked2" label="Option2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked3" label="Option1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup1" size="small">
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data () {
return {
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
};
}
}
</script>
```
:::
### Checkbox属性
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | バインディング値 | string / number / boolean | — | — |
| label | `checkbox-group` の中で使われる場合のcheckboxの値 | string / number / boolean | — | — |
| true-label | checkboxがチェックされている場合は、checkboxの値 | string / number | — | — |
| false-label | checkboxがチェックされていない場合のcheckboxの値 | string / number | — | — |
| disabled | checkboxを無効にするかどうか | boolean | — | false |
| border | checkboxの周りにボーダーを追加するかどうか | boolean | — | false |
| size | checkboxのサイズ、`border` がtrueの場合にのみ動作します。 | string | medium / small / mini | — |
| name | ネイティブ 'name' 属性 | string | — | — |
| checked | checkboxがチェックされているかどうか | boolean | — | false |
| indeterminate | ネイティブcheckboxの `indeterminate` と同じ | boolean | — | false |
### Checkboxのイベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | バインディング値が変更された場合にトリガされます。 | the updated value |
### Checkboxグループの属性
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | バインディング値 | array | — | — |
|size | checkboxのボタンや枠線の大きさ | string | medium / small / mini | — |
| disabled | ネスティングcheckboxを無効にするかどうか | boolean | — | false |
| min | checkboxの最小チェック数 | number | — | — |
| max | checkboxの最大チェック数 | number | — | — |
|text-color | ボタンがアクティブなときのフォント色 | string | — | #ffffff |
|fill | ボタンがアクティブなときの境界線と背景色 | string | — | #409EFF |
### Checkboxグループのイベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | バインディング値が変更された場合にトリガされます。 | the updated value |
### Checkboxボタンの属性
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
| label | `checkbox-group` の中で使われる場合のcheckboxの値 | string / number / boolean | — | — |
| true-label | チェックされている場合の、checkboxの値 | string / number | — | — |
| false-label | チェックされていない場合の、checkboxの値 | string / number | — | — |
| disabled | checkboxを無効にするかどうか | boolean | — | false |
| name | ネイティブ 'name' 属性 | string | — | — |
| checked | checkboxがチェックされているかどうか | boolean | — | false |

131
website/docs/jp/collapse.md Normal file
View File

@ -0,0 +1,131 @@
## Collapse
内容を格納しておくには、コラプスを使用します。
### 基本的な使い方
複数のパネルを展開することができます
:::demo
```html
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="Consistency" name="1">
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
</el-collapse-item>
<el-collapse-item title="Efficiency" name="3">
<div>Simplify the process: keep operating process simple and intuitive;</div>
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
</el-collapse-item>
<el-collapse-item title="Controllability" name="4">
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeNames: ['1']
};
},
methods: {
handleChange(val) {
console.log(val);
}
}
}
</script>
```
:::
### アコーディオン
アコーディオンモードでは、一度に1つのパネルだけを拡大することができます。
:::demo アコーディオンモードを `accordion` アトリビュートを使って起動します。
```html
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="Consistency" name="1">
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
</el-collapse-item>
<el-collapse-item title="Efficiency" name="3">
<div>Simplify the process: keep operating process simple and intuitive;</div>
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
</el-collapse-item>
<el-collapse-item title="Controllability" name="4">
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeName: '1'
};
}
}
</script>
```
:::
### カスタムタイトル
`title`属性を使う以外にも、名前付きスロットを使ってパネルのタイトルをカスタマイズすることができ、アイコンなどのカスタムコンテンツを追加することができます。
:::demo
```html
<el-collapse accordion>
<el-collapse-item name="1">
<template slot="title">
Consistency<i class="header-icon el-icon-info"></i>
</template>
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
</el-collapse-item>
<el-collapse-item title="Efficiency" name="3">
<div>Simplify the process: keep operating process simple and intuitive;</div>
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
</el-collapse-item>
<el-collapse-item title="Controllability" name="4">
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
</el-collapse-item>
</el-collapse>
```
:::
### Collapse属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | カレントアクティブパネル | string (accordion mode) / array (non-accordion mode) | — | — |
| accordion | アコーディオンモードにするかどうか | boolean | — | false |
### Collapseイベント
| Event Name | Description | Parameters |
|---------|---------|---------|
| change | アクティブなパネルが変更されたときにトリガされます。 | (activeNames: array (non-accordion mode) / string (accordion mode)) |
### Collapseアイテム属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| name | パネル固有の識別 | string/number | — | — |
| title | パネルのタイトル | string | — | — |
| disabled | collapseアイテムを無効にする | boolean | — | — |

124
website/docs/jp/color-picker.md Normal file
View File

@ -0,0 +1,124 @@
## Color-picker
color-pickerは、複数のカラーフォーマットに対応したカラーセレクターです。
### 基本的な使い方
:::demo color-pickerは、v-modelにバインドするために文字列型の変数が必要です。
```html
<div class="block">
<span class="demonstration">With default value</span>
<el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
<span class="demonstration">With no default value</span>
<el-color-picker v-model="color2"></el-color-picker>
</div>
<script>
export default {
data() {
return {
color1: '#409EFF',
color2: null
}
}
};
</script>
```
:::
### アルファ
:::demo color-pickerはアルファチャンネルの選択をサポートしています。アルファチャンネルの選択を有効にするには、`show-alpha` アトリビュートを追加するだけです。
```html
<el-color-picker v-model="color" show-alpha></el-color-picker>
<script>
export default {
data() {
return {
color: 'rgba(19, 206, 102, 0.8)'
}
}
};
</script>
```
:::
### 定義済みの色
:::demo color-pickerは事前定義されたカラーオプションをサポートしています。
```html
<el-color-picker
v-model="color"
show-alpha
:predefine="predefineColors">
</el-color-picker>
<script>
export default {
data() {
return {
color: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
}
}
};
</script>
```
:::
### サイズ
:::demo
```html
<el-color-picker v-model="color"></el-color-picker>
<el-color-picker v-model="color" size="medium"></el-color-picker>
<el-color-picker v-model="color" size="small"></el-color-picker>
<el-color-picker v-model="color" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color: '#409EFF'
}
}
};
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | バインディング値 | string | — | — |
| disabled | color-pickerを無効にするかどうか | boolean | — | false |
| size | color-pickerのサイズ | string | — | medium / small / mini |
| show-alpha | アルファスライダーを表示するかどうか | boolean | — | false |
| color-format | v-modelの色形式 | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
| popper-class | color-pickerのドロップダウンのカスタムクラス名 | string | — | — |
| predefine | 定義済みカラーオプション | array | — | — |
### イベント
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | 入力値変更時のトリガ | color value |
| active-change | 現在アクティブな色が変更されたときにトリガされます。 | active color value |

245
website/docs/jp/color.md Normal file
View File

@ -0,0 +1,245 @@
<script>
import bus from '../../bus';
import { tintColor } from '../../color.js';
const varMap = {
'primary': '$--color-primary',
'success': '$--color-success',
'warning': '$--color-warning',
'danger': '$--color-danger',
'info': '$--color-info',
'white': '$--color-white',
'black': '$--color-black',
'textPrimary': '$--color-text-primary',
'textRegular': '$--color-text-regular',
'textSecondary': '$--color-text-secondary',
'textPlaceholder': '$--color-text-placeholder',
'borderBase': '$--border-color-base',
'borderLight': '$--border-color-light',
'borderLighter': '$--border-color-lighter',
'borderExtraLight': '$--border-color-extra-light'
};
const original = {
primary: '#409EFF',
success: '#67C23A',
warning: '#E6A23C',
danger: '#F56C6C',
info: '#909399',
white: '#FFFFFF',
black: '#000000',
textPrimary: '#303133',
textRegular: '#606266',
textSecondary: '#909399',
textPlaceholder: '#C0C4CC',
borderBase: '#DCDFE6',
borderLight: '#E4E7ED',
borderLighter: '#EBEEF5',
borderExtraLight: '#F2F6FC'
}
export default {
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
primary: '',
success: '',
warning: '',
danger: '',
info: '',
white: '',
black: '',
textPrimary: '',
textRegular: '',
textSecondary: '',
textPlaceholder: '',
borderBase: '',
borderLight: '',
borderLighter: '',
borderExtraLight: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(original).forEach((o) => {
if (value[varMap[o]]) {
this[o] = value[varMap[o]]
} else {
this[o] = original[o]
}
});
}
}
},
}
</script>
## カラー
Elementは、特定のパレットセットを用いて色を指定し、プロダクトに一貫した外観と使用感を提供します。
### メインカラー
Elementのメインカラーは明るく親しみやすいブルーです。
<el-row :gutter="12">
<el-col :span="10" :xs="{span: 12}">
<div
class="demo-color-box"
:style="{ background: primary }"
>
Brand Color<div class="value">#409EFF</div>
<div
class="bg-color-sub"
:style="{ background: tintColor(primary, 0.9) }"
>
<div
class="bg-blue-sub-item"
v-for="(item, key) in Array(8)"
:key="key"
:style="{ background: tintColor(primary, (key + 1) / 10) }"
>
</div>
</div>
</div>
</el-col>
</el-row>
### セカンダリカラー
メインカラーの他にも、シーンカラーを別のシナリオで使用する必要があります（例えば、危険な色は危険な操作を示します）。
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box"
:style="{ background: success }"
>Success<div class="value">#67C23A</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(success, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box"
:style="{ background: warning }"
>Warning<div class="value">#E6A23C</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(warning, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box"
:style="{ background: danger }"
>Danger<div class="value">#F56C6C</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(danger, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box"
:style="{ background: info }"
>Info<div class="value">#909399</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(info, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
</el-row>
### ニュートラルカラー
ニュートラルカラーとは、文字色、背景色、枠線の色のことです。ニュートラルカラーを使い分けることで、階層構造を表現することができます。
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPrimary }"
>Primary Text<div class="value">{{textPrimary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textRegular }"
>
Regular Text<div class="value">{{textRegular}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textSecondary }"
>Secondary Text<div class="value">{{textSecondary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPlaceholder }"
>Placeholder Text<div class="value">{{textPlaceholder}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderBase }"
>Base Border<div class="value">{{borderBase}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLight }"
>Light Border<div class="value">{{borderLight}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLighter }"
>Lighter Border<div class="value">{{borderLighter}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderExtraLight }"
>Extra Light Border<div class="value">{{borderExtraLight}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div
class="demo-color-box demo-color-box-other"
:style="{ background: black }"
>Basic Black<div class="value">{{black}}</div></div>
<div
class="demo-color-box demo-color-box-other"
:style="{ background: white, color: '#303133', border: '1px solid #eee' }"
>Basic White<div class="value">{{white}}</div></div>
<div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
</div>
</div>
</el-col>
</el-row>

240
website/docs/jp/container.md Normal file
View File

@ -0,0 +1,240 @@
## コンテナ
ページの基本構造を組み立てるためのコンテナコンポーネント:
`<el-container>`: ラッパーコンテナ。`<el-header>` や `<el-footer>` と入れ子になっている場合、その子要素はすべて垂直方向に配置されます。それ以外の場合は水平に配置されます。
`<el-header>`: ヘッダ用のコンテナ。
`<el-aside>`: サイドセクションのコンテナ (通常はサイドナビ)。
`<el-main>`: メインセクションのコンテナ。
`<el-footer>`: フッター用のコンテナ。
:::tip
これらのコンポーネントはレイアウトにフレックスを使用していますので、ブラウザがフレックスをサポートしていることを確認してください。また、`<el-container>`の直接の子要素は`el-container` 以下の4つのコンポーネントのうちの1つ以上でなければなりません。また、4つの要素の親要素は `<el-container>` でなければなりません。
:::
### 共通レイアウト
:::demo
```html
<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>
<style>
.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;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
```
:::
### 例
:::demo
```html
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>Tom</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
</el-table-column>
<el-table-column prop="name" label="Name" width="120">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
```
:::
### コンテナ属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| direction | 子要素のレイアウト方向 | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
### ヘッダー属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | ヘッダーの高さ | string | — | 60px |
### アサイド属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| width | サイドセクションの幅 | string | — | 300px |
### フッター属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | フッターの高さ | string | — | 60px |

133
website/docs/jp/custom-theme.md Normal file
View File

@ -0,0 +1,133 @@
## カスタムテーマ
要素はBEMスタイルのCSSを使用しているので、スタイルを簡単に上書きすることができます。しかし、テーマの色を青からオレンジや緑に変更するなど、大規模にスタイルを置き換える必要がある場合は、1つずつオーバーライドするのはあまり良いアイデアではないかもしれません。スタイル変数を変更する方法を4つ用意しています。
### テーマローラー
[オンライン テーマ ローラー](./#/en-US/theme) を使うことで、グローバル変数とコンポーネントのすべてのデザイントークンをカスタマイズでき、新しいテーマをプレビューさせることが出来ます。そして
また、[Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)を使用することで、Elementで開発したWebサイトのテーマをカスタマイズしたり、リアルタイムでプレビューしたりすることができます。
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
### テーマカラーの変更
Elementのテーマカラーを変更したいなら、[テーマプレビューサイト](https://elementui.github.io/theme-chalk-preview/#/en-US)がおすすめです。Elementのテーマカラーは、明るくて親しみやすいブルーです。これを変更することで、Elementをより視覚的に特定のプロジェクトに結びつけることができます。
上記のウェブサイトでは、リアルタイムで新しいテーマカラーのテーマをプレビューすることができ、あなたが直接ダウンロードするために新しいテーマカラーに基づいた完全なスタイルパッケージを生成することができます（あなたのプロジェクトで新しいスタイルファイルをインポートするには、このセクションの `カスタムテーマをインポート` または `コンポーネントテーマをオンデマンドでインポート` の部分を参照してください）。
### プロジェクト内の SCSS 変数を更新する
`theme-chalk` はSCSSで書かれています。プロジェクトでもSCSSを使用している場合は、Elementのスタイル変数を直接変更することができます。例えば `element-variables.scss` のように、新しいスタイルファイルを作成します :
```html
/* theme color */
$--color-primary: teal;
/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
```
そして、プロジェクトのエントリーファイルで、Elementの内蔵CSSの代わりにこのスタイルファイルをインポートします。:
```JS
import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)
```
:::tip
アイコンのフォントパスをElementのフォントファイルの相対パスにオーバーライドする必要があるので注意してください。
:::
### CLIテーマツール
プロジェクトがSCSSを使用していない場合は、CLIテーマツールを使用してテーマをカスタマイズすることができます:
#### <strong>インストール</strong>
はじめにテーマジェネレータをグローバルまたはローカルにインストールします。ローカルにインストールすることをお勧めします。なぜなら、他の人があなたのプロジェクトをクローンしたときに npm が自動的にインストールしてくれるからです。
```shell
npm i element-theme -g
```
そして、npmやGitHubからchalkテーマをインストールします。
```shell
# from npm
npm i element-theme-chalk -D
# from GitHub
npm i https://github.com/ElementUI/theme-chalk -D
```
#### <strong>変数ファイルの初期化</strong>
上記のパッケージのインストールに成功すると、CLIで `et` というコマンドが利用できます(ローカルにインストールされている場合は、代わりに `node_modules/.bin/et` を利用してください)。デフォルトで `element-variables.scss` に出力される変数ファイルを初期化するために `-i` を実行してください。初期化されたファイルはデフォルトで `element-variables.scss` に出力されます。
```shell
et -i [custom output file]
> ✔ Generator variables file
```
`element-variables.scss` の中には、Elementのスタイル設定に使用したすべての変数があり、SCSS形式で定義されています。以下はその一部です。:
```css
$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;
...
```
#### <strong>変数の変更</strong>
`element-variables.scss`を編集するだけです。例えば、テーマの色を赤に変更するは以下の通りです:
```CSS
$--color-primary: red;
```
#### <strong>ビルドテーマ</strong>
変数ファイルを保存したら、`et` を使って自分のテーマを構築してください。 パラメータ `-w` を追加することで、`watch` モードを有効にすることができます。また、変数ファイルの出力をカスタマイズした場合は、パラメータ `-c` と変数ファイル名を追加する必要があります。デフォルトでは、ビルドテーマファイルは `./theme` 内に置かれます。パラメータ `-o` で出力ディレクトリを指定することができます。
```shell
et
> ✔ build theme font
> ✔ build element theme
```
### カスタムテーマを使用する
#### <strong>カスタムテーマをインポートする</strong>
独自のテーマをインポートすることは、デフォルトのテーマをインポートするのと同じですが、今回は `オンラインテーマローラー` または`CLIツール` からビルドされたファイルをインポートします。
```javascript
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
```
#### <strong>コンポーネントテーマをオンデマンドでインポート</strong>
オンデマンドインポートに `babel-plugin-component` を使用している場合は、`.babelrc` を修正し、`styleLibraryName` を `.babelrc` からの相対パスにカスタムテーマが置かれているパスに指定するだけです。 `~` は必須であることに注意してください。
```json
{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]
]
}
```
もし、`babel-plugin-component`に慣れていない場合は、<a href="./#/en-US/component/quickstart">クイックスタート</a>を参照してください。詳細は `element-theme` の [project repository](https://github.com/ElementUI/element-theme) を参照してください。

490
website/docs/jp/date-picker.md Normal file
View File

@ -0,0 +1,490 @@
## Date-picker(date-picker)
日付の入力にはdate-pickerを使用します。
### 日付の入力
'日'で計測する基本的なdate-picker。
:::demo 測定は `type` 属性で決定されます。クイックオプションを有効にするには、`shortcuts` プロパティを持つ `picker-options` オブジェクトを作成する。無効な日付は関数 `disabledDate` で設定する。
```html
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Picker with quick options</span>
<el-date-picker
v-model="value2"
type="date"
placeholder="Pick a day"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: 'Today',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: 'Yesterday',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: 'A week ago',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: '',
};
}
};
</script>
```
:::
### その他の測定
標準のdate-pickerコンポーネントを拡張することで、週、月、年、または複数の日付を選択することができます。
:::demo
```html
<div class="container">
<div class="block">
<span class="demonstration">Week</span>
<el-date-picker
v-model="value1"
type="week"
format="Week WW"
placeholder="Pick a week">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Month</span>
<el-date-picker
v-model="value2"
type="month"
placeholder="Pick a month">
</el-date-picker>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">Year</span>
<el-date-picker
v-model="value3"
type="year"
placeholder="Pick a year">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Dates</span>
<el-date-picker
type="dates"
v-model="value4"
placeholder="Pick one or more dates">
</el-date-picker>
</div>
</div>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: ''
};
}
};
</script>
```
:::
### 日付範囲
日付範囲のピックに対応しています。
:::demo 範囲モードの場合、デフォルトでは左右のパネルはリンクされています。2つのパネルを独立して現在の月を切り替えたい場合は、`unlink-panels` 属性を使うことができます。
```html
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'Last week',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last month',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last 3 months',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>
```
:::
### 月の範囲
月の範囲のピッキングに対応しています。
:::demo 範囲モードの場合、デフォルトでは左右のパネルはリンクされています。2つのパネルを独立して現在の年を切り替えたい場合は、`unlink-panels` 属性を使うことができます。
```html
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="monthrange"
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'This month',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: 'This year',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last 6 months',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit('pick', [start, end]);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>
```
:::
### デフォルト値
ユーザが日付を指定していない場合は、デフォルトで今日のカレンダーを表示する。別の日付を設定するには `default-value` を用いることができる。その値は `new Date()` で解析可能でなければならない。
型が `daterange` の場合、`default-value` は左側のカレンダーを設定する。
:::demo
```html
<template>
<div class="block">
<span class="demonstration">date</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a date"
default-value="2010-10-01">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">daterange</span>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
start-placeholder="Start Date"
end-placeholder="End Date"
default-value="2010-10-01">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: ''
};
}
};
</script>
```
:::
### 日付のフォーマット
入力ボックスに表示されるテキストの書式を制御するには `format` を用いる。値の書式を制御するには `value-format` を用いる。
デフォルトでは、コンポーネントは `Date` オブジェクトを受け入れて出力します。以下に UTC 2017-01-02 03:04:05 を例に、サポートされているフォーマット文字列を示します。
:::warning
大文字化に注意
:::
| format | meaning | note | example |
|------|------|------|------|------|
| `yyyy` | 年 | | 2017 |
| `M` | 月 | no leading 0 | 1 |
| `MM` | 月 | | 01 |
| `MMM` | 月 | | Jan |
| `MMMM` | 月 | | January |
| `W` | 月 | only for week picker's `format`; no leading 0 | 1 |
| `WW` | 週 | only for week picker's `format`| 01 |
| `d` | 日 | no leading 0 | 2 |
| `dd` | 日 | | 02 |
| `H` | 時 | 24-hour clock; no leading 0 | 3 |
| `HH` | 時 | 24-hour clock | 03 |
| `h` | 時 | 12-hour clock; must be used with `A` or `a`; no leading 0 | 3 |
| `hh` | 時 | 12-hour clock; must be used with `A` or `a` | 03 |
| `m` | 分 | no leading 0 | 4 |
| `mm` | 分 | | 04 |
| `s` | 秒 | no leading 0 | 5 |
| `ss` | 秒 | | 05 |
| `A` | 午前/午後 | only for `format`, uppercased | AM |
| `a` | 午前/午後 | only for `format`, lowercased | am |
| `timestamp` | JS タイムスタンプ | only for `value-format`; binding value will be a `number` | 1483326245000 |
| `[MM]` | エスケープしない文字 | To escape characters, wrap them in square brackets (e.g. [A] [MM]) | MM |
:::demo
```html
<template>
<div class="block">
<span class="demonstration">Emits Date object</span>
<div class="demonstration">Value: {{ value1 }}</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Use value-format</span>
<div class="demonstration">Value: {{ value2 }}</div>
<el-date-picker
v-model="value2"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Timestamp</span>
<div class="demonstration">Value：{{ value3 }}</div>
<el-date-picker
v-model="value3"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd"
value-format="timestamp">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: ''
};
}
};
</script>
```
:::
### 開始日と終了日のデフォルト時刻
日付範囲を選択する際に、開始日と終了日に時間部分を割り当てることができます。
:::demo デフォルトでは、開始日と終了日の時刻部分はともに `00:00:00` である。`default-time` を設定することで、それぞれの時刻を変更することができる。12:00:00` の形式で最大2つの文字列の配列を受け付ける。最初の文字列には開始日の時刻を、2番目の文字列には終了日の時刻を設定する。
```html
<template>
<div class="block">
<p>Component value：{{ value }}</p>
<el-date-picker
v-model="value"
type="daterange"
start-placeholder="Start date"
end-placeholder="End date"
:default-time="['00:00:00', '23:59:59']">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | バインディング値 | date(DatePicker) / array(DateRangePicker) | — | — |
| readonly | date-pickerが読み取り専用かどうか | boolean | — | false |
| disabled | date-pickerが無効かどうか | boolean | — | false |
| size | インプットサイズ | string | large/small/mini | — |
| editable | 入力は編集可能かどうか | boolean | — | true |
| clearable | クリアボタンをみせるかどうか | boolean | — | true |
| placeholder | 非範囲モード時のプレースホルダ | string | — | — |
| start-placeholder | 範囲モードでの開始日のプレースホルダ | string | — | — |
| end-placeholder | 範囲終了日のプレースホルダ | string | — | — |
| type | ピッカーのタイプ | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
| format | 入力ボックスの表示値のフォーマット | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd |
| align | アライメント | left/center/right | left |
| popper-class | date-pickerのドロップダウン用カスタムクラス名 | string | — | — |
| picker-options | その他のオプションについては、以下の表を参照してください。 | object | — | {} |
| range-separator | 範囲セパレータ | string | — | '-' |
| default-value | オプション、カレンダーのデフォルトの日付 | Date | anything accepted by `new Date()` | — |
| default-time | オプション、日付範囲を選択する際に使用する時間値 | string[] | Array with length 2, each item is a string like `12:00:00`. The first item for the start date and then second item for the end date | — |
| value-format | オプションで、バインディング値のフォーマットを指定します。指定しない場合、バインディング値は Date オブジェクトになります。 | string | see [date formats](#/en-US/component/date-picker#date-formats) | — |
| name | ネイティブ入力の `name` と同じ | string | — | — |
| unlink-panels | 範囲ピッカーで2つのデータパネルのリンクを解除する | boolean | — | false |
| prefix-icon | カスタムプレフィックスアイコン | string | — | el-icon-date |
| clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
| validate-event | フォームバリデーションをトリガするかどうか | boolean | - | true |
### ピッカーオプション
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | ショートカットオプションを設定するための { text, onClick } オブジェクトの配列は、以下の表を確認してください。 | object[] | — | — |
| disabledDate | 日付をパラメータとして、その日付が無効化されているかどうかを判断する関数です。ブーリアンを返す必要があります。 | function | — | — |
| cellClassName | セットカスタムクラス名 | Function(Date) | — | — |
| firstDayOfWeek | 週の初日 | Number | 1 to 7 | 7 |
| onPick | 選択された日付が変更されたときにトリガーするコールバックです。`daterange` と `datetimerange` のみ。 | Function({ maxDate, minDate }) | - | - |
### ショートカット
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| text | ショートカットのタイトル | string | — | — |
| onClick | コールバック関数は、ショートカットがクリックされたときに `vm` をパラメータとしてトリガーします。pick` イベントを発行することでピッカーの値を変更することができます。例: `vm.$emit('pick', new Date())`| function | — | — |
### イベント
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | ユーザーが値を確認したときにトリガされます。 | component's binding value |
| blur | インプットがぼやけたときされます | component instance |
| focus | 入力がフォーカスされているときにトリガされます。 | component instance |
### 方法
| Method | Description | Parameters |
|------|--------|-------|
| focus | インプットコンポーネントにフォーカス | — |
### スロット
| Name | Description |
|---------|-------------|
| range-separator | カスタム範囲区切りコンテンツ |

241
website/docs/jp/datetime-picker.md Normal file
View File

@ -0,0 +1,241 @@
## DateTimePicker
1つのピッカーで日時を選択します。
:::tip
DateTimePickerはDatePickerとTimePickerから派生したものです。`pickerOptions`やその他の属性についての詳しい説明は、DatePickerとTimePickerを参照してください。
:::
### 日付と時間
:::demo `type`を`datetime`に設定することで、1つのピッカーで日付と時刻を同時に選択することができます。ショートカットの使い方は日付ピッカーと同じです。
```html
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="Select date and time">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With shortcuts</span>
<el-date-picker
v-model="value2"
type="datetime"
placeholder="Select date and time"
:picker-options="pickerOptions">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With default time</span>
<el-date-picker
v-model="value3"
type="datetime"
placeholder="Select date and time"
default-time="12:00:00">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'Today',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: 'Yesterday',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: 'A week ago',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: '',
value3: ''
};
}
};
</script>
```
:::
### 日付と時間の範囲
:::demo `type`を`datetimerange`に設定することで、日付と時間の範囲を選択することができる。
```html
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With shortcuts</span>
<el-date-picker
v-model="value2"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'Last week',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last month',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last 3 months',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
};
}
};
</script>
```
:::
### 開始日と終了日のデフォルトの時間値
:::demo 日付パネルで `datetimerange` 型の日付範囲を選択した場合、開始日と終了日のデフォルト値として `00:00:00` が用いられる。これは `default-time` 属性で制御することができる。`default-time`は最大2つの文字列の配列を受け付ける。1つ目の項目は開始日の時刻を制御し、2つ目の項目は終了日の時刻を制御する。
```html
<template>
<div class="block">
<span class="demonstration">Start date time 12:00:00</span>
<el-date-picker
v-model="value1"
type="datetimerange"
start-placeholder="Start Date"
end-placeholder="End Date"
:default-time="['12:00:00']">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
<el-date-picker
v-model="value2"
type="datetimerange"
align="right"
start-placeholder="Start Date"
end-placeholder="End Date"
:default-time="['12:00:00', '08:00:00']">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: ''
};
}
};
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | バインディング値 | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
| readonly | DatePicker が読み取り専用かどうか | boolean | — | false |
| disabled | DatePicker が無効かどうか | boolean | — | false |
| editable | DatePicker が編集可能かどうか | boolean | — | true |
| clearable | クリアボタンを表示するかどうか | boolean | — | true |
|size | インプットサイズ | string | large/small/mini | — |
| placeholder | 非範囲モード時のプレースホルダ | string | — | — |
| start-placeholder | 範囲モードでの開始日のプレースホルダ | string | — | — |
| end-placeholder | 範囲終了日のプレースホルダ | string | — | — |
| time-arrow-control | 矢印ボタンで時間を選ぶかどうか | boolean | — | false |
| type | ピッカーのタイプ | string | year/month/date/datetime/ week/datetimerange/daterange | date |
| format | インプットボックスの表示値のフォーマット | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd HH:mm:ss |
| align | アライメント | left/center/right | left |
| popper-class | DateTimePickerのドロップダウンのカスタムクラス名 | string | — | — |
| picker-options | 追加のオプションについては、以下の表を参照してください。 | object | — | {} |
| range-separator | レンジセパレータ | string | - | '-' |
| default-value | オプション、カレンダーのデフォルトの日付 | Date | anything accepted by `new Date()` | — |
| default-time | 日付を選択した後のデフォルトの時刻の値 | non-range: string / range: string[] | non-range: a string like `12:00:00`, range: array of two strings, and the first item is for the start date and second for the end date. `00:00:00` will be used if not specified | — |
| value-format | オプションで、バインディング値のフォーマットを指定します。指定しない場合、バインディング値は Date オブジェクトになります。 | string | see [date formats](#/en-US/component/date-picker#date-formats) | — |
| name | ネイティブインプットの `name` と同じ | string | — | — |
| unlink-panels | レンジピッカーで2つのデータパネルのリンクを解除する | boolean | — | false |
| prefix-icon | カスタムプレフィックスアイコンクラス | string | — | el-icon-date |
| clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
### ピッカーオプション
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
### ショートカット
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| text | title of the shortcut | string | — | — |
| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
### イベント
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
### メソッド
| Method | Description | Parameters |
|------|--------|-------|
| focus | focus the Input component | — |

239
website/docs/jp/dialog.md Normal file
View File

@ -0,0 +1,239 @@
現在のページの状態を保持したまま、ユーザーに情報を提供します。
### 基本的な使い方
dialog はdialogボックスをポップアップ表示します。
:::demo `visible` 属性に `Boolean` を設定し、それが `true` のときにdialogを表示します。dialogは `body` と `footer` の2つの部分からなり、後者は `footer` という名前の `スロット` を必要とします。オプションの `title` 属性 (デフォルトでは空) はタイトルを定義するためのものです。最後に、この例では `before-close` がどのように使われるかを示します。
```html
<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
<el-dialog
title="Tips"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>This is a message</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
this.$confirm('Are you sure to close this dialog?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
:::tip
`before-close` はユーザが閉じるアイコンか背景をクリックしたときにのみ動作します。footerer` という名前のスロットにdialogを閉じるボタンがある場合、ボタンのクリックイベントハンドラに `before-close` と同じように `before-close` を追加することができます。
:::
### カスタマイズ
dialog の内容は何でも構いません、テーブルやフォームであっても構いません。この例では、要素テーブルとフォームを dialog で使う方法を示しています。
:::demo
```html
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>
<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="Date" width="150"></el-table-column>
<el-table-column property="name" label="Name" width="200"></el-table-column>
<el-table-column property="address" label="Address"></el-table-column>
</el-table>
</el-dialog>
<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>
<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="Promotion name" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Zones" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="Please select a zone">
<el-option label="Zone No.1" value="shanghai"></el-option>
<el-option label="Zone No.2" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
gridData: [{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-03',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
};
}
};
</script>
```
:::
### ネストされたdialog
あるdialogが他のdialogにネストになっている場合は `append-to-body` が必要です。
:::demo 通常、ネストになったdialogを使うことはお勧めしません。複数のdialogをページ上でレンダリングしたい場合は、単にそれらをフラットにして隣接することができます。dialogを別のdialogの中に入れ子にしなければならない場合は、入れ子にしたdialogの `append-to-body` を true に設定すると、親ノードではなくボディに追加され、両方のdialogが正しくレンダリングされます。
```html
<template>
<el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
<el-dialog title="Outer Dialog" :visible.sync="outerVisible">
<el-dialog
width="30%"
title="Inner Dialog"
:visible.sync="innerVisible"
append-to-body>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">Cancel</el-button>
<el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
innerVisible: false
};
}
}
</script>
```
:::
### 中央揃えコンテンツ
dialogの内容を中央揃えにすることができます。
:::demo `center` を `true` に設定すると、dialogのヘッダとフッタを水平方向に中央揃えにします。`center`はDialogのヘッダとフッタにのみ影響します。dialogのボディは何でもいいので、中央揃えにすると見栄えが悪くなることがあります。ボディも中央揃えにしたい場合は、CSSを書く必要があります。
```html
<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
<el-dialog
title="Warning"
:visible.sync="centerDialogVisible"
width="30%"
center>
<span>It should be noted that the content will not be aligned in center by default</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
centerDialogVisible: false
};
}
};
</script>
```
:::
:::tip
dialogの内容は遅延的にレンダリングされます。つまり、デフォルトのスロットは最初に開かれるまで DOM にレンダリングされません。したがって、DOM の操作を行ったり `ref` を使ってコンポーネントにアクセスする必要がある場合は、`open` イベントコールバックで行います。
:::
:::tip
Vuexストアで `visible` にバインドされた変数を管理している場合、`.sync` が正しく動作しません。この場合は、`.sync` モディファイアを削除し、Dialog の `open`, `close` イベントをリッスンし、Vuex のミューテーションをコミットして、イベントハンドラでその変数の値を更新してください。
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| visible | dialogの可視性、.sync 修飾子をサポートしています。 | boolean | — | false |
| title | dialogのタイトルを指定します。名前付きスロットで渡すこともできます (次のテーブルを参照してください)。 | string | — | — |
| width | dialogの幅 | string | — | 50% |
| fullscreen | dialogが全画面を占めるかどうか | boolean | — | false |
| top | dialogCSSの `margin-top` の値 | string | — | 15vh |
| modal | マスクが表示されているかどうか | boolean | — | true |
| modal-append-to-body | モーダルを ボディ要素に追加するかどうかを指定します。false の場合、モーダルはdialogの親要素に追加されます。 | boolean | — | true |
| append-to-body | dialog自身をボディに追加するかどうかを指定します。入れ子になったdialogは、この属性を `true` に設定しなければなりません。 | boolean | — | false |
| lock-scroll | dialog表示中にボディのスクロールを無効にするかどうか | boolean | — | true |
| custom-class | dialog用のカスタムクラス名 | string | — | — |
| close-on-click-modal | マスクをクリックしてdialogを閉じることができるかどうか | boolean | — | true |
| close-on-press-escape | ESC を押してdialogを閉じることができるかどうか | boolean | — | true |
| show-close | 閉じるボタンを表示するかどうか | boolean | — | true |
| before-close | コールバックを使用することで、dialogが閉じるのを防ぐことができます。 | function(done)，done is used to close the Dialog | — | — |
| center | ヘッダーとフッターを中央に配置するかどうか | boolean | — | false |
| destroy-on-close | dialogを閉じたときにdialog内の要素を破棄する | boolean | — | false |
### スロット
| Name | Description |
|------|--------|
| — | dialogの内容 |
| title | dialogタイトルの内容 |
| footer | dialogフッターの内容 |
### イベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| open | dialogが開いたときにトリガーされます。 | — |
| opened | dialogのオープニングアニメーションが終了したときにトリガーされます。 | — |
| close | dialogが閉じたときにトリガーされます。 | — |
| closed | dialog終了アニメーションの終了時にトリガーされます。 | — |

61
website/docs/jp/divider.md Normal file
View File

@ -0,0 +1,61 @@
## Divider(仕切り)
内容を区切る仕切り線。
### 基本的な使い方
異なる段落のテキストを分割します。
:::demo
```html
<template>
<div>
<span>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span>
<el-divider></el-divider>
<span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span>
</div>
</template>
```
:::
### カスタムコンテンツ
仕切り線の内容をカスタマイズすることができます。
:::demo
```html
<template>
<div>
<span>What you are you do not see, what you see is your shadow. </span>
<el-divider content-position="left">Rabindranath Tagore</el-divider>
<span>I cannot choose the best. The best chooses me.</span>
<el-divider><i class="el-icon-star-on"></i></el-divider>
<span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>
<el-divider content-position="right">Rabindranath Tagore</el-divider>
</div>
</template>
```
:::
### 縦Divider(仕切り)
:::demo
```html
<template>
<div>
<span>Rain</span>
<el-divider direction="vertical"></el-divider>
<span>Home</span>
<el-divider direction="vertical"></el-divider>
<span>Grass</span>
</div>
</template>
```
:::
### Divider(仕切り)属性
| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| direction | 仕切りの方向を設定 | string | horizontal / vertical | horizontal |
| content-position | 仕切り線の内容をカスタマイズする | String | left / right / center | center |

305
website/docs/jp/drawer.md Normal file
View File

@ -0,0 +1,305 @@
## Drawer
例えば、巨大なフォームを持っていたり、`terms & conditions` のようなものを表示するためのスペースが必要な場合、`Drawer` は `Dialog` とほぼ同じ API を持っていますが、ユーザーエクスペリエンスが異なります。
### 基本的な使い方
一時的にDrawerを多方向から呼び出す
:::demo `Drawer` には `Dialog` のように `visible` を設定して `Drawer` 自体の表示を制御する必要があります。`title` は名前付きスロットで、タイトルは `title` という属性を使って設定することもできます。デフォルトでは、`Drawer`はブラウザウィンドウの**30%**の大きさの**右隅から**左隅に向かって展開します。このデフォルトの動作を変更するには、`direction` と `size` 属性を設定します。このショーケースでは `before-close` API の使い方も紹介しました。さらに詳しく知りたい場合は Attributesセクションもご覧ください。
```html
<el-radio-group v-model="direction">
<el-radio label="ltr">left to right</el-radio>
<el-radio label="rtl">right to left</el-radio>
<el-radio label="ttb">top to bottom</el-radio>
<el-radio label="btt">bottom to top</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<span>Hi, there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
direction: 'rtl',
};
},
methods: {
handleClose(done) {
this.$confirm('Are you sure you want to close this?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
### タイトルなし
タイトルが不要になったら、引き出しからタイトルを外すことができます。
:::demo withHeader`属性を**false**に設定すると、タイトルを削除することができます。アクセスしやすいようにしたい場合は、`title`属性を設定してください。
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:with-header="false">
<span>Hi there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
};
}
};
</script>
```
:::
### カスタマイズコンテンツ
ダイアログと同様に、`Drawer`はあなたが望むように多くの多様なインタラクションを行うことができる。
:::demo
```html
<el-button type="text" @click="table = true">Open Drawer with nested table</el-button>
<el-button type="text" @click="dialog = true">Open Drawer with nested form</el-button>
<el-drawer
title="I have a nested table inside!"
:visible.sync="table"
direction="rtl"
size="50%">
<el-table :data="gridData">
<el-table-column property="date" label="Date" width="150"></el-table-column>
<el-table-column property="name" label="Name" width="200"></el-table-column>
<el-table-column property="address" label="Address"></el-table-column>
</el-table>
</el-drawer>
<el-drawer
title="I have a nested form inside!"
:before-close="handleClose"
:visible.sync="dialog"
direction="ltr"
custom-class="demo-drawer"
ref="drawer"
>
<div class="demo-drawer__content">
<el-form :model="form">
<el-form-item label="Name" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Area" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="Please select activity area">
<el-option label="Area1" value="shanghai"></el-option>
<el-option label="Area2" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="cancelForm">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
</el-drawer>
<script>
export default {
data() {
return {
table: false,
dialog: false,
loading: false,
gridData: [{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City'
}],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '80px',
timer: null,
};
},
methods: {
handleClose(done) {
if (this.loading) {
return;
}
this.$confirm('Do you want to submit?')
.then(_ => {
this.loading = true;
this.timer = setTimeout(() => {
done();
// animation takes time
setTimeout(() => {
this.loading = false;
}, 400);
}, 2000);
})
.catch(_ => {});
},
cancelForm() {
this.loading = false;
this.dialog = false;
clearTimeout(this.timer);
}
}
}
</script>
```
:::
### 入れ子にしたDrawer
`Dialog` のように `Drawer` を複数のレイヤーで構成することもできる。
:::demo 異なるレイヤーに複数のDrawerが必要な場合は、`append-to-body` 属性を **true** に設定しなければなりません。
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I'm outer Drawer"
:visible.sync="drawer"
size="50%">
<div>
<el-button @click="innerDrawer = true">Click me!</el-button>
<el-drawer
title="I'm inner Drawer"
:append-to-body="true"
:before-close="handleClose"
:visible.sync="innerDrawer">
<p>_(:зゝ∠)_</p>
</el-drawer>
</div>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
innerDrawer: false,
};
},
methods: {
handleClose(done) {
this.$confirm('You still have unsaved data, proceed?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
:::tip
Drawer内のコンテンツは遅延レンダリングされるべきであり、これはDrawer内のコンテンツが初期レンダリングのパフォーマンスに影響を与えないことを意味します。したがって、DOM の操作は `ref` を介して行うか、`open` イベントが発生した後に行うべきである。
:::
:::tip
Drawerは `destroyOnClose` というAPIを提供しています。これはフラグ変数であり、Drawerが閉じられた後にDrawer内の子コンテンツを破棄することを示します。Drawerが開くたびに `mounted` ライフサイクルを呼び出す必要がある場合にこのAPIを利用することができます。
:::
:::tip
Vuexストアで `visible` にバインドされた変数を管理している場合、`.sync` が正しく動作しません。この場合は、`.sync` 修飾子を削除し、Dialog の `open`, `close` イベントをリッスンし、Vuex ミューテーションをイベントハンドラでその変数の値を更新するよう、コミットします。
:::
### Drawer属性
| Parameter| Description | Type | Acceptable Values | Defaults |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| append-to-body | DrawerがDocumentBody要素に挿入されている場合のコントロールは、ネストされたDrawerはこのパラメータを**true**に割り当てなければなりません。| boolean | — | false |
| before-close | 設定されている場合は、終了処理を停止します。 | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
| close-on-press-escape | ESC を押してDrawerを閉じることができるかどうかを示す。 | boolean | — | true |
| custom-class | Drawerの追加クラス名 | string | — | — |
| destroy-on-close | Drawerが閉じた後にChildrenが破壊されるべきかどうかを示す | boolean | - | false |
| modal | シャドウイングレイヤーを表示するか | boolean | — | true |
| modal-append-to-body | シャドウイングレイヤーをDocumentBody要素に挿入するかどうかを示す。 | boolean | — | true |
| direction | Drawerの開き方向 | Direction | rtl / ltr / ttb / btt | rtl |
| show-close | Drawerの右上に閉じるボタンを表示するようにした | boolean | — | true |
| size | Drawerのサイズ, ドローワが水平モードの場合は幅プロパティ, そうでない場合は高さプロパティ, サイズが `number` 型の場合はピクセル単位でサイズを記述します; サイズが `string` 型の場合は `x%` 記法を用います, それ以外の場合はピクセル単位で解釈されます | number / string | - | '30%' |
| title | Drawerのタイトルは、スロットの名前を指定して設定することもできます。 | string | — | — |
| visible | Drawerを表示する場合は、`.sync` 記法もサポートします。 | boolean | — | false |
| wrapperClosable | シャドウイングレイヤーをクリックしてDrwerを閉じることができるかどうかを示します。 | boolean | - | true |
| withHeader | デフォルトは true で、withHeader が false に設定されている場合は `title attribute` と `title slot` の両方が動作しません。 | boolean | - | true |
### Drawerスロット
| Name | Description |
|------|--------|
| — | Drawerの内容 |
| title | Drawerタイトルセクション |
### Drawerメソッド
| Name | Description |
| ---- | --- |
| closeDrawer | Drawerを閉じるには、このメソッドは `before-close` を呼び出す。 |
### Drawerイベント
| Event Name | Description | Parameter |
|---------- |-------- |---------- |
| open | Drawerのオープニングアニメーションが始まる前にトリガーされます。 | — |
| opened | Drawerのオープニングアニメーションが終わった後にトリガーされます。 | — |
| close | Drawerのクロージングアニメーションが始まる前にトリガーされます。 | — |
| closed | Drawerのクロージングアニメーションが終わった後にトリガーされます。 | — |

303
website/docs/jp/dropdown.md Normal file
View File

@ -0,0 +1,303 @@
## Dropdown
リンクとアクションのリストを表示するためのトグルメニュー
### 基本的な使い方
dropdownメニューの上にカーソルを置くと、より多くのアクションが展開されます。
:::demo トリガ要素はデフォルトの `slot` でレンダリングされ、dropdown部分は `dropdown` という名前の `slot` でレンダリングされます。デフォルトでは、トリガーとなる要素にカーソルを合わせたときにdropdownリストが表示され、クリックする必要はありません。
```html
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
```
:::
### トリガー要素
dropdownリストを起動するには、ボタンを使用します。
:::demo トリガ要素をボタングループに分割するには `split-button` を使います。項目3と項目4の間に区切り線を挿入したい場合は、項目4にクラス `divider` を追加します。
```html
<el-dropdown>
<el-button type="primary">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
Dropdown List
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
handleClick() {
alert('button click');
}
}
}
</script>
```
:::
### トリガーのかけ方
トリガー要素をクリックするか、その上にカーソルを置きます。
:::demo アトリビュート `trigger` を用いる。デフォルトでは `hover` である。
```html
<el-row class="block-col-2">
<el-col :span="12">
<span class="demonstration">hover to trigger</span>
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="12">
<span class="demonstration">click to trigger</span>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
.demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
```
:::
### メニューを非表示にする動作
クリックしたときにメニューが閉じるかどうかを定義するには `hide-on-click` を用いる。
:::demo デフォルトではメニュー項目をクリックするとメニューが閉じますが、hide-on-clickをfalseにすることでオフにできます。
```html
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
```
:::
### コマンドイベント
各dropdown項目をクリックすると、各項目に割り当てられたパラメータを持つイベントが発生します。
:::demo
```html
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">Action 1</el-dropdown-item>
<el-dropdown-item command="b">Action 2</el-dropdown-item>
<el-dropdown-item command="c">Action 3</el-dropdown-item>
<el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
handleCommand(command) {
this.$message('click on item ' + command);
}
}
}
</script>
```
:::
### サイズ
デフォルトのサイズの他に、dropdownコンポーネントには3つの追加サイズが用意されており、異なるシナリオから選択することができます。
:::demo 追加のサイズを `medium`, `small`, `mini` で設定するには `size` 属性を使います。
```html
<el-dropdown split-button type="primary">
Default
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="medium" split-button type="primary">
Medium
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="small" split-button type="primary">
Small
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="mini" split-button type="primary">
Mini
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
```
:::
### dropdown属性
| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | `split-button` が `true`のとき、メニューボタンのタイプは `Button` コンポーネントを参照する。 | string | — | — |
| size | メニューのサイズ(分割ボタンでも動作) | string | medium / small / mini | — |
| split-button | ボタングループの表示の有無 | boolean | — | false |
| placement | ポップメニューの配置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
| trigger | トリガーのきっかけ | string | hover/click | hover |
| hide-on-click | メニューアイテムをクリックした後にメニューを非表示にするかどうか | boolean | — | true |
| show-timeout | dropdownを表示するまでの遅延時間 (トリガーが `hover` の場合のみ動作) | number | — | 250 |
| hide-timeout | dropdownを非表示にするまでの遅延時間 (トリガーが `hover` の場合のみ動作) | number | — | 150 |
| tabindex | dropdownの[tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
### dropdownスロット
| Name | Description |
|------|--------|
| — | dropdownの内容 Notice: トリガーリスナーをアタッチするには、有効な html dom 要素 (例: `<span>, <button> etc.`) または `el-component` でなければなりません。 |
| dropdown | dropdownメニューの内容、通常は `<el-dropdown-menu>` 要素 |
### dropdownイベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| click | `split-button` が `true` の場合、左ボタンがクリックされたときにトリガされます。 | — |
| command | dropdown項目がクリックされたときにトリガーする | the command dispatched from the dropdown item |
| visible-change | dropdownが表示/非表示になったときにトリガされます。 | true when it appears, and false otherwise |
### dropdownメニュー項目の属性
| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| command | dropdownの `command` コールバックにディスパッチするコマンドを指定します。 | string/number/object | — | — |
| disabled | 項目が無効化されているかどうか | boolean | — | false |
| divided | 仕切り表示の有無 | boolean | — | false |
| icon | アイコンクラス名 | string | — | — |

651
website/docs/jp/form.md Normal file
View File

@ -0,0 +1,651 @@
## フォーム
フォームは `input`, `radio`, `select`, `checkbox` などから構成されています。フォームを使うと、データを収集したり、検証したり、送信したりすることができます。
### 基本フォーム
これには、`input`, `select`, `radio`, `checkbox` などのあらゆる種類の入力項目が含まれます。
:::demo 各 `form` コンポーネントには、入力項目のコンテナとなる `form-item` フィールドが必要です。
```html
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="Online activities" name="type"></el-checkbox>
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
<el-checkbox label="Offline activities" name="type"></el-checkbox>
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="form.resource">
<el-radio label="Sponsor"></el-radio>
<el-radio label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
```
:::
:::tip
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) は規制しているのは
> <i>フォーム内に1つの単一行テキスト入力フィールドしかない場合、ユーザエージェントは、そのフィールドでのEnterをフォームの送信要求として受け入れるべきである。</i>
この動作を防ぐには、`<el-form>` に `@submit.native.prevent` を追加します。
:::
### インラインフォーム
縦のスペースが限られていて、比較的シンプルな形の場合は、一行にまとめることができます。
:::demo `inline` 属性を `true` に設定すると、フォームがインラインになります。
```html
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="Approved by">
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="formInline.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formInline: {
user: '',
region: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
```
:::
### アライメント
デザインに応じて、ラベル要素を揃える方法はいくつかあります。
:::demo `label-position` 属性はラベルの配置を決定します。`top`に設定すると、ラベルはフォームフィールドの一番上に配置されます。
```html
<el-radio-group v-model="labelPosition" size="small">
<el-radio-button label="left">Left</el-radio-button>
<el-radio-button label="right">Right</el-radio-button>
<el-radio-button label="top">Top</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
<el-form-item label="Name">
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-input v-model="formLabelAlign.region"></el-input>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="formLabelAlign.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
labelPosition: 'right',
formLabelAlign: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
### バリデーション
フォームコンポーネントを使用すると、データを検証してエラーを発見したり修正したりすることができます。
:::demo `Form` コンポーネントに `rules` 属性を追加して検証ルールを渡し、`Form-Item`に `prop` 属性を検証が必要な特定のキーとして設定するだけです。詳細は [async-validator](https://github.com/yiminghe/async-validator) を参照してください。
```html
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="Activity name" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone" prop="region">
<el-select v-model="ruleForm.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="Activity type" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="Online activities" name="type"></el-checkbox>
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
<el-checkbox label="Offline activities" name="type"></el-checkbox>
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="Sponsorship"></el-radio>
<el-radio label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
],
region: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
],
resource: [
{ required: true, message: 'Please select activity resource', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please input activity form', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
```
:::
### カスタムバリデーションルール
この例では、独自の検証ルールをカスタマイズして、2ファクタのパスワード検証を完了させる方法を示しています。
:::demo ここでは、検証結果をアイコンとして反映させるために `status-icon` を用いる。
```html
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="Password" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Confirm" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('Please input the age'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('Two inputs don\'t match!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
```
:::
:::tip
カスタムバリデートコールバック関数を呼び出す必要があります。より高度な使い方は [async-validator](https://github.com/yiminghe/async-validator) を参照してください。
:::
### フォーム項目を動的に削除または追加
:::demo フォームコンポーネントにすべてのバリデーションルールを一度に渡すことに加えて、単一のフォームフィールドにバリデーションルールを動的に渡したり削除したりすることもできます。
```html
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
<el-form-item
prop="email"
label="Email"
:rules="[
{ required: true, message: 'Please input email address', trigger: 'blur' },
{ type: 'email', message: 'Please input correct email address', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'Domain' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: 'domain can not be null', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
<el-button @click="addDomain">New domain</el-button>
<el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
dynamicValidateForm: {
domains: [{
key: 1,
value: ''
}],
email: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item);
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1);
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
key: Date.now(),
value: ''
});
}
}
}
</script>
```
:::
### ナンバーの検証(Number Validate)
:::demo Number Validateでは、入力された `v-model` バインディングに `.number` という修飾子を追加する必要がありますが、これは文字列の値をVuejsが提供する数値に変換するために使われます。
```html
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
<el-form-item
label="age"
prop="age"
:rules="[
{ required: true, message: 'age is required'},
{ type: 'number', message: 'age must be a number'}
]"
>
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
<el-button @click="resetForm('numberValidateForm')">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
numberValidateForm: {
age: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
```
:::
:::tip
`el-form-item` が別の `el-form-item` に入れ子になっている場合、そのラベルの幅は `0` になります。必要であれば、その `el-form-item` に `label-width` を設定することもできる。
:::
### サイズコントロール
フォームのすべてのコンポーネントはそのフォームから `size` 属性を継承します。同様に、FormItem にも `size` 属性があります。
:::demo それでも、コンポーネントのサイズを From や FormIten から継承させたくない場合は、各コンポーネントの `size` を微調整することができます。
```html
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
<el-form-item label="Activity name">
<el-input v-model="sizeForm.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="sizeForm.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="sizeForm.type">
<el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
<el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="sizeForm.resource" size="medium">
<el-radio border label="Sponsor"></el-radio>
<el-radio border label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
sizeForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
};
},
methods: {
onSubmit() {
console.log('submit!');
}
}
};
</script>
```
:::
### フォーム属性
| Attribute | Description | Type | Accepted Values | Default |
| ---- | ----| ---- | ---- | ---- |
| model| フォームコンポーネントのデータ | object | — | — |
| rules | フォームのバリデーションルール | object | — | — |
| inline | フォームがインラインであるかどうか | boolean | — | false |
| label-position | ラベルの位置。’left'、’right’ もしくは`label-width`が設定されている場合は propも必要です。 | string | left / right / top | right |
| label-width | ラベルの幅、例えば '50px'。直接の子フォーム項目はすべてこの値を継承します。Width `auto` がサポートされています。 | string | — | — |
| label-suffix | ラベルの接尾辞 | string | — | — |
| hide-required-asterisk | 必須フィールドのラベルの横に赤いアスタリスク（星）を付けるかどうか | boolean | — | false |
| show-message | エラーメッセージを表示するかどうか | boolean | — | true |
| inline-message | エラーメッセージをフォーム項目とインラインで表示するかどうか。 | boolean | — | false |
| status-icon | バリデーション結果を示すアイコンを表示するかどうか | boolean | — | false |
| validate-on-rule-change | `rules` propが変更されたときにバリデーションをトリガするかどうか。 | boolean | — | true |
| size | コンポーネントのサイズを制御する形式 | string | medium / small / mini | — |
| disabled | このフォームのすべてのコンポーネントを無効にするかどうかを指定します。true に設定されている場合、内部のコンポーネントの `disabled` プロップで上書きすることはできません。 | boolean | — | false |
### フォームメソッド
| Method | Description | Parameters |
| ---- | ---- | ---- |
| validate | バリデートはフォーム全体を検証します。パラメータとしてコールバックを受け取ります。バリデーションが通過したかどうかを示すブール値と、バリデーションに失敗したすべてのフィールドを含むオブジェクトです。コールバックが省略された場合はpromiseを返します。 | Function(callback: Function(boolean, object)) |
| validateField | フォーム項目を検証する | Function(props: string \| array, callback: Function(errorMessage: string)) |
| resetFields | すべてのフィールドをリセットし、検証結果を削除します。 | — |
| clearValidate | 特定のフィールドのバリデーションメッセージをクリアします。パラメータはprop名、または検証メッセージが削除されるフォーム項目のprop名の配列です。省略された場合、すべてのフィールドのバリデーションメッセージがクリアされます。 | Function(props: string \| array) |
### フォームイベント
| Event Name | Description | Parameters |
|----------- |------------ |----------- |
| validate | フォーム項目バリデーション後にトリガされます。 | prop name of the form item being validated, whether validation is passed and the error message if not |
### フォームアイテム属性
| Attribute | Description | Type | Accepted Values | Default |
| ---- | ----| ---- | ---- | ---- |
| prop | `model` のキーです。validateメソッドとresetFieldsメソッドを利用する際には、この属性が必須です。 | string | keys of model that passed to `form` |
| label | ラベル | string | — | — |
| label-width | ラベルの幅。Width `auto` がサポートされています。 | string | — | — |
| required | フィールドが必須かどうか、省略された場合はバリデーションルールによって決定されます。 | boolean | — | false |
| rules | フォームのバリデーションルール | object | — | — |
| error | フィールドのエラーメッセージ、値を設定すると、フィールドはエラーを検証し、このメッセージをすぐに表示します。 | string | — | — |
| show-message | エラーメッセージを表示するかどうか | boolean | — | true |
| inline-message | インラインスタイルバリデートメッセージ | boolean | — | false |
| size | フォームアイテムのコンポーネントのサイズを制御します。 | string | medium / small / mini | - |
### フォームアイテムスロット
| Name | Description |
|------|--------|
| — | フォームアイテムの内容 |
| label | ラベルの内容 |
### フォームアイテムのスコープスロット
| Name | Description |
|---------------|-------------|
| error | Custom content to display validation message. The scope parameter is { error } |
### フォームアイテムのメソッド
| Method | Description | Parameters |
| ---- | ---- | ---- |
| resetField | 現在のフィールドをリセットしてバリデーション結果を削除する | — |
| clearValidate | フィールドのバリデーションステータスを削除する | - |

228
website/docs/jp/i18n.md Normal file
View File

@ -0,0 +1,228 @@
## 国際化
Elementのデフォルト言語は中国語です。他の言語を使用したい場合は、i18nの設定を行う必要があります。Elementを完全にインポートする場合のエントリーファイル:
```javascript
import Vue from 'vue'
import ElementPlus from 'element-plus'
import locale from 'element-plus/lib/locale/lang/en'
Vue.use(ElementUI, { locale })
```
または Elementをインポートする際は必要に応じて以下の記述します。:
```javascript
import Vue from 'vue'
import { Button, Select } from 'element-plus'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
// configure language
locale.use(lang)
// import components
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
```
たとえ、別の言語を使っていても、中国語パックはデフォルトでインポートされます。 しかしながら、webpackで提供されている `NormalModuleReplacementPlugin` を使えばデフォルトlocaleを差し替えることが出来ます:
webpack.config.js
```javascript
{
plugins: [
new webpack.NormalModuleReplacementPlugin(/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-plus/lib/locale/lang/en')
]
}
```
## `vue-i18n@5.x` との互換性
Element [vue-i18n@5.x](https://github.com/kazupon/vue-i18n) は互換性があり、 多言語切り替えをより簡単に出来ます。
```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import ElementPlus from 'element-plus'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-CN'
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
Vue.use(VueI18n)
Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)
```
## 他のi18nプラグインとの互換性
Elementはvue-i18n以外のi18nプラグインとは互換性がないかもしれませんが、Elementがどのようにi18nを処理するかをカスタマイズすることができます。
```javascript
import Vue from 'vue'
import ElementPlus from 'element-plus'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-CN'
Vue.use(Element, {
i18n: function (path, options) {
// ...
}
})
```
## `vue-i18n@6.x` との互換性
`6.x`との互換性を保つためには、手動で処理する必要があります。
```javascript
import Vue from 'vue'
import ElementPlus from 'element-plus'
import VueI18n from 'vue-i18n'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
const messages = {
en: {
message: 'hello',
...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`
},
zh: {
message: '你好',
...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`
}
}
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'en', // set locale
messages, // set locale messages
})
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
})
new Vue({ i18n }).$mount('#app')
```
## オンデマンドコンポーネントのカスタムi18n
```js
import Vue from 'vue'
import DatePicker from 'element/lib/date-picker'
import VueI18n from 'vue-i18n'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-CN'
import ElementLocale from 'element-plus/lib/locale'
Vue.use(VueI18n)
Vue.use(DatePicker)
const messages = {
en: {
message: 'hello',
...enLocale
},
zh: {
message: '你好',
...zhLocale
}
}
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'en', // set locale
messages, // set locale messages
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
```
## CDNを経由してインポート
```html
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-plus"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
<script>
ELEMENT.locale(ELEMENT.lang.en)
</script>
```
`vue-i18n` との互換性
```html
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="//unpkg.com/element-plus"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/zh-CN.js"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
<script>
Vue.locale('en', ELEMENT.lang.en)
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
</script>
```
現在、Elementは以下の言語をフォローしています。:
<ul class="language-list">
<li>Simplified Chinese (zh-CN)</li>
<li>English (en)</li>
<li>German (de)</li>
<li>Portuguese (pt)</li>
<li>Spanish (es)</li>
<li>Danish (da)</li>
<li>French (fr)</li>
<li>Norwegian (nb-NO)</li>
<li>Traditional Chinese (zh-TW)</li>
<li>Italian (it)</li>
<li>Korean (ko)</li>
<li>Japanese (ja)</li>
<li>Dutch (nl)</li>
<li>Vietnamese (vi)</li>
<li>Russian (ru-RU)</li>
<li>Turkish (tr-TR)</li>
<li>Brazilian Portuguese (pt-br)</li>
<li>Farsi (fa)</li>
<li>Thai (th)</li>
<li>Indonesian (id)</li>
<li>Bulgarian (bg)</li>
<li>Polish (pl)</li>
<li>Finnish (fi)</li>
<li>Swedish (sv-SE)</li>
<li>Greek (el)</li>
<li>Slovak (sk)</li>
<li>Catalunya (ca)</li>
<li>Czech (cs-CZ)</li>
<li>Ukrainian (ua)</li>
<li>Turkmen (tk)</li>
<li>Tamil (ta)</li>
<li>Latvian (lv)</li>
<li>Afrikaans (af-ZA)</li>
<li>Estonian (ee)</li>
<li>Slovenian (sl)</li>
<li>Arabic (ar)</li>
<li>Hebrew (he)</li>
<li>Lithuanian (lt)</li>
<li>Mongolian (mn)</li>
<li>Kazakh (kz)</li>
<li>Hungarian (hu)</li>
<li>Romanian (ro)</li>
<li>Kurdish (ku)</li>
<li>Uighur (ug-CN)</li>
<li>Khmer (km)</li>
<li>Serbian (sr)</li>
<li>Basque (eu)</li>
<li>Kyrgyz (kg)</li>
<li>Armenian (hy)</li>
<li>Croatian (hr)</li>
<li>Esperanto (eo)</li>
</ul>
もしあなたのターゲット言語が含まれていない場合、貢献することは大歓迎です: 別の言語の設定を追加して [ここで](https://github.com/ElemeFE/element/tree/dev/src/locale/lang)、プルリクエストを作成してください。

29
website/docs/jp/icon.md Normal file
View File

@ -0,0 +1,29 @@
## アイコン
Elementは、共通のアイコンのセットを提供します。
### 基本的な使い方
クラス名に `el-icon-iconName` を代入するだけで使えます。
:::demo
```html
<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">Search</el-button>
```
:::
### アイコン
<ul class="icon-list">
<li v-for="name in $icon" :key="name">
<span>
<i :class="'el-icon-' + name"></i>
<span class="icon-name">{{'el-icon-' + name}}</span>
</span>
</li>
</ul>

163
website/docs/jp/image.md Normal file
View File

@ -0,0 +1,163 @@
## イメージ
imgのネイティブ機能の他に、遅延ロード、カスタムプレースホルダ、ロード失敗などをサポートしています。
### 基本的な使い方
ネイティブの [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)と同じように、`fit`で画像のサイズをコンテナに合わせてリサイズする方法を指定します。
```html
<div class="demo-image">
<div class="block" v-for="fit in fits" :key="fit">
<span class="demonstration">{{ fit }}</span>
<el-image
style="width: 100px; height: 100px"
:src="url"
:fit="fit"></el-image>
</div>
</div>
<script>
export default {
data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
}
}
</script>
```
:::
### プレースホルダ
:::demo 画像がまだ読み込まれていない場合のカスタムプレースホルダの内容を `slot = placeholder` で指定します。
```html
<div class="demo-image__placeholder">
<div class="block">
<span class="demonstration">Default</span>
<el-image :src="src"></el-image>
</div>
<div class="block">
<span class="demonstration">Custom</span>
<el-image :src="src">
<div slot="placeholder" class="image-slot">
Loading<span class="dot">...</span>
</div>
</el-image>
</div>
</div>
<script>
export default {
data() {
return {
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}
}
}
</script>
```
:::
### ロード失敗
:::demo `slot = error` で画像読み込みにエラーが発生した場合のカスタム失敗コンテンツ
```html
<div class="demo-image__error">
<div class="block">
<span class="demonstration">Default</span>
<el-image></el-image>
</div>
<div class="block">
<span class="demonstration">Custom</span>
<el-image>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
</div>
```
:::
### レイジーロード(遅延ロード)
:::demo `lazy = true` で遅延ロードを利用します。設定すると、画像はビューにスクロールするまで読み込まれます。スクロールリスナーを追加するスクロールコンテナは `scroll-container` で指定できます。未定義の場合は、オーバーフロープロパティが auto または scroll である最も近い親コンテナを指定します。
```html
<div class="demo-image__lazy">
<el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
</div>
<script>
export default {
data() {
return {
urls: [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]
}
}
}
</script>
```
:::
### イメージプレビュー
:::demo `previewSrcList` prop を設定することで大きなイメージのプレビューを許可します。
```html
<div class="demo-image__preview">
<el-image
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList">
</el-image>
</div>
<script>
export default {
data() {
return {
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
]
}
}
}
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted values | Default |
|---------- |-------- |---------- |------------- |-------- |
| src | image source、ネイティブと同じ | string | — | - |
| fit | 画像のサイズをコンテナに合わせてどのように変更するかを指定します。[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)と同じ | string | fill / contain / cover / none / scale-down | - |
| alt | ネイティブalt | string | - | - |
| referrer-policy | ネイティブreferrerPolicy | string | - | - |
| lazy | 遅延ロードを使用するかどうか | boolean | — | false |
| scroll-container | 遅延ロード時にスクロールリスナーを追加するコンテナ | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
| preview-src-list | 大きな画像のプレビューを許可する | Array | — | - |
| z-index | セットイメージプレビュー z-index | Number | — | 2000 |
### イベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| load | ネイティブロードと同じ | (e: Event) |
| error | ネイティブエラーと同じ | (e: Error) |
### スロット
| Slot Name | Description |
|---------|-------------|
| placeholder | 画像の読み込み時にトリガ |
| error | 画像の読み込み失敗した場合のトリガー |

87
website/docs/jp/infiniteScroll.md Normal file
View File

@ -0,0 +1,87 @@
## InfiniteScroll
ページ下部に到達している間にさらに多くのデータを読み込む
### 基本的な使い方
リストに `v-infinite-scroll` を追加し、下までスクロールしたときに自動的にロードメソッドを実行するようにする。
:::demo
```html
<template>
<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
<li v-for="i in count" class="infinite-list-item">{{ i }}</li>
</ul>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
load () {
this.count += 2
}
}
}
</script>
```
:::
### ローディングを無効化
:::demo
```html
<template>
<div class="infinite-list-wrapper" style="overflow:auto">
無効化
class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<li v-for="i in count" class="list-item">{{ i }}</li>
</ul>
<p v-if="loading">Loading...</p>
<p v-if="noMore">No more</p>
</div>
</template>
<script>
export default {
data () {
return {
count: 10,
loading: false
}
},
computed: {
noMore () {
return this.count >= 20
},
disabled () {
return this.loading || this.noMore
}
},
methods: {
load () {
this.loading = true
setTimeout(() => {
this.count += 2
this.loading = false
}, 2000)
}
}
}
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted values | Default |
| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
| infinite-scroll-disabled | 無効かどうか | boolean | - |false |
| infinite-scroll-delay | スロットルディレイ(ms) | number | - |200 |
| infinite-scroll-distance| トリガー距離(px) | number |- |0 |
| infinite-scroll-immediate |初期状態でコンテンツが埋まらない場合に、すぐに読み込みメソッドを実行するかどうか。 | boolean | - |true |

200
website/docs/jp/input-number.md Normal file
View File

@ -0,0 +1,200 @@
## 数値入力
カスタマイズ可能な範囲で数値を入力します。
### 基本的な使い方
:::demo `<el-input-number>` 要素の `v-model` に変数をバインドすれば設定完了です。
```html
<template>
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
handleChange(value) {
console.log(value)
}
}
};
</script>
```
:::
### 無効化
:::demo `disabled` 属性には `boolean` を渡し、値が `true` の場合はコンポーネントを無効にする。値を範囲内で制御したい場合は、`min` 属性を追加して最小値を設定し、`max` 属性を追加して最大値を設定することができる。デフォルトでは、最小値は `0` である。
```html
<template>
<el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
}
}
};
</script>
```
:::
### ステップ
インクリメンタルステップを定義できます。
:::demo ステップを設定するために `step` 属性を追加する。
```html
<template>
<el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 5
}
}
};
</script>
```
:::
### 厳密なステップ
:::demo `step-strictly` 属性は `boolean` を受け付ける。この属性が `true` の場合、入力値は step の倍数にしかならない。
```html
<template>
<el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 2
}
}
};
</script>
```
:::
### 精度
:::demo 入力値の精度を設定するために `precision` 属性を追加する。
```html
<template>
<el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
}
}
};
</script>
```
:::
:::tip
精度 `precision` の値は非負整数でなければならず、`step` の小数点以下であってはならない。
:::
### サイズ
追加のサイズを設定するには、属性 `size` で `medium`, `small`, `mini` を使用します。
:::demo
```html
<template>
<el-input-number v-model="num1"></el-input-number>
<el-input-number size="medium" v-model="num2"></el-input-number>
<el-input-number size="small" v-model="num3"></el-input-number>
<el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>
export default {
data() {
return {
num1: 1,
num2: 1,
num3: 1,
num4: 1
}
}
};
</script>
```
:::
### 位置制御
:::demo コントロールボタンの位置を決めるには `controls-position` を設定します。
```html
<template>
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|----| ----| ---| ----| -----|
|value / v-model | バインディング値| number | — | 0 |
|min | 最小許容値 | number | — | `-Infinity` |
|max | 最大許容値 | number | — | `Infinity` |
|step | インクリメンタルステップ | number | — | 1 |
|step-strictly | 入力値がステップの倍数でなければならないかどうか | boolean | — | false |
|precision | 入力値精度 | number | — | — |
|size | コンポーネントのサイズ | string | large/small| — |
|disabled| コンポーネントが無効化されているかどうか | boolean | — | false |
|controls| コントロールボタンを有効にするかどうか | boolean | — | true |
|controls-position | 操作ボタンの位置 | string | right | - |
|name | ネイティブ入力の `name` と同じ | string | — | — |
|label | ラベルテキスト | string | — | — |
|placeholder | インプット内のプレースホルダー | string | - | - |
### イベント
| Event Name | Description | Parameters |
|----| ---- | -----|
|change | 値が変更されたときにトリガされる | currentValue, oldValue |
| blur | インプットがぼやけときにトリガされる | (event: Event) |
| focus | インプットがフォーカスされたときにトリガされる | (event: Event) |
### 方法
| Method | Description | Parameters |
|------|--------|-------|
| focus | インプットコンポーネントにフォーカス | - |
| select | インプット要素のテキストを選択 | — |

668
website/docs/jp/input.md Normal file
View File

@ -0,0 +1,668 @@
## インプット
マウスやキーボードを使ってデータを入力します。
:::warning
インプットは制御されたコンポーネントであり、**常にVueのバインディング値**を表示します。
通常の状況においては、`input` イベントは処理されるべきである。そのハンドラはコンポーネントのバインディング値を更新しなければなりません (あるいは `v-model` を使用しなければなりません)。そうでなければ、入力ボックスの値は変更されません。
`v-model` 修飾子はサポートしていません。
:::
### 基本的な使い方
:::demo
```html
<el-input placeholder="Please input" v-model="input"></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
```
:::
### 無効化
:::demo インプットを`disabled`属性で無効にする。
```html
<el-input
placeholder="Please input"
v-model="input"
:disabled="true">
</el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
```
:::
### クリア可能
:::demo インプットを `clearable` 属性でクリア可能にできます。
```html
<el-input
placeholder="Please input"
v-model="input"
clearable>
</el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
```
:::
### パスワードボックス
:::demo `show-password`属性を用いて、トグル可能なパスワードインプットを作成する。
```html
<el-input placeholder="Please input password" v-model="input" show-password></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
```
:::
### アイコン付きインプット
インプットタイプを示すアイコンを追加します。
:::demo インプットにアイコンを追加するには、`prefix-icon` と `suffix-icon` 属性を使えばよい。また、`prefix` と `suffix` という名前のスロットも同様に機能します。
```html
<div class="demo-input-suffix">
<span class="demo-input-label">Using attributes</span>
<el-input
placeholder="Pick a date"
suffix-icon="el-icon-date"
v-model="input1">
</el-input>
<el-input
placeholder="Type something"
prefix-icon="el-icon-search"
v-model="input2">
</el-input>
</div>
<div class="demo-input-suffix">
<span class="demo-input-label">Using slots</span>
<el-input
placeholder="Pick a date"
v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="Type something"
v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<style>
.demo-input-label {
display: inline-block;
width: 130px;
}
</style>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
}
}
}
</script>
```
:::
### テキストエリア
複数行のテキスト情報を入力できるようにリサイズ可能。属性 `type="textarea"` を追加して、`input` をネイティブの `textarea` に変更します。
:::demo Control the height by setting the `rows` prop.
```html
<el-input
type="textarea"
:rows="2"
placeholder="Please input"
v-model="textarea">
</el-input>
<script>
export default {
data() {
return {
textarea: ''
}
}
}
</script>
```
:::
### テキストエリアの自動サイズ
インプットタイプのテキストエリアに `autosize` プロップを設定すると、内容に応じて自動的に高さが調整されます。オプションオブジェクトを `autosize` に渡すことで、テキストエリアが自動的に調整できる最小行数と最大行数を指定できます。
:::demo
```html
<el-input
type="textarea"
autosize
placeholder="Please input"
v-model="textarea1">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="Please input"
v-model="textarea2">
</el-input>
<script>
export default {
data() {
return {
textarea1: '',
textarea2: ''
}
}
}
</script>
```
:::
### ミックスインプット
要素（一般的にはラベルやボタン）を前置または追加します。
:::demo 入力に前置または追加する要素を配置するには `slot` を用いる。
```html
<div>
<el-input placeholder="Please input" v-model="input1">
<template slot="prepend">Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Please input" v-model="input2">
<template slot="append">.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Please input" v-model="input3" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="Select">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
<style>
.el-select .el-input {
width: 110px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
select: ''
}
}
}
</script>
```
:::
### サイズ
:::demo インプットサイズを変更するために`size`属性を追加する。デフォルトのサイズの他に、3つのオプションがある: `large`, `small`, `mini`
```html
<div class="demo-input-size">
<el-input
placeholder="Please Input"
v-model="input1">
</el-input>
<el-input
size="medium"
placeholder="Please Input"
v-model="input2">
</el-input>
<el-input
size="small"
placeholder="Please Input"
v-model="input3">
</el-input>
<el-input
size="mini"
placeholder="Please Input"
v-model="input4">
</el-input>
</div>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
}
}
}
</script>
```
:::
### オートコンプリート
現在のインプットをもとに、おすすめのヒントを得ることができます。
:::demo オートコンプリートコンポーネントはインプットサジェスチョンを提供します。`fetch-suggestions` 属性は、提案されたインプットを返すメソッドです。この例では、`querySearch(queryString, cb)` は、準備ができたら `cb(data)` を経由してオートコンプリートにサジェスチョンを返します。
```html
<el-row class="demo-autocomplete">
<el-col :span="12">
<div class="sub-title">list suggestions when activated</div>
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="Please Input"
@select="handleSelect"
></el-autocomplete>
</el-col>
<el-col :span="12">
<div class="sub-title">list suggestions on input</div>
<el-autocomplete
class="inline-input"
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="Please Input"
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete>
</el-col>
</el-row>
<script>
export default {
data() {
return {
links: [],
state1: '',
state2: ''
};
},
methods: {
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
// call callback function to return suggestions
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.links = this.loadAll();
}
}
</script>
```
:::
### カスタムテンプレート
サジェスチョンの表示方法をカスタマイズします。
:::demo サジェスチョンアイテムをカスタマイズするには、`scoped slot`を使う。スコープでは、`item` キーを使ってサジェスチョンオブジェクトにアクセスすることができます。
```html
<el-autocomplete
popper-class="my-autocomplete"
v-model="state"
:fetch-suggestions="querySearch"
placeholder="Please input"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
<div class="value">{{ item.value }}</div>
<span class="link">{{ item.link }}</span>
</template>
</el-autocomplete>
<style>
.my-autocomplete {
li {
line-height: normal;
padding: 7px;
.value {
text-overflow: ellipsis;
overflow: hidden;
}
.link {
font-size: 12px;
color: #b4b4b4;
}
}
}
</style>
<script>
export default {
data() {
return {
links: [],
state: ''
};
},
methods: {
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
// call callback function to return suggestion objects
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
}
},
mounted() {
this.links = this.loadAll();
}
}
</script>
```
:::
### リモート検索
サーバーサイドからデータを検索します。
:::demo
```html
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="Please input"
@select="handleSelect"
></el-autocomplete>
<script>
export default {
data() {
return {
links: [],
state: '',
timeout: null
};
},
methods: {
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
querySearchAsync(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.links = this.loadAll();
}
};
</script>
```
:::
### 限界長さ
:::demo `maxlength` と `minlength` はネイティブ入力の属性であり、ユーザが入力できる文字数の制限を宣言するものである。テキストやテキストエリア型のインプットに対して `maxlength` プロップを設定すると、インプット値の長さを制限することができ、同時に `show-word-limit` を `true` に設定することで単語数を表示することができます。
```html
<el-input
type="text"
placeholder="Please input"
v-model="text"
maxlength="10"
show-word-limit
>
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
type="textarea"
placeholder="Please input"
v-model="textarea"
maxlength="30"
show-word-limit
>
</el-input>
<script>
export default {
data() {
return {
text: '',
textarea: ''
}
}
}
</script>
```
:::
### インプット属性
| Attribute | Description | Type | Accepted Values | Default |
| ----| ----| ----| ---- | ----- |
|type| インプットタイプ | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
|value / v-model| バインディング値 | string / number| — | — |
|maxlength| ネイティブインプットの `maxlength` と同じ | number| — | — |
|minlength| ネイティブインプットの `minlength` と同じ | number | — | — |
|show-word-limit | `type` が 'text' または 'textarea' の場合に単語数を表示するかどうかを指定する | boolean | — | false |
|placeholder| インプットのプレースホルダー | string | — | — |
| clearable | クリアボタンを表示するかどうか | boolean | — | false |
| show-password | トグル可能なパスワード入力を表示するかどうか| boolean | — | false |
|disabled | 入力が無効化されているかどうか | boolean | — | false |
|size | インプットサイズ、`type` が 'textarea' でない場合に動作します。 | string | medium / small / mini | — |
| prefix-icon | プレフィックスアイコンクラス | string | — | — |
| suffix-icon | サフィックスアイコンクラス | string | — | — |
|rows | textareaの行数、`type`が'textarea'の場合にのみ動作します。 | number | — | 2 |
|autosize | textareaが適応的な高さを持つかどうか、`type`が'textarea'の場合にのみ動作します。オブジェクトを受け取ることができます。 e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
|autocomplete | ネイティブインプットの `autocomplete` と同じ | string | on/off | off |
|auto-complete | @DEPRECATED in next major version | string | on/off | off |
|name | ネイティブインプットの `name` と同じ | string | — | — |
| readonly | ネイティブインプットの `readonly` と同じ | boolean | — | false |
|max | ネイティブインプットの `max` と同じ | — | — | — |
|min | ネイティブインプットの `min` と同じ | — | — | — |
|step| ネイティブインプットの `step` と同じ | — | — | — |
|resize| リサイズ性を制御する | string | none, both, horizontal, vertical | — |
|autofocus | ネイティブインプットの `autofocus` と同じ | boolean | — | false |
|form | ネイティブインプットの `form` と同じ | string | — | — |
| label | ラベルインデックス | string | — | — |
| tabindex | インプットタビインデックス | string | - | - |
| validate-event | フォームバリデーションをトリガするかどうか | boolean | - | true |
### インプットスロット
| Name | Description |
|------|--------|
| prefix | インプットプレフィックスとしての内容、 `type` が 'text' の場合のみ動作します。 |
| suffix | インプットサフィックスとしての内容、 `type` が 'text' の場合のみ動作します。 |
| prepend | インプットの前に付加する内容、 `type` が 'text' の場合のみ動作します。 |
| append | インプットの後に付加する内容、 `type` が 'text' の場合のみ動作します。 |
### インプットイベント
| Event Name | Description | Parameters |
|----| ----| ----|
| blur | インプットがぼやけたときにトリガーされます | (event: Event) |
| focus | インプットがフォーカスされたときトリガーされます | (event: Event) |
| change | インプットボックスがフォーカスを失ったとき、またはユーザーが Enter キーを押したときにのみトリガされます | (value: string \| number) |
| input | インプット値が変更されたときにトリガーされます | (value: string \| number) |
| clear | クリアボタンをクリックしてインプットがクリアされたときにトリガされます。 | — |
### インプットメソッド
| Method | Description | Parameters |
|------|--------|-------|
| focus | インプット要素にフォーカスを当てる | — |
| blur | インプット要素にフォーカスをぼやけさせる | — |
| select | インプット要素のテキストを選択 | — |
### オートコンプリート属性
Attribute | Description | Type | Options | Default
|----| ----| ----| ---- | -----|
|placeholder| オートコンプリートでのインプットプレースホルダー | string | — | — |
| clearable | クリアボタンを表示するかどうか | boolean | — | false |
|disabled | オートコンプリートを無効にしているかどうか | boolean | — | false|
| value-key | 表示用インプットサジェスチョンオブジェクトのキー名 | string | — | value |
|icon | アイコン名 | string | — | — |
|value | バインディング値 | string | — | — |
| debounce | タイプ時のデバウンス遅延（ミリ秒単位） | number | — | 300 |
| placement | ポップアップメニューの配置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
|fetch-suggestions | インプットサジェスチョンを取得するためのメソッドです。サジェスチョンの準備ができたら、`callback(data:[])` を呼び出してオートコンプリートに返す。 | Function(queryString, callback) | — | — |
| popper-class | オートコンプリートのドロップダウン用カスタムクラス名 | string | — | — |
| trigger-on-focus | インプットフォーカス時にサジェスチョンを表示するかどうか | boolean | — | true |
| name | ネイティブインプットの `name` と同じ | string | — | — |
| select-when-unmatched | オートコンプリートにマッチするイベントがない場合に、入力時に `select` イベントを発生させるかどうか。 | boolean | — | false |
| label | ラベルテキスト | string | — | — |
| prefix-icon | プレフィックスアイコンクラス | string | — | — |
| suffix-icon | サフィックスアイコンクラス | string | — | — |
| hide-loading | リモート検索で読み込みアイコンを非表示にするかどうか | boolean | — | false |
| popper-append-to-body | ドロップダウンをボディに追加するかどうかを指定します。ドロップダウンの位置が間違っている場合は、このプロップをfalseに設定してみてください。 | boolean | - | true |
| highlight-first-item | リモート検索サジェスチョンの最初の項目をデフォルトで強調表示するかどうか | boolean | — | false |
### オートコンプリートスロット
| Name | Description |
|------|--------|
| prefix | インプットプレフィックスとしての内容 |
| suffix | インプットサフィックスとしての内容 |
| prepend | インプット前に付加する内容 |
| append | インプット後に付加する内容 |
### オートコンプリートスコープスロット
| Name | Description |
|------|--------|
| — | インプットサジェスチョンのためのカスタムコンテンツ。スコープパラメータは { item } です。 |
### オートコンプリートイベント
| Event Name | Description | Parameters |
|----| ----| ----|
|select | サジェストがクリックされた時にトリガーされます。 | suggestion being clicked |
| change | 入力値の中のアイコンが変化したときにトリガーされます。 | (value: string \| number) |
### オートコンプリートメソッド
| Method | Description | Parameters |
|------|--------|-------|
| focus | インプット要素にフォーカスします | — |

33
website/docs/jp/installation.md Normal file
View File

@ -0,0 +1,33 @@
## インストール
### npm
npmでインストールが推奨されており、[webpack](https://webpack.js.org/) でシームレスに動作します。
```shell
npm install element-plus --save
```
### CDN
[unpkg.com/element-plus](https://unpkg.com/element-plus/) から最新版を手に入れ、ページに JavascriptとCSSファイルをインポートすれば動作します。
```html
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
:::tip
[推奨]CDNを使うときはElementのバージョンを固定することを推奨します。詳しくは[unpkg.com](https://unpkg.com)を御覧ください。
:::
### Hello world
CDNを使う場合、Elementでハローワールドを表示するのは簡単です。 [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
npmを使っていてwebpackを適用したい場合は、次のページに進んでください。: [Quick Start](/#/jp/component/quickstart).

357
website/docs/jp/layout.md Normal file
View File

@ -0,0 +1,357 @@
## レイアウト
24カラムを基本レイアウトで、簡単、素早く作れます。
### ベーシックレイアウト
カラムを用いて、ベーシックグリッドレイアウトを作ります。
:::demo `row` と `col` を使えば、`span` 属性を使って簡単にレイアウトを操作することができます。
```html
<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>
<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>
```
:::
### カラム間隔
カラム間隔もサポートされてます。
:::demo 行にはカラム間の間隔を指定するための `gutter` 属性があり、デフォルト値は0です。
```html
<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>
<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カラムを組み合わせて、より複雑なハイブリッドレイアウトを形成できます。
:::demo
```html
<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>
<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>
```
:::
### カラムオフセット
オフセットを指定することができます。
:::demo Colの`offset`属性の値を設定することで、カラムのオフセット数を指定することができます。
```html
<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>
<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>
```
:::
### 配置
フレックスレイアウトを使用して、列の配置を柔軟に行うことができます。
:::demo `type` 属性に `flex` を設定することでフレックスレイアウトを有効にし、`justify` 属性に start, center, end, space-between, space-around を設定することで子要素のレイアウトを定義することができます。
```html
<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>
<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の5つのブレイクポイントがプリセットされています。
:::demo
```html
<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>
<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 は、特定の条件下で要素を隠すための一連のクラスを提供します。これらのクラスは、任意の DOM 要素やカスタムコンポーネントに追加することができます。これらのクラスを使用するには、以下のCSSファイルをインポートする必要があります。
```js
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 ビューポートのとき、非表示にする
### 行属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| gutter | グリッド間隔 | number | — | 0 |
| type | レイアウトモード、フレックスを使用することができます、モダンなブラウザで動作します。 | string | — | — |
| justify | フレックスレイアウトの水平配置 | string | start/end/center/space-around/space-between | start |
| align | フレックスレイアウトの垂直配置 | string | top/middle/bottom | top |
| tag | カスタムエレメントタグ | string | * | div |
### 列属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| span | グリッドスパンの列数 | number | — | 24 |
| offset | 左辺のグリッドのスペースの数 | number | — | 0 |
| push | グリッドが右に移動する列数 | number | — | 0 |
| pull | グリッドが左に移動する列数 | number | — | 0 |
| xs | `<768px` レスポンシブ列または列propsオブジェクト | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | `≥768px` レスポンシブ列または列propsオブジェクト | number/object (e.g. {span: 4, offset: 4}) | — | — |
| md | `≥992px` レスポンシブ列または列propsオブジェクト | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | `≥1200px` レスポンシブ列または列propsオブジェクト | number/object (e.g. {span: 4, offset: 4}) | — | — |
| xl | `≥1920px` レスポンシブ列または列propsオブジェクト | number/object (e.g. {span: 4, offset: 4}) | — | — |
| tag | カスタムエレメントタグ | string | * | div |

77
website/docs/jp/link.md Normal file
View File

@ -0,0 +1,77 @@
## リンク
テキストハイパーリンク
### ベーシック
ベーシックテキストリンク
:::demo
```html
<div>
<el-link href="https://element.eleme.io" target="_blank">default</el-link>
<el-link type="primary">primary</el-link>
<el-link type="success">success</el-link>
<el-link type="warning">warning</el-link>
<el-link type="danger">danger</el-link>
<el-link type="info">info</el-link>
</div>
```
:::
### 無効化
リンクの無効化状態
:::demo
```html
<div>
<el-link disabled>default</el-link>
<el-link type="primary" disabled>primary</el-link>
<el-link type="success" disabled>success</el-link>
<el-link type="warning" disabled>warning</el-link>
<el-link type="danger" disabled>danger</el-link>
<el-link type="info" disabled>info</el-link>
</div>
```
:::
### 下線
リンクの下線
:::demo
```html
<div>
<el-link :underline="false">Without Underline</el-link>
<el-link>With Underline</el-link>
</div>
```
:::
### アイコン
リンク付きアイコン
:::demo
```html
<div>
<el-link icon="el-icon-edit">Edit</el-link>
<el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>
</div>
```
:::
### 属性
| Attribute | Description | Type | Options | Default |
| --------- | ----------------------------------- | ------- | ------------------------------------------- | ------- |
| type | タイプ | string | primary / success / warning / danger / info | default |
| underline | コンポーネントに下線があるか | boolean | — | true |
| disabled | コンポーネントが無効化されているか | boolean | — | false |
| href | ネイティブハイパーリンクの `href` と同じ | string | — | - |
| icon | アイコンのクラス名 | string | — | - |

209
website/docs/jp/loading.md Normal file
View File

@ -0,0 +1,209 @@
## ローディング
データ読み込み中にアニメーションを表示する。
### コンテナ内でのローディング
データの読み込み中にコンテナ（テーブルなど）にアニメーションを表示します。
:::demo 要素にはローディングを呼び出すための2つの方法があります: ディレクティブとサービスです。カスタムディレクティブ `v-loading` の場合は、`boolean` の値をバインドするだけです。デフォルトでは、ローディングマスクはディレクティブが使われている要素に追加されます。`body` 修飾子を追加すると、マスクは body 要素に追加されます。
```html
<template>
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
</template>
<style>
body {
margin: 0;
}
</style>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}],
loading: true
};
}
};
</script>
```
:::
### カスタマイズ
ローディングテキスト、ローディングスピナー、背景色をカスタマイズすることができます。
:::demo `v-loading` がバインドされている要素に `element-loading-text` 属性を追加すると、その値がスピナの下に表示されるようになります。同様に、`element-loading-spinner` と `element-loading-background` は、ローディングスピナのクラス名と背景色をカスタマイズするためのものです。
```html
<template>
<el-table
v-loading="loading"
element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}, {
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District'
}],
loading: true
};
}
};
</script>
```
:::
### 全画面読み込み
データの読み込み中に全画面アニメーションを表示します。
:::demo ディレクティブとして使われる場合、フルスクリーンの読み込みには `fullscreen` 修飾子が必要で、それがボディに追加されます。この場合、ボディ上でのスクロールを無効にしたい場合は、別の修飾子 `lock` を追加します。サービスとして利用される場合、Loadingはデフォルトで全画面表示になります。
```html
<template>
<el-button
type="primary"
@click="openFullScreen1"
v-loading.fullscreen.lock="fullscreenLoading">
As a directive
</el-button>
<el-button
type="primary"
@click="openFullScreen2">
As a service
</el-button>
</template>
<script>
export default {
data() {
return {
fullscreenLoading: false
}
},
methods: {
openFullScreen1() {
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
}
}
</script>
```
:::
### サービス
サービスで Loading を呼び出すこともできます。Loadingサービスをインポートします:
```javascript
import { Loading } from 'element-ui';
```
呼び出す:
```javascript
Loading.service(options);
```
パラメータ `options` はLoadingの設定であり、その詳細は以下の表にある。LoadingService` はLoadingのインスタンスを返し、その `close` メソッドを呼び出すことでインスタンスを閉じることができる。:
```javascript
let loadingInstance = Loading.service(options);
this.$nextTick(() => { // Loading should be closed asynchronously
loadingInstance.close();
});
```
フルスクリーン Loading はシングルトンであることに注意してください。既存のフルスクリーン Loading がクローズされる前に新しいフルスクリーン Loading が呼び出された場合、実際に別の Loading インスタンスを作成するのではなく、既存のフルスクリーン Loading インスタンスが返されます。:
```javascript
let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true
```
これらのいずれかで`close` メソッドを呼び出すことで、このフルスクリーンの読み込みを閉じることができる。
Elementを完全にインポートしている場合は、Vue.prototypeにグローバルメソッド `$loading` が登録されます。このように呼び出すことができます。このメソッドは、`this.$loading(options)`のように呼び出すことができます。
### Options
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| target | コンポーネントがカバーしなければならない DOM ノード。DOM オブジェクトまたは文字列を受け付けます。文字列の場合は document.querySelector に渡され、対応する DOM ノードを取得します。 | object/string | — | document.body |
| body | `v-loading` の `body` 修飾子と同じです。 | boolean | — | false |
| fullscreen | `v-loading` の `fullscreen` 修飾子と同じです。 | boolean | — | true |
| lock | `v-loading` の `lock` 修飾子と同じです。 | boolean | — | false |
| text | スピナーの下に表示されるローディングテキスト | string | — | — |
| spinner | カスタムスピナーのクラス名 | string | — | — |
| background | マスクの背景色 | string | — | — |
| customClass | ローディングのカスタムクラス名 | string | — | — |

298
website/docs/jp/menu.md Normal file
View File

@ -0,0 +1,298 @@
## ナビゲーションメニュー
ウェブサイトのナビゲーションを提供するメニュー。
### トップバー
トップバーのナビゲーションメニューは、様々なシーンで使用することができます。
:::demo デフォルトではメニューは縦長ですが、モードプロップを'horizontal'に設定することで横長にすることができます。また、サブメニューコンポーネントを使って第2階層のメニューを作成することもできます。メニューには `background-color`, `text-color`, `active-text-color` が用意されており、色をカスタマイズすることができます。
```html
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Processing Center</el-menu-item>
<el-submenu index="2">
<template slot="title">Workspace</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
<el-submenu index="2-4">
<template slot="title">item four</template>
<el-menu-item index="2-4-1">item one</el-menu-item>
<el-menu-item index="2-4-2">item two</el-menu-item>
<el-menu-item index="2-4-3">item three</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>Info</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">Processing Center</el-menu-item>
<el-submenu index="2">
<template slot="title">Workspace</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
<el-submenu index="2-4">
<template slot="title">item four</template>
<el-menu-item index="2-4-1">item one</el-menu-item>
<el-menu-item index="2-4-2">item two</el-menu-item>
<el-menu-item index="2-4-3">item three</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>Info</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
</el-menu>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
```
:::
### サイドバー
Vサブメニューのある縦型ナビメニュー。
:::demo el-menu-item-groupコンポーネントを使ってメニューグループを作成することができ、グループの名前はタイトルプロップか名前付きスロットで決まります。
```html
<el-row class="tac">
<el-col :span="12">
<h5>Default colors</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="12">
<h5>Custom colors</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
```
:::
### コラプス
縦型のナビメニューを潰すことも出来ます。
:::demo
```html
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">expand</el-radio-button>
<el-radio-button :label="true">collapse</el-radio-button>
</el-radio-group>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">Navigator One</span>
</template>
<el-menu-item-group>
<span slot="title">Group One</span>
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">item four</span>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">Navigator Four</span>
</el-menu-item>
</el-menu>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
data() {
return {
isCollapse: true
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
```
:::
### メニュー属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| mode | メニュー表示モード | string | horizontal / vertical | vertical |
| collapse | メニューが折りたたまれているかどうか (垂直モードでのみ利用可能) | boolean | — | false |
| background-color | メニューの背景色(16進数形式) | string | — | #ffffff |
| text-color | メニューのテキストカラー(16進数形式) | string | — | #303133 |
| active-text-color | 現在アクティブなメニュー項目のテキスト色 (16進数形式) | string | — | #409EFF |
| default-active | アクティブメニューのインデックス | string | — | — |
| default-openeds | 現在アクティブなサブメニューのインデックスを含む配列 | Array | — | — |
| unique-opened | 一つのサブメニューだけをアクティブにすることができるかどうか | boolean | — | false |
| menu-trigger | サブメニューのトリガ方法、`mode` が 'horizontal' の時のみ動作する | string | hover / click | hover |
| router | `vue-router` モードを有効にしているかどうかを示します。true の場合、インデックスはルートアクションを有効にするための 'path' として使われます。 | boolean | — | false |
| collapse-transition | 折りたたみ遷移を有効にするかどうか | boolean | — | true |
### メニューメソッド
| Methods Name | Description | Parameters |
|---------- |-------- |---------- |
| open | 特定のサブメニューを開く | index: index of the sub-menu to open |
| close | 特定のサブメニューを閉じる | index: index of the sub-menu to close |
### メニューイベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| select | メニュー起動時コールバック機能 | index: index of activated menu, indexPath: index path of activated menu |
| open | サブメニュー展開したときのコールバック関数 | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
| close | サブメニューを折りたたんだ時のコールバック関数 | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
### メニューアイテムイベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| click | メニュー項目がクリックされたときのコールバック関数 | el: menu-item instance |
### サブメニュー属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| index | ユニークアイデンティフィケーション | string | — | — |
| popper-class | ポップアップメニューのカスタムクラス名 | string | — | — |
| show-timeout | サブメニュー表示前のタイムアウト | number | — | 300 |
| hide-timeout | サブメニューを隠す前のタイムアウト | number | — | 300 |
| disabled | サブメニューが無効化されているかどうか | boolean | — | false |
| popper-append-to-body | ポップアップメニューをボディに追加するかどうかを指定します。メニューの位置が正しくない場合は、このpropを調整してみてください。 | boolean | - | level one Submenu: true / other Submenus: false |
### メニューアイテム属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| index | ユニークアイデンティフィケーション | string/null | — | null |
| route | Vue Routerオブジェクト | object | — | — |
| disabled | 無効化かどうか | boolean | — | false |
### メニューグループ属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| title | グループタイトル | string | — | — |

327
website/docs/jp/message-box.md Normal file
View File

@ -0,0 +1,327 @@
## メッセージボックス
システムのメッセージボックスをシミュレートしたモーダルボックスのセットで、主にアラート情報、オペレーション確認、プロンプトメッセージを表示します。
:::tip
メッセージボックスはシステムの `alert`, `confirm`, `prompt` のシミュレーションを提供するように設計されていますので、内容はシンプルなものになっています。より複雑な内容の場合は、ダイアログを使ってください。
:::
### アラート
アラートは、ユーザーが確認するまでユーザーの操作を中断します。
:::demo `$alert` メソッドを呼び出してアラートを開きます。これはシステムの `alert` をシミュレートしたものであり、ESCを押したりボックスの外をクリックしたりして閉じることはできません。この例では、`message` と `title` の2つのパラメータを受け取っている。ボックスが閉じられると `Promise` オブジェクトが返され、さらなる処理が行われます。ターゲットブラウザが `Promise` をサポートしているかどうかわからない場合は、この例のようにサードパーティのポリフィルをインポートするか、コールバックを使用してください。
```html
<template>
<el-button type="text" @click="open">Click to open the Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$alert('This is a message', 'Title', {
confirmButtonText: 'OK',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}
}
}
</script>
```
:::
### 確認
確認は、ユーザーに確認を求めるために使用します。
:::demo `$confirm`メソッドを呼び出すと、システムの `confirm` をシミュレートしてconfirmを開くことができる。また、リテラルオブジェクトである第三の属性 `options` を渡すことで、メッセージボックスを高度にカスタマイズすることができます。属性 `type` はメッセージの種類を示し、その値には `success`, `error`, `info`, `warning` を指定することができる。2番目の属性 `title` は `string` でなければならず、`object` の場合は `options` として扱われることに注意してください。ここでは、さらなる処理を行うために `Promise` を用いる。
```html
<template>
<el-button type="text" @click="open">Click to open the Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: 'Delete completed'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Delete canceled'
});
});
}
}
}
</script>
```
:::
### プロンプト
プロンプトは、ユーザーの入力が必要な場合に使用されます。
:::demo プロンプトを開くために `$prompt` メソッドを呼び出すと、システムの `prompt` をシミュレートする。パラメータ `inputPattern` を使って独自の RegExp パターンを指定することができる。バリデーションの方法を指定するには `inputValidator` を使い、`Boolean` または `String` を返します。`false` または `String` を返す場合は検証に失敗したことを意味し、返された文字列が `inputErrorMessage` として使用されます。さらに、`inputPlaceholder` パラメータで入力ボックスのプレースホルダをカスタマイズすることもできます。
```html
<template>
<el-button type="text" @click="open">Click to open Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$prompt('Please input your e-mail', 'Tip', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: 'Invalid Email'
}).then(({ value }) => {
this.$message({
type: 'success',
message: 'Your email is:' + value
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Input canceled'
});
});
}
}
}
</script>
```
:::
### カスタマイズ
様々なコンテンツを表示するようにカスタマイズ可能
:::demo 上記の3つのメソッドは `$msgbox` メソッドのリパッケージです。この例では、`showCancelButton` 属性を使って `$msgbox` メソッドを直接呼び出しています。また、`cancelButtonClass` を使ってカスタムスタイルを追加したり、`cancelButtonText` を使ってボタンのテキストをカスタマイズしたりすることもできます (確認ボタンにもこれらのフィールドがあります。) この例では `beforeClose` 属性も使用しています。これはメソッドであり、MessageBoxインスタンスが閉じられるときにトリガされ、その実行によってインスタンスの閉じを停止します。このメソッドには3つのパラメータがあります。パラメータは `action`, `instance`, `done` の3つです。これを使うことで、閉じる前にインスタンスを操作することができます。例えば、確認ボタンの `loading` を有効にしたり、`done` メソッドを呼び出して MessageBox インスタンスを閉じたりすることができます (`beforeClose` 内で `done` が呼び出されなかった場合、インスタンスは閉じられません)。
```html
<template>
<el-button type="text" @click="open">Click to open Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
const h = this.$createElement;
this.$msgbox({
title: 'Message',
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode')
]),
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = 'Loading...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
}
}).then(action => {
this.$message({
type: 'info',
message: 'action: ' + action
});
});
},
}
}
</script>
```
:::
:::tip
MessageBoxの内容は `VNode` にすることができ、カスタムコンポーネントを渡すことができます。MessageBoxを開くとき、Vueは新しい `VNode` と古い `VNode` を比較し、UIを効率的に更新する方法を考え出します。この場合、MessageBoxが開くたびに `VNode` に一意のキーを追加することができます。[例](https://jsfiddle.net/zhiyang/ezmhq2ef)。
:::
### HTML文字列を使用する
`message` は HTML 文字列をサポートしています。
:::demo `dangerouslyUseHTMLString` を true に設定すると、`message` は HTML 文字列として扱われます。
```html
<template>
<el-button type="text" @click="open">Click to open Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true
});
}
}
}
</script>
```
:::
:::warning
`message`プロパティはHTML文字列をサポートしていますが、任意のHTMLを動的にレンダリングすると[XSS攻撃](https://en.wikipedia.org/wiki/Cross-site_scripting)につながりやすく、非常に危険です。したがって、`dangerouslyUseHTMLString`がオンの場合は、`message`の内容が信頼できるものであることを確認し、**決して**ユーザが提供したコンテンツに`message`を代入しないようにしてください。
:::
### キャンセルとクローズを区別する
場合によっては、キャンセルボタンをクリックするのと閉じるボタンをクリックするのでは意味が異なる場合があります。
:::demo デフォルトでは、ユーザがメッセージボックスをキャンセル(キャンセルボタンをクリック)して閉じる(閉じるボタンまたはマスクレイヤーをクリック、ESCキーを押す)と、Promiseのリジェクトコールバックと `callback` のパラメータは 'cancel' になります。distinguishCancelAndClose` が true に設定されている場合、上記の二つの操作のパラメータはそれぞれ 'cancel' と 'close' である。
```html
<template>
<el-button type="text" @click="open">Click to open Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
distinguishCancelAndClose: true,
confirmButtonText: 'Save',
cancelButtonText: 'Discard Changes'
})
.then(() => {
this.$message({
type: 'info',
message: 'Changes saved. Proceeding to a new route.'
});
})
.catch(action => {
this.$message({
type: 'info',
message: action === 'cancel'
? 'Changes discarded. Proceeding to a new route.'
: 'Stay in the current route'
})
});
}
}
}
</script>
```
:::
### 中央に配置されたコンテンツ
メッセージボックスの内容を中央揃えにすることができます。
:::demo `center` を `true` に設定すると、コンテンツを中央に配置します。
```html
<template>
<el-button type="text" @click="open">Click to open Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: 'Delete completed'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Delete canceled'
});
});
}
}
}
</script>
```
:::
### グローバルメソッド
Elementが完全にインポートされている場合、Vue.prototypeに以下のグローバルメソッドが追加されます。Vue.prototypeには、`$msgbox`, `$alert`, `$confirm`, `$prompt` というグローバルメソッドが追加されます。そのため、Vueのインスタンスでは、このページで行ったように `MessageBox` を呼び出すことができます。パラメータは以下の通りです。
- `$msgbox(options)`
- `$alert(message, title, options)` もしくは `$alert(message, options)`
- `$confirm(message, title, options)` もしくは `$confirm(message, options)`
- `$prompt(message, title, options)` もしくは `$prompt(message, options)`
### ローカルインポート
オンデマンドで `MessageBox` をインポートしたい場合:
```javascript
import { MessageBox } from 'element-ui';
```
対応するメソッドは以下の通り: 対応するメソッドは `MessageBox`, `MessageBox.alert`, `MessageBox.confirm`, `MessageBox.prompt` である。パラメータは上記と同じである。
### オプション
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | メッセージボックスのタイトル | string | — | — |
| message | メッセージボックスの内容 | string | — | — |
| dangerouslyUseHTMLString | `message` を HTML 文字列として扱うかどうか | boolean | — | false |
| type | アイコン表示に使用されるメッセージタイプ | string | success / info / warning / error | — |
| iconClass | カスタムアイコンのクラス、 `type` をオーバーライドします。 | string | — | — |
| customClass | メッセージボックスのカスタムクラス名 | string | — | — |
| callback | Promise を好まない場合、メッセージボックス を閉じるコールバック | function(action), where action can be 'confirm', 'cancel' or 'close', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
| showClose | メッセージボックスのクローズアイコンを表示するかどうか | boolean | — | true |
| beforeClose | コールバックは メッセージボックスコンポーネントを閉じる前に呼び出され、メッセージボックスコンポーネントが閉じるのを防ぎます。 | function(action, instance, done), where `action` can be 'confirm', 'cancel' or 'close'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |
| distinguishCancelAndClose | メッセージボックスのキャンセルと終了を区別するかどうか | boolean | — | false |
| lockScroll | メッセージボックスがプロンプトを出したときにボディスクロールをロックするかどうか | boolean | — | true |
| showCancelButton | キャンセルボタンを表示するかどうか | boolean | — | false (true when called with confirm and prompt) |
| showConfirmButton | 確認ボタンを表示するかどうか | boolean | — | true |
| cancelButtonText | キャンセルボタンのテキスト内容 | string | — | Cancel |
| confirmButtonText | 確認ボタンのテキスト内容 | string | — | OK |
| cancelButtonClass | キャンセルボタンのカスタムクラス名 | string | — | — |
| confirmButtonClass | 確認ボタンのカスタムクラス名 | string | — | — |
| closeOnClickModal | マスクをクリックしてメッセージボックスを閉じることができるかどうか | boolean | — | true (false when called with alert) |
| closeOnPressEscape | ESC を押してメッセージボックスを閉じることができるかどうか | boolean | — | true (false when called with alert) |
| closeOnHashChange | ハッシュが変更された場合にメッセージボックスを閉じるかどうか | boolean | — | true |
| showInput | インプットを表示するかどうか | boolean | — | false (true when called with prompt) |
| inputPlaceholder | インプットのプレースホルダー | string | — | — |
| inputType | インプットのタイプ | string | — | text |
| inputValue | インプット初期値 | string | — | — |
| inputPattern | インプットの正規表現 | regexp | — | — |
| inputValidator | インプットの検証関数です。ブール値か文字列を返す必要があります。文字列が返された場合、それは inputErrorMessage に代入されます。 | function | — | — |
| inputErrorMessage | バリデーション失敗時のエラーメッセージ | string | — | Illegal input |
| center | コンテンツを中央に配置するかどうか | boolean | — | false |
| roundButton | 丸いボタンを使うかどうか | boolean | — | false |

220
website/docs/jp/message.md Normal file
View File

@ -0,0 +1,220 @@
## メッセージ
アクティビティ後のフィードバックを表示するために使用されます。Notificationとの違いは、後者はシステムレベルの受動的な通知を表示するために使用されることが多いことです。
### 基本的な使い方
上部に表示され、3秒後に消えます。
:::demo メッセージの設定は通知と非常に似ているので、ここではオプションの詳細については説明しません。以下のオプション表とnotificationのドキュメントを組み合わせて確認すると理解が深まります。要素には `$message` メソッドを登録しています。メッセージは文字列かVNodeをパラメータに取ることができ、それが本文として表示されます。
```html
<template>
<el-button :plain="true" @click="open">Show message</el-button>
<el-button :plain="true" @click="openVn">VNode</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$message('This is a message.');
},
openVn() {
const h = this.$createElement;
this.$message({
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode')
])
});
}
}
}
</script>
```
:::
### タイプ
成功、警告、メッセージ、エラーのアクティビティのフィードバックを表示するために使用されます。
:::demo さらにカスタマイズが必要な場合は、メッセージコンポーネントはオブジェクトをパラメータとして受け取ることもできます。例えば、`type`の値を設定することで異なるタイプを定義することができ、デフォルトは `info` です。このような場合、`message`の値として本体が渡されます。また、型ごとにメソッドを登録しているので、`open4`のように型を渡さずに直接呼び出すこともできる。
```html
<template>
<el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open4">error</el-button>
</template>
<script>
export default {
methods: {
open1() {
this.$message('This is a message.');
},
open2() {
this.$message({
message: 'Congrats, this is a success message.',
type: 'success'
});
},
open3() {
this.$message({
message: 'Warning, this is a warning message.',
type: 'warning'
});
},
open4() {
this.$message.error('Oops, this is a error message.');
}
}
}
</script>
```
:::
### クローズ可能
閉じるボタンを追加することができます。
:::demo デフォルトのメッセージは手動で閉じることができません。メッセージを閉じたい場合は `showClose` フィールドを設定することができます。通知と同様に、メッセージにも制御可能な `duration` があります。デフォルトの持続時間は3000msで、`0`に設定してもメッセージは消えません。
```html
<template>
<el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open4">error</el-button>
</template>
<script>
export default {
methods: {
open1() {
this.$message({
showClose: true,
message: 'This is a message.'
});
},
open2() {
this.$message({
showClose: true,
message: 'Congrats, this is a success message.',
type: 'success'
});
},
open3() {
this.$message({
showClose: true,
message: 'Warning, this is a warning message.',
type: 'warning'
});
},
open4() {
this.$message({
showClose: true,
message: 'Oops, this is a error message.',
type: 'error'
});
}
}
}
</script>
```
:::
### 中央のテキスト
テキストを中央に配置するには `center` 属性を使用します。
:::demo
```html
<template>
<el-button :plain="true" @click="openCenter">Centered text</el-button>
</template>
<script>
export default {
methods: {
openCenter() {
this.$message({
message: 'Centered text',
center: true
});
}
}
}
</script>
```
:::
### HTML文字列を使用します。
`message` は HTML 文字列をサポートしています。
:::demo `dangerouslyUseHTMLString` を true に設定すると、`message` は HTML 文字列として扱われます。
```html
<template>
<el-button :plain="true" @click="openHTML">Use HTML String</el-button>
</template>
<script>
export default {
methods: {
openHTML() {
this.$message({
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>'
});
}
}
}
</script>
```
:::
:::warning
`message`プロパティはHTML文字列をサポートしていますが、任意のHTMLを動的にレンダリングすると[XSS攻撃](https://en.wikipedia.org/wiki/Cross-site_scripting)につながりやすく、非常に危険です。したがって、`dangerouslyUseHTMLString`がオンの場合は、`message`の内容が信頼できるものであることを確認し、**決して**ユーザが提供したコンテンツに`message`を代入しないようにしてください。
:::
### グローバルメソッド
要素には、Vue.prototype用のグローバルメソッド `$message` が追加されました。これにより、vueのインスタンスでは、このページで行ったように `Message` を呼び出すことができます。
### ローカルインポート
Import `Message`:
```javascript
import { Message } from 'element-ui';
```
この場合は `Message(options)` を呼び出す必要があります。また、`Message.success(options)`のように、異なるタイプのメソッドも登録しています。すべてのインスタンスを手動で閉じるには、`Message.closeAll()`を呼び出すことができます。
### オプション
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| message | メッセージテキスト | string / VNode | — | — |
| type | メッセージタイプ | string | success/warning/info/error | info |
| iconClass | カスタムアイコンのクラス、 `type` をオーバーライドします。 | string | — | — |
| dangerouslyUseHTMLString | `message` を HTML 文字列として扱うかどうか | boolean | — | false |
| customClass | メッセージ用カスタムクラス名 | string | — | — |
| duration | 表示時間、ミリ秒。0に設定した場合、自動的にはオフになりません。 | number | — | 3000 |
| showClose | 閉じるボタンを表示するかどうか | boolean | — | false |
| center | テキストを中央に配置するかどうか | boolean | — | false |
| onClose | メッセージのインスタンスをパラメータにして閉じた場合のコールバック関数 | function | — | — |
| offset | ビューポートの上端までの距離を設定します | number | — | 20 |
### メソッド
`Message` と `this.$message` は現在の Message インスタンスを返します。インスタンスを手動で閉じるには、そのインスタンスに対して `close` を呼び出すことができます。
| Method | Description |
| ---- | ---- |
| close | メッセージを閉じる |

310
website/docs/jp/notification.md Normal file
View File

@ -0,0 +1,310 @@
## 通知
ページの隅にグローバル通知メッセージを表示します。
### 基本的な使い方
:::demo 要素は `$notify` メソッドを登録し、そのパラメータとしてオブジェクトを受け取ります。最も単純な例では、`title` フィールドと `message` フィールドに通知のタイトルと本文を設定することができます。デフォルトでは、通知は4500ms後に自動的に閉じますが、`duration` を設定することでその期間を制御することができます。具体的には、`0`に設定すると自動的に閉じません。`duration` はミリ秒単位の `Number` を受け取ることに注意すること。
```html
<template>
<el-button
plain
@click="open1">
Closes automatically
</el-button>
<el-button
plain
@click="open2">
Won't close automatically
</el-button>
</template>
<script>
export default {
methods: {
open1() {
const h = this.$createElement;
this.$notify({
title: 'Title',
message: h('i', { style: 'color: teal' }, 'This is a reminder')
});
},
open2() {
this.$notify({
title: 'Prompt',
message: 'This is a message that does not automatically close',
duration: 0
});
}
}
}
</script>
```
:::
### タイプがある場合
success, warning, info, errorの4種類を提供しています。
:::demo要素は4つの通知タイプを提供します。`success`, `warning`, `info`, `error` です。これらは `type` フィールドで設定され、他の値は無視される。また、`open3` や `open4` のように `type` フィールドを渡さずに直接呼び出すことができるメソッドも登録した。
```html
<template>
<el-button
plain
@click="open1">
Success
</el-button>
<el-button
plain
@click="open2">
Warning
</el-button>
<el-button
plain
@click="open3">
Info
</el-button>
<el-button
plain
@click="open4">
Error
</el-button>
</template>
<script>
export default {
methods: {
open1() {
this.$notify({
title: 'Success',
message: 'This is a success message',
type: 'success'
});
},
open2() {
this.$notify({
title: 'Warning',
message: 'This is a warning message',
type: 'warning'
});
},
open3() {
this.$notify.info({
title: 'Info',
message: 'This is an info message'
});
},
open4() {
this.$notify.error({
title: 'Error',
message: 'This is an error message'
});
}
}
}
</script>
```
:::
### カスタム位置
通知は好きなコーナーから出現させることができます。
:::demo `position` 属性は、通知がどのコーナーをスライドするかを定義します。`右上`, `左上`, `右下`, `左下`のいずれかです。デフォルトは `右上`です。
```html
<template>
<el-button
plain
@click="open1">
Top Right
</el-button>
<el-button
plain
@click="open2">
Bottom Right
</el-button>
<el-button
plain
@click="open3">
Bottom Left
</el-button>
<el-button
plain
@click="open4">
Top Left
</el-button>
</template>
<script>
export default {
methods: {
open1() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the top right corner'
});
},
open2() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the bottom right corner',
position: 'bottom-right'
});
},
open3() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the bottom left corner',
position: 'bottom-left'
});
},
open4() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the top left corner',
position: 'top-left'
});
}
}
}
</script>
```
:::
### オフセット付き
通知の画面端からのオフセットをカスタマイズします。
:::demo 通知の画面端からのオフセットをカスタマイズするために `offset` 属性を設定します。同じ瞬間のすべての Notification インスタンスは同じオフセットを持つべきであることに注意してください。
```html
<template>
<el-button
plain
@click="open">
Notification with offset
</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$notify.success({
title: 'Success',
message: 'This is a success message',
offset: 100
});
}
}
}
</script>
```
:::
### HTML文字列を使用します。
`message` は HTML 文字列をサポートしています。
:::demo `dangerouslyUseHTMLString` を true に設定すると、`message` は HTML 文字列として扱われます。
```html
<template>
<el-button
plain
@click="open">
Use HTML String
</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$notify({
title: 'HTML String',
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>'
});
}
}
}
</script>
```
:::
:::warning
`message`プロパティはHTML文字列をサポートしていますが、任意のHTMLを動的にレンダリングすると[XSS攻撃](https://en.wikipedia.org/wiki/Cross-site_scripting)につながりやすく、非常に危険です。したがって、`dangerouslyUseHTMLString`がオンの場合は、`message`の内容が信頼できるものであることを確認し、**決して**ユーザが提供したコンテンツに`message`を代入しないようにしてください。
:::
### 閉じるボタンを隠す
閉じるボタンを非表示にすることができます
:::demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.
```html
<template>
<el-button
plain
@click="open">
Hide close button
</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$notify.success({
title: 'Info',
message: 'This is a message without close button',
showClose: false
});
}
}
}
</script>
```
:::
### グローバルメソッド
要素には、Vue.prototype用のグローバルメソッド `$notify` が追加されました。これにより、Vueのインスタンスでは、このページで行ったように `Notification` を呼び出すことができるようになります。
### ローカルインポート
`Notification` をインポート:
```javascript
import { Notification } from 'element-ui';
```
この場合は `Notification(options)` を呼び出す必要があります。また、`Notification.success(options)`のように、異なるタイプのメソッドも登録しています。すべてのインスタンスを手動で閉じるには、`Notification.closeAll()` を呼び出すことができます。
### オプション
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | タイトル | string | — | — |
| message | デスクリプションテキスト | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | `message` を HTML 文字列として扱うかどうか | boolean | — | false |
| type | 通知タイプ | string | success/warning/info/error | — |
| iconClass | カスタムアイコンのクラスを指定します。これは `type` によってオーバーライドされます。 | string | — | — |
| customClass | 通知用カスタムクラス名 | string | — | — |
| duration | 閉じる前の期間、0に設定すると自動的には閉じません。 | number | — | 4500 |
| position | カスタムポジション | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | 閉じるボタンを表示するかどうか | boolean | — | true |
| onClose | 閉じる時のコールバック関数 | function | — | — |
| onClick | 通知クリック時のコールバック機能 | function | — | — |
| offset | 画面の上端からスクロールします。同時刻の各通知インスタンスは、常に同じスクロールでなければなりません。 | number | — | 0 |
### メソッド
`通知`と `this.$notify` は現在の通知インスタンスを返します。インスタンスを手動で閉じるには、そのインスタンスに対して `close` を呼び出すことができます。
| Method | Description |
| ---- | ---- |
| close | 通知を閉じる |

39
website/docs/jp/page-header.md Normal file
View File

@ -0,0 +1,39 @@
## ページヘッダー
ページのパスがシンプルな場合は、パンくず(Breadcrumb)ではなくPageHeaderを使用することをお勧めします。
### 基本
:::demo
```html
<el-page-header @back="goBack" content="detail">
</el-page-header>
<script>
export default {
methods: {
goBack() {
console.log('go back');
}
}
}
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |------------------------------ | ------ |
| title | メインタイトル | string | — | Back |
| content | 内容 | string | — | — |
### イベント
| Event Name | Description | Parameters |
|----------- |-------------- |----------- |
| back | 右側をクリックするとトリガー | — |
### スロット
| slot | Description |
|---------- | ---------------------- |
| title | タイトル |
| content | 内容 |

200
website/docs/jp/pagination.md Normal file
View File

@ -0,0 +1,200 @@
## ページネーション
データが多すぎて1ページに表示できない場合は、ページネーションを使用します。
### 基本的な使い方
:::demo カンマで区切って表示したいページネーション要素を `layout` に設定します。ページネーション要素は以下の通りです。prev` (前のページに移動するボタン)、`next` (次のページに移動するボタン)、`pager` (ページリスト)、`jumper` (入力へのジャンプ)、`total` (アイテムの合計数)、`size` (ページサイズを決定するための選択)、そして`->` (このシンボル以降のすべての要素が右に引っ張られる)です。
```html
<div class="block">
<span class="demonstration">When you have few pages</span>
<el-pagination
layout="prev, pager, next"
:total="50">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">When you have more than 7 pages</span>
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
```
:::
### ページャー数
:::demo デフォルトでは、ページネーションは7ページを超えると余分なページャーボタンを折りたたむようになっています。これは `pager-count` 属性で設定できます。
```html
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000">
</el-pagination>
```
:::
### 背景色のあるボタン
:::demo `background`属性を設定すると、ボタンの背景色が設定されます。
```html
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
```
:::
### 小さなページネーション
スペースが限られている場合は、小さなページネーションを使用します。
:::demo `small` 属性を `true` に設定するだけで、ページネーションが小さくなります。
```html
<el-pagination
small
layout="prev, pager, next"
:total="50">
</el-pagination>
```
:::
### その他の要素
シナリオに基づいてモジュールを追加します。
:::demo この例は完全なユースケースです。ページサイズの変更と現在のページの変更を扱うために `size-change` と `current-change` イベントを利用しています。例えば、`[100, 200, 300, 400]`は4つのオプションを持つことを示しています。例えば、`[100, 200, 300, 400]` は select に 4 つのオプションがあることを示します。
```html
<template>
<div class="block">
<span class="demonstration">Total item count</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-size="100"
layout="total, prev, pager, next"
:total="1000">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">Change page size</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage2"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="sizes, prev, pager, next"
:total="1000">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">Jump to</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage3"
:page-size="100"
layout="prev, pager, next, jumper"
:total="1000">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">All combined</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`${val} items per page`);
},
handleCurrentChange(val) {
console.log(`current page: ${val}`);
}
},
data() {
return {
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 4
};
}
}
</script>
```
:::
### 1ページしかない場合はページネーションを隠す
ページが1ページしかない場合は、`hide-on-single-page` 属性を設定してページネーションを隠す。
:::demo
```html
<div>
<el-switch v-model="value">
</el-switch>
<el-pagination
:hide-on-single-page="value"
:total="5"
layout="prev, pager, next">
</el-pagination>
</div>
<script>
export default {
data() {
return {
value: false
}
}
}
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | 小さなページネーションの有無 | boolean | — | false |
| background | ボタンに背景色があるかどうか | boolean | — | false |
| page-size | 各ページの項目数.sync 修飾子をサポートしています。 | number | — | 10 |
| total | 総項目数 | number | — | — |
| page-count | ページ数の合計を指定します。`total`か`page-count`のいずれかを設定するとページが表示されます。もし `page-sizes`が必要な場合は`total`が必要です。 | number | — | — |
| pager-count | ページャーの数を指定します。ページ数の合計がこの値を超えるとページネーションが崩れます。 | number | odd number between 5 and 21 | 7 |
| current-page | 現在のページ番号 .sync 修飾子をサポートしています。 | number | — | 1 |
| layout | ページネーションのレイアウト、カンマで区切られた要素 | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | ページあたりの項目数のオプション | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | ページサイズセレクトドロップダウンのカスタムクラス名 | string | — | — |
| prev-text | 前ボタンのテキスト | string | — | — |
| next-text | 次のボタン用テキスト | string | — | — |
| disabled | ページネーションが無効になっているかどうか | boolean | — | false |
| hide-on-single-page | 1ページしかないときに非表示にするかどうか | boolean | — | - |
### イベント
| Event Name | Description | Parameters |
|---------|--------|---------|
| size-change | `page-size` が変更されたときにトリガされる | the new page size |
| current-change | `current-page` が変更されたときにトリガされる | the new current page |
| prev-click | 前ボタンがクリックされ、現在のページが変更されたときに発生します。 | the new current page |
| next-click | 次ボタンがクリックされ、現在のページが変更されたときに発生します。 | the new current page |
### スロット
| Name | Description |
| --- | --- |
| — | カスタムコンテンツ。利用するためには`layout`で`slot`を宣言する必要があります。 |

64
website/docs/jp/popconfirm.md Normal file
View File

@ -0,0 +1,64 @@
## Popconfirm
要素のクリック操作の簡単な確認ダイアログです。
### 基本的な使い方
popconfirm は ポップオーバー と似ています。そのため、重複する属性については ポップオーバー のドキュメントを参照してください。
:::demo popconfirm では `title` 属性のみが利用可能で、`content` 属性は無視されます。
```html
<template>
<el-popconfirm
title="Are you sure to delete this?"
>
<template #reference>
<el-button>Delete</el-button>
</template>
</el-popconfirm>
</template>
````
:::
### カスタマイズ
popconfirmは以下のようにカスタマイズすることができます。:
:::demo
```html
<template>
<el-popconfirm
confirmButtonText='OK'
cancelButtonText='No, Thanks'
icon="el-icon-info"
iconColor="red"
title="Are you sure to delete this?"
>
<template #reference>
<el-button>Delete</el-button>
</template>
</el-popconfirm>
</template>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | タイトル | String | — | — |
| confirmButtonText | 確認ボタンのテキスト | String | — | — |
| cancelButtonText | キャンセルボタンのテキスト | String | — | — |
| confirmButtonType | 確認ボタンの種類 | String | — | Primary |
| cancelButtonType | キャンセルボタンの種類 | String | — | Text |
| icon | アイコン | String | — | el-icon-question |
| iconColor | アイコンカラー | String | — | #f90 |
| hideIcon | アイコンを隠すか | Boolean | — | false |
### スロット
| Name | Description |
|--- | ---|
| reference | Popconfirm をトリガーとするHTML要素 |
### イベント
| Event Name | Description | Parameters |
|---------|--------|---------|
| onConfirm | 確認ボタンをクリックするときのトリガー | — |
| onCancel | キャンセルボタンをクリックするときのトリガー | — |

170
website/docs/jp/popover.md Normal file
View File

@ -0,0 +1,170 @@
## Popover
### 基本的な使い方
Tooltipと同様に、Popoverも `Vue-popper` で構築されています。そのため、重複する属性については、Tooltipのドキュメントを参照してください。
:::demo `trigger` 属性は、popoverがどのようにトリガーされるかを定義するために使用されます: `hover`, `click`, `focus`, `manual`。それは、`slot="reference"` という名前のスロットを使うか、`v-popover` ディレクティブを使って popover の `ref` に設定するかです。
```html
<template>
<el-popover
placement="top-start"
title="Title"
width="200"
trigger="hover"
content="this is content, this is content, this is content">
<el-button slot="reference">Hover to activate</el-button>
</el-popover>
<el-popover
placement="bottom"
title="Title"
width="200"
trigger="click"
content="this is content, this is content, this is content">
<el-button slot="reference">Click to activate</el-button>
</el-popover>
<el-popover
ref="popover"
placement="right"
title="Title"
width="200"
trigger="focus"
content="this is content, this is content, this is content">
</el-popover>
<el-button v-popover:popover>Focus to activate</el-button>
<el-popover
placement="bottom"
title="Title"
width="200"
trigger="manual"
content="this is content, this is content, this is content"
v-model="visible">
<el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>
</el-popover>
</template>
<script>
export default {
data() {
return {
visible: false
};
}
};
</script>
```
:::
### 入れ子になっている情報
popoverの中には、他のコンポーネントを入れ子にすることができます。以下はネストされたテーブルの例です。
:::demo `content`属性をデフォルトの`slot`に置き換えています。
```html
<el-popover
placement="right"
width="400"
trigger="click">
<el-table :data="gridData">
<el-table-column width="150" property="date" label="date"></el-table-column>
<el-table-column width="100" property="name" label="name"></el-table-column>
<el-table-column width="300" property="address" label="address"></el-table-column>
</el-table>
<el-button slot="reference">Click to activate</el-button>
</el-popover>
<script>
export default {
data() {
return {
gridData: [{
date: '2016-05-02',
name: 'Jack',
address: 'New York City'
}, {
date: '2016-05-04',
name: 'Jack',
address: 'New York City'
}, {
date: '2016-05-01',
name: 'Jack',
address: 'New York City'
}, {
date: '2016-05-03',
name: 'Jack',
address: 'New York City'
}]
};
}
};
</script>
```
:::
### 入れ子になった操作
もちろん、他の操作をネストすることもできます。ダイアログを使うよりも軽量です。
:::demo
```html
<el-popover
placement="top"
width="160"
v-model="visible">
<p>Are you sure to delete this?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">cancel</el-button>
<el-button type="primary" size="mini" @click="visible = false">confirm</el-button>
</div>
<el-button slot="reference">Delete</el-button>
</el-popover>
<script>
export default {
data() {
return {
visible: false,
};
}
}
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| trigger | popoverがどのようにトリガーされるか | string | click/focus/hover/manual | click |
| title | popoverのタイトル | string | — | — |
| content | popoverコンテンツ、デフォルトの `slot` で置き換えることができます。 | string | — | — |
| width | popover幅 | string, number | — | Min width 150px |
| placement | popover配置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| disabled | popoverが無効になっているかどうか | boolean | — | false |
| value / v-model | popoverが表示されているかどうか | Boolean | — | false |
| offset | popoverオフセット | number | — | 0 |
| transition | popoverトランジションアニメーション | string | — | el-fade-in-linear |
| visible-arrow | ツールチップの矢印が表示されているかどうかを指定します。詳細については [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | [popper.js](https://popper.js.org/documentation.html) のためのパラメータ | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | popover用カスタムクラス名 | string | — | — |
| open-delay | `trigger` がホバーされたときに表示されるまでの遅延時間(ミリ秒単位) | number | — | — |
| close-delay | `trigger` がホバーされたときに消えるまでの遅延時間(ミリ秒単位) | number | — | 200 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) のpopover | number | — | 0 |
### スロット
| Name | Description |
| --- | --- |
| — | popoverのテキストコンテンツ |
| reference | popoverをトリガーするHTML要素 |
### イベント
| Event Name | Description | Parameters |
|---------|--------|---------|
| show | popoverが表示されたときにトリガー | — |
| after-enter | 入力トランジションの終了時にトリガされます。 | — |
| hide | popoverが非表示になったときにトリガー | — |
| after-leave | 離脱トランジション終了時のトリガー | — |

173
website/docs/jp/progress.md Normal file
View File

@ -0,0 +1,173 @@
## 進捗状況
現在の操作の進捗状況を表示し、ユーザーに現在の状態を知らせるために使用されます。
### 線形プログレスバー
:::demo パーセントを設定するには `percentage` 属性を用いる。**必須**で、`0-100`の間で指定する必要があります。`format`を設定することで、テキストの書式をカスタマイズすることができます。
```html
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>
<script>
export default {
methods: {
format(percentage) {
return percentage === 100 ? 'Full' : `${percentage}%`;
}
}
};
</script>
```
:::
### 内部比率
この場合、パーセンテージは追加のスペースを取りません。
:::demo `ストローク幅`属性はプログレスバーの幅を決定し、プログレスバーの中に説明を加えるには`text-inside`属性を使う。
```html
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
```
:::
### カスタムカラー
プログレスバーの色を設定するには `color` attr を使うことができ、色文字列、関数、配列のいずれかを受け付けます。
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 20,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
customColorMethod(percentage) {
if (percentage < 30) {
return '#909399';
} else if (percentage < 70) {
return '#e6a23c';
} else {
return '#67c23a';
}
},
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
```
:::
### 円形のプログレスバー
:::demo `type` 属性に `circle` を指定すると円形のプログレスバーが利用でき、`width` 属性を指定すると円形の大きさを変更することができます。
```html
<el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
```
:::
### ダッシュボードのプログレスバー
`dashboard` に `type` 属性を指定することでダッシュボードのプログレスバーも利用できる。
:::demo
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 10,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
| --- | ---- | ---- | ---- | ---- |
| **percentage** | パーセンテージ、 **required** | number | 0-100 | 0 |
| type | プログレスバーの種類 | string | line/circle/dashboard | line |
| stroke-width | プログレスバーの幅 | number | — | 6 |
| text-inside | パーセントをプログレスバーの中に配置するかどうか、`type`が 'line'の場合のみ動作します。 | boolean | — | false |
| status | プログレスバーの現在の状態 | string | success/exception/warning | — |
| color | プログレスバーの背景色を指定します。`status` プロップをオーバーライドします。 | string/function/array | — | '' |
| width | サークルプログレスバーのキャンバス幅 | number | — | 126 |
| show-text | パーセンテージ表示の有無 | boolean | — | true |
| stroke-linecap | 終点でのサークル/ダッシュボード型の形状 | string | butt/round/square | round |

286
website/docs/jp/quickstart.md Normal file
View File

@ -0,0 +1,286 @@
## クイックスタート
このパートでは、webpackプロジェクトでElementを用いた開発プロセスを説明します。
### vue-cli@4.5を使う
私達はvue-cli@4.5のために [Element Plus plugin](https://github.com/element-plus/vue-cli-plugin-element-plus) 提供しており, 簡単に Elementベースのプロジェクトを構築出来ます。
### スターターキットを使う
私達は一般的なツール[project template](https://github.com/element-plus/element-plus-starter) があります。 直接ダウンロードして使うことが出来ます。
これらのツールを使いたくない場合は、以下の記事を御覧ください。
### Element Plusをインポートする
Elementを完全にインポートすることも、必要なものだけをインポートすることもできます。完全なインポートから始めましょう。
#### 完全にインポートした場合
main.js:
```javascript
import { createApp, Vue } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
```
上記のコードは完全にElementをインポートします。CSSファイルは個別にインポートする必要があることを注意してください。
#### オンデマンド
[babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component) を用いて、 必要な分のコンポーネントをインポートし、プロジェクトをより小さくすることが出来ます。
はじめに、babel-plugin-componentをインストール:
```bash
npm install babel-plugin-component -D
```
つぎに .babelrc を編集します:
```json
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-plus",
"styleLibraryName": "theme-chalk"
}
]
]
}
```
次に、ボタンとセレクトが必要な場合、main.jsを編集します:
```javascript
import Vue from 'vue';
import { Button, Select } from 'element-plus';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* or
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
```
全ての例 (コンポーネントリストのリファレンスは [components.json](https://github.com/ElemeFE/element/blob/master/components.json) を御覧ください)
```javascript
import Vue from 'vue';
import {
Pagination,
Dialog,
Autocomplete,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Input,
InputNumber,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
Option,
OptionGroup,
Button,
ButtonGroup,
Table,
TableColumn,
DatePicker,
TimeSelect,
TimePicker,
Popover,
Tooltip,
Breadcrumb,
BreadcrumbItem,
Form,
FormItem,
Tabs,
TabPane,
Tag,
Tree,
Alert,
Slider,
Icon,
Row,
Col,
Upload,
Progress,
Spinner,
Badge,
Card,
Rate,
Steps,
Step,
Carousel,
CarouselItem,
Collapse,
CollapseItem,
Cascader,
ColorPicker,
Transfer,
Container,
Header,
Aside,
Main,
Footer,
Timeline,
TimelineItem,
Link,
Divider,
Image,
Calendar,
Backtop,
PageHeader,
CascaderPanel,
Loading,
MessageBox,
Message,
Notification
} from 'element-ui';
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
```
### グローバルコンフィグ
Elenentをインポートする際、グローバルコンフィグオブジェクトを定義出来ます。現時点では2つのプロパティ: `size` と `zIndex` があります。 プロパティ `size` はすべてのコンポーネントのデフォルトサイズ、プロパティ `zIndex` はモーダルボックスの初期の z-index (デフォルト: 2000) を設定します。
Elementを完全にインポート：
```js
import Vue from 'vue';
import ElementPlus from 'element-plus';
Vue.use(Element, { size: 'small', zIndex: 3000 });
```
Elementを部分的にインポート：
```js
import Vue from 'vue';
import { Button } from 'element-plus';
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);
```
上記の設定では、size属性を持つすべてのコンポーネントのデフォルトのサイズは `small`、モーダルボックスのデフォルト値 `z-index` は3000となります。
### コーディングを始めましょう
プロジェクトに Vue と Element を実装したので、いよいよコードを書く時が来ました。使用方法については、各コンポーネントのドキュメントを参照してください。
### Nuxt.jsを使う
[Nuxt.js](https://nuxtjs.org/) を使ってプロジェクトを立ち上げることも出来ます:
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
<iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
</div>

213
website/docs/jp/radio.md Normal file
View File

@ -0,0 +1,213 @@
## ラジオ
複数の選択肢の中から1つを選択することができます。
### 基本的な使い方
ラジオにはあまり多くのオプションを持たせてはいけません。多くのオプションを持つなら代わりにSelectコンポーネントを使用します。
:::demo radioコンポーネントの作成は簡単で、Radioの `v-model` に変数をバインドするだけです。これは選択したラジオの `label` の値に等しくなります。ラベルの型は `String`, `Number`, `Boolean` のいずれかです。
```html
<template>
<el-radio v-model="radio" label="1">Option A</el-radio>
<el-radio v-model="radio" label="2">Option B</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
```
:::
### 無効化
ラジオを無効にするには `disabled` 属性を用います。
:::demo `disabled`属性を追加する必要があります。
```html
<template>
<el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
<el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
</template>
<script>
export default {
data () {
return {
radio: 'selected and disabled'
};
}
}
</script>
```
:::
### ラジオボタングループ
相互に関連し、排他的なオプションから一つのボタンを選択するのに適しています。
:::demo `el-radio-group` と `el-radio` を組み合わせてラジオグループを表示する。el-radio-group` 要素の `v-model` を変数にバインドし、ラベルの値を `el-radio` に設定する。また、現在の値をパラメータとした `change` イベントも提供する。
```html
<el-radio-group v-model="radio">
<el-radio :label="3">Option A</el-radio>
<el-radio :label="6">Option B</el-radio>
<el-radio :label="9">Option C</el-radio>
</el-radio-group>
<script>
export default {
data () {
return {
radio: 3
};
}
}
</script>
```
:::
### ボタンスタイル
ボタンスタイルのラジオ。
:::demo `el-radio` 要素を `el-radio-button` 要素に変更すればよい。また、`size`属性も用意している。
```html
<template>
<div>
<el-radio-group v-model="radio1">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio2" size="medium">
<el-radio-button label="New York" ></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio3" size="small">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington" disabled ></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio4" disabled size="mini">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
</template>
<script>
export default {
data () {
return {
radio1: 'New York',
radio2: 'New York',
radio3: 'New York',
radio4: 'New York'
};
}
}
</script>
```
:::
### ボーダーを付ける
:::demo `border` 属性はラジオにボーダーをつけます。
```html
<template>
<div>
<el-radio v-model="radio1" label="1" border>Option A</el-radio>
<el-radio v-model="radio1" label="2" border>Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
<el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio3" size="small">
<el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border disabled>Option B</el-radio>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio4" size="mini" disabled>
<el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border>Option B</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
data () {
return {
radio1: '1',
radio2: '1',
radio3: '1',
radio4: '1'
};
}
}
</script>
```
:::
### ラジオ属性
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
value / v-model | バインド値 | string / number / boolean | — | —
label | ラジオの値 | string / number / boolean | — | —
disabled | ラジオが無効になっているかどうか | boolean | — | false
border | ラジオの周りにボーダーを追加するかどうか | boolean | — | false
size | ラジオのサイズ、`border` が真の場合のみ動作します。 | string | medium / small / mini | —
name | ネイティブ 'name' 属性 | string | — | —
### ラジオイベント
| Event Name | Description | Parameters |
| --- | --- | --- |
| change | バウンド値が変更された場合にトリガされます。 | 選択されたラジオのラベル値 |
### ラジオグループ属性
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
value / v-model | バインディング値 | string / number / boolean | — | —
size | ラジオボタンのボーダーもしくはラジオボタンの大きさ | string | medium / small / mini | —
disabled | ネストしたラジオが無効になっているかどうか | boolean | — | false
text-color | ボタンがアクティブなときのフォント色 | string | — | #ffffff |
fill | ボタンがアクティブなときの境界線と背景色 | string | — | #409EFF |
### ラジオグループイベント
| Event Name | Description | Parameters |
| --- | --- | --- |
| change | バウンド値が変更された場合にトリガされます。 | 選択されたラジオのラベル値 |
### ラジオボタン属性
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
label | ラジオの値 | string / number | — | —
disabled | ラジオが無効かどうか | boolean | — | false
name | ネイティブ 'name' 属性 | string | — | —

139
website/docs/jp/rate.md Normal file
View File

@ -0,0 +1,139 @@
## レート
レーティングに使用
### 基本的な使い方
:::demo レートはレーティングスコアをいくつかのレベルに分割し、異なる背景色を使うことでこれらのレベルを区別することができます。デフォルトでは背景色は同じですが、`colors`属性を用いて3つのレベルを反映させるために3つの要素を持つ配列を割り当てることができ、2つのしきい値は`low-threshold`と`high-threshold`で定義することができます。または、2つのレベル間のしきい値をキー、値を対応する色とするオブジェクトで割り当てることができます。
```html
<div class="block">
<span class="demonstration">Default</span>
<el-rate v-model="value1"></el-rate>
</div>
<div class="block">
<span class="demonstration">Color for different levels</span>
<el-rate
v-model="value2"
:colors="colors">
</el-rate>
</div>
<script>
export default {
data() {
return {
value1: null,
value2: null,
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
}
}
}
</script>
```
:::
### テキスト付き
評価点を示すためのテキストの使用
:::demo 属性 `show-text` を追加して、Rateの右にテキストを表示するようにします。テキストは `texts` を使って異なるスコアに割り当てることができます。`texts` は配列で、長さが最大スコアの `max` と等しくなければなりません。
```html
<el-rate
v-model="value"
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
show-text>
</el-rate>
<script>
export default {
data() {
return {
value: null
}
}
}
</script>
```
:::
### その他のアイコン
異なるレートコンポーネントを区別するために、異なるアイコンを使用することができます。
:::demo `icon-classes` には3つの要素を持つ配列か、2つのレベルの間のしきい値をキー、値を対応するアイコンクラスとするオブジェクトを渡すことで、アイコンをカスタマイズすることができます。この例では、非選択時にアイコンを設定するために `void-icon-class` を利用しています。
```html
<el-rate
v-model="value"
:icon-classes="iconClasses"
void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>
<script>
export default {
data() {
return {
value: null,
iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
}
}
}
</script>
```
:::
### 読み取り専用
読み取り専用 Rateはレーティングスコアを表示するためのものです。半分星に対応しています。
:::demo 属性 `disabled` を用いてコンポーネントを読み取り専用にする。右側にレーティングスコアを表示するために `show-score` を追加します。さらに、属性 `score-template` を用いてスコアのテンプレートを提供することもできます。これは `{value}` を含んでいなければならず、`{value}` はレーティングスコアに置き換えられます。
```html
<el-rate
v-model="value"
disabled
show-score
text-color="#ff9900"
score-template="{value} points">
</el-rate>
<script>
export default {
data() {
return {
value: 3.7
}
}
}
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | バインディング値 | number | — | 0 |
| max | 最大レーティングスコア | number | — | 5 |
| disabled | レートが読み取り専用かどうか | boolean | — | false |
| allow-half | ピッキングハーフスタートが許可されているか | boolean | — | false |
| low-threshold | 低レベルと中レベルの間のしきい値。値自体は、低レベルに含まれる | number | — | 2 |
| high-threshold | 中レベルと高レベルの間のしきい値。値自体は、中レベルに含まれる | number | — | 4 |
| colors | アイコンの色を指定します。配列の場合は 3 つの要素を持ち、それぞれがスコアレベルに対応していなければなりません。 オブジェクトの場合は、キーは 2 つのレベル間のしきい値で、値は対応する色でなければなりません。 | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | 非選択アイコンの色 | string | — | #C6D1DE |
| disabled-void-color | 非選択時の読み取り専用アイコンの色 | string | — | #EFF2F7 |
| icon-classes | アイコンのクラス名を指定します。arrayの場合は3つの要素を持ち、それぞれがスコアレベルに対応していなければなりませんが、objectの場合は2つのレベル間の閾値がキーとなり、その値が対応するアイコンクラスとなります。 | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| void-icon-class | 非選択アイコンのクラス名 | string | — | el-icon-starオブジェクト
| disabled-void-icon-class | 非選択時読み取り専用アイコンのクラス名 | string | — | el-icon-star-on |
| show-text | テキスト表示の有無 | boolean | — | false |
| show-score | 現在のスコアを表示するかどうか。show-score と show-text は同時にtrueにすることはできません。 | boolean | — | false |
| text-color | テキストの色 | string | — | #1F2D3D |
| texts | テキストの配列 | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
| score-template | スコアテンプレート | string | — | {value} |
### イベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | レート値が変更されたときにトリガ | value after changing |

591
website/docs/jp/select.md Normal file
View File

@ -0,0 +1,591 @@
## セレクト
オプションが豊富な場合は、ドロップダウンメニューを使って表示し、希望するものをセレクトすることができます。
### 基本的な使い方
:::demo `v-model` は現在セレクトされている `el-option` の値である。
```html
<template>
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: ''
}
}
}
</script>
```
:::
### オプションの無効化
:::demo オプションを無効にするには、`el-option` の `disabled` の値を `true` に設定する。
```html
<template>
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2',
disabled: true
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: ''
}
}
}
</script>
```
:::
### オプションの無効化
コンポーネント全体を無効にします。
:::demo `el-select` の `disabled` を設定すると無効になります。
```html
<template>
<el-select v-model="value" disabled placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: ''
}
}
}
</script>
```
:::
### クリア可能なセレクト
セレクトはクリアアイコンでクリアできます。
:::demo `el-select` に `clearable` 属性を設定すると、クリアアイコンが表示されるようになる。なお、`clearable`はシングルセレクトの場合のみ有効である。
```html
<template>
<el-select v-model="value" clearable placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: ''
}
}
}
</script>
```
:::
### 基本的な複数セレクト
複数セレクトは、セレクトされたオプションを表示するためにタグを使用します。
:::demo 複数モードを有効にするには、`el-select` に `multiple` 属性を設定する。この場合、`v-model` の値はセレクトされたオプションの配列となる。デフォルトでは、セレクトされたオプションはタグとして表示される。collapse-tags` 属性を用いることで、それらをテキストに折りたたむことができる。
```html
<template>
<el-select v-model="value1" multiple placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select
v-model="value2"
multiple
collapse-tags
style="margin-left: 20px;"
placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value1: [],
value2: []
}
}
}
</script>
```
:::
### カスタムテンプレート
オプションのHTMLテンプレートをカスタマイズすることができます。
:::demo カスタマイズしたHTMLテンプレートを `el-option` のスロットに挿入します。
```html
<template>
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
cities: [{
value: 'Beijing',
label: 'Beijing'
}, {
value: 'Shanghai',
label: 'Shanghai'
}, {
value: 'Nanjing',
label: 'Nanjing'
}, {
value: 'Chengdu',
label: 'Chengdu'
}, {
value: 'Shenzhen',
label: 'Shenzhen'
}, {
value: 'Guangzhou',
label: 'Guangzhou'
}],
value: ''
}
}
}
</script>
```
:::
### グルーピング
グループのオプションを表示します。
:::demo オプションをグループ化するには `el-option-group` を用い、その `label` 属性はグループ名を表す。
```html
<template>
<el-select v-model="value" placeholder="Select">
<el-option-group
v-for="group in options"
:key="group.label"
:label="group.label">
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-option-group>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
label: 'Popular cities',
options: [{
value: 'Shanghai',
label: 'Shanghai'
}, {
value: 'Beijing',
label: 'Beijing'
}]
}, {
label: 'City name',
options: [{
value: 'Chengdu',
label: 'Chengdu'
}, {
value: 'Shenzhen',
label: 'Shenzhen'
}, {
value: 'Guangzhou',
label: 'Guangzhou'
}, {
value: 'Dalian',
label: 'Dalian'
}]
}],
value: ''
}
}
}
</script>
```
:::
### オプションフィルタリング
ご希望のオプションをフィルタリングすることができます。
:::demo `el-select` に `filterable` を追加すると、フィルタリングが可能になる。デフォルトでは、セレクト肢は `label` 属性に入力値が含まれるすべてのオプションを検索する。他のフィルタリング方法を使いたい場合は、`filter-method`を渡すことができる。`filter-method` は入力値が変更されたときに呼び出される `Function` であり、そのパラメータは現在の入力値である。
```html
<template>
<el-select v-model="value" filterable placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: ''
}
}
}
</script>
```
:::
### リモート検索
サーバーからキーワードや検索データを入力します。
:::demo リモート検索を有効にするには `filterable` と `remote` を `true` を設定し、`remote-method` を渡す必要がある。`remote-method`は入力値が変化したときに呼び出される `Function` であり、そのパラメータは現在の入力値である。もし `el-option` が `v-for` ディレクティブでレンダリングされている場合は、`el-option` に `key` 属性を追加しなければならないことに注意してください。その値は、以下の例の `item.value` のように一意である必要があります。
```html
<template>
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="Please enter a keyword"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [],
value: [],
list: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"]
}
},
mounted() {
this.list = this.states.map(item => {
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
}
}
}
}
</script>
```
:::
### 新規アイテムの作成
セレクトオプションに含まれないアイテムを新規に作成してセレクトする
:::demo `allow-create`属性を使うことで、ユーザは入力ボックスに入力することで新しいアイテムを作成することができます。なお、`allow-create` が動作するためには、`filterable` が `true` でなければならない。この例では `default-first-option` も示している。この属性を `true` に設定すると、マウスや矢印キーで移動しなくても、エンターキーを押すことで現在のオプションリストの最初のオプションをセレクトすることができる。
```html
<template>
<el-select
v-model="value"
multiple
filterable
allow-create
default-first-option
placeholder="Choose tags for your article">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'HTML',
label: 'HTML'
}, {
value: 'CSS',
label: 'CSS'
}, {
value: 'JavaScript',
label: 'JavaScript'
}],
value: []
}
}
}
</script>
```
:::
:::tip
セレクトされたバインディング値がオブジェクトの場合、そのユニークな ID キー名として `value-key` を割り当てるようにしてください。
:::
### 属性の選択
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | バインディング値 | boolean / string / number | — | — |
| multiple | 複数セレクトが有効かどうか | boolean | — | false |
| disabled | セレクトが無効になっているかどうか | boolean | — | false |
| value-key | 値がオブジェクトの場合に必要な、値の一意の ID キー名 | string | — | value |
| size | インプットサイズ | string | large/small/mini | — |
| clearable | セレクトクリア可能かどうか | boolean | — | false |
| collapse-tags | 複数セレクト時にタグをテキストに折りたたむかどうか | boolean | — | false |
| multiple-limit | `multiple` が `true` のときにユーザがセレクトできるオプションの最大数。0に設定した場合は無制限 | number | — | 0 |
| name | セレクト入力の名前属性 | string | — | — |
| autocomplete | セレクト入力のオートコンプリート属性 | string | — | off |
| auto-complete | 次期メジャーバージョンでは@DEPRECATED | string | — | off |
| placeholder | プレースホルダー | string | — | Select |
| filterable | セレクトがフィルタリング可能かどうか | boolean | — | false |
| allow-create | 新しいアイテムの作成を許可するかどうかを指定します。これを使うには、`filterable` がtrueでなければなりません。 | boolean | — | false |
| filter-method | カスタムフィルタ方式 | function | — | — |
| remote | オプションがサーバから読み込まれているかどうか | boolean | — | false |
| remote-method | カスタムリモート検索法 | function | — | — |
| loading | セレクトがサーバからデータをロードしているかどうか | boolean | — | false |
| loading-text | サーバからのデータ読み込み中に表示されるテキスト | string | — | Loading |
| no-match-text | フィルタリングクエリに一致するデータがない場合は、スロット `empty` を使用することもできます。 | string | — | No matching data |
| no-data-text | オプションがないときにテキストを表示するには、スロット `empty` を使うこともできます。 | string | — | No data |
| popper-class | custom class name for Select's dropdown | string | — | — |
| reserve-keyword | `multiple` と `filter` が真の場合、オプションを選択した後に現在のキーワードを予約するかどうか | boolean | — | false |
| default-first-option | エンターキーで最初にマッチするオプションを選択する。`filterable` または `remote`と一緒に使う | boolean | - | false |
| popper-append-to-body| ポッパーメニューをボディに追加するかどうか。ポッパーの位置が間違っている場合は、このプロップを false に設定してみてください。 | boolean | - | true |
| automatic-dropdown | ノンフィルターセレクトの場合、このプロップは、入力がフォーカスされたときにオプションメニューがポップアップするかどうかを決定します。 | boolean | - | false |
### イベントの選択
| Event Name | Description | Parameters |
|---------|---------|---------|
| change | 選択された値が変更されたときにトリガされます。 | current selected value |
| visible-change | ドロップダウンが表示/非表示になったときにトリガされます。 | true when it appears, and false otherwise |
| remove-tag | 複数のモードでタグが削除された場合のトリガー | removed tag value |
| clear | クリア可能な選択範囲内でクリアアイコンがクリックされたときにトリガーされます。 | — |
| blur | インプットがぼやけたときにトリガされます。 | (event: Event) |
| focus | インプットがフォーカスされたときにトリガされます。 | (event: Event) |
### セレクトスロット
| Name | Description |
|---------|-------------|
| — | オプションコンポーネントリスト |
| prefix | セレクトプレフィックスとしてのコンテンツ |
| empty | オプションがない場合のコンテンツ |
### オプショングループの属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| label | グループの名前 | string | — | — |
| disabled | このグループのすべてのオプションを無効にするかどうか | boolean | — | false |
### オプション属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value | オプションの値 | string/number/object | — | — |
| label | オプションのラベル、省略された場合は `value` と同じ | string/number | — | — |
| disabled | オプションが無効かどうか | boolean | — | false |
### 方法
| Method | Description | Parameters |
|------|--------|-------|
| focus | インプットコンポーネントにフォーカス | - |
| blur | インプットコンポーネントをぼかし、ドロップダウンを非表示にします。 | - |

240
website/docs/jp/slider.md Normal file
View File

@ -0,0 +1,240 @@
## スライダー
一定の範囲内でスライダーをドラッグします。
### 基本的な使い方
スライダーをドラッグしているときに現在の値が表示されます。
:::demo バインド値を設定してスライダーの初期値をカスタマイズします。
```html
<template>
<div class="block">
<span class="demonstration">Default value</span>
<el-slider v-model="value1"></el-slider>
</div>
<div class="block">
<span class="demonstration">Customized initial value</span>
<el-slider v-model="value2"></el-slider>
</div>
<div class="block">
<span class="demonstration">Hide Tooltip</span>
<el-slider v-model="value3" :show-tooltip="false"></el-slider>
</div>
<div class="block">
<span class="demonstration">Format Tooltip</span>
<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
</div>
<div class="block">
<span class="demonstration">Disabled</span>
<el-slider v-model="value5" disabled></el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 50,
value3: 36,
value4: 48,
value5: 42
}
},
methods: {
formatTooltip(val) {
return val / 100;
}
}
}
</script>
```
:::
### 離散値
オプションは離散的にすることができます。
:::demo `step` 属性でステップサイズを設定する。`show-stop` 属性を設定することでブレークポイントを表示することができる。
```html
<template>
<div class="block">
<span class="demonstration">Breakpoints not displayed</span>
<el-slider
v-model="value1"
:step="10">
</el-slider>
</div>
<div class="block">
<span class="demonstration">Breakpoints displayed</span>
<el-slider
v-model="value2"
:step="10"
show-stops>
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 0
}
}
}
</script>
```
:::
### インプットボックス付きスライダー
インプットボックスから値を設定します。
:::demo 右側にインプットボックスを表示するために `show-input` 属性を設定する。
```html
<template>
<div class="block">
<el-slider
v-model="value"
show-input>
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: 0
}
}
}
</script>
```
:::
### 範囲の選択
値の範囲の選択に対応しています。
:::demo `range`属性を設定すると、範囲モードが有効になり、バインディング値は2つの境界値からなる配列となります。
```html
<template>
<div class="block">
<el-slider
v-model="value"
range
show-stops
:max="10">
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: [4, 8]
}
}
}
</script>
```
:::
### 垂直モード
:::demo `vertical` 属性を `true` に設定すると、垂直モードが有効になる。垂直モードでは `height` 属性が必要である。
```html
<template>
<div class="block">
<el-slider
v-model="value"
vertical
height="200px">
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: 0
}
}
}
</script>
```
:::
### マークを表示
:::demo この `marks` 属性を設定すると、スライダーにマークを表示することができる。
```html
<template>
<div class="block">
<el-slider
v-model="value"
range
:marks="marks">
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: [30, 60],
marks: {
0: '0°C',
8: '8°C',
37: '37°C',
50: {
style: {
color: '#1989FA'
},
label: '50%'
}
}
}
}
}
</script>
```
:::
## 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | バインディング値 | number | — | 0 |
| min | 最小値 | number | — | 0 |
| max | 最大値 | number | — | 100 |
| disabled | スライダーが無効になっているかどうか | boolean | — | false |
| step | ステップサイズ | number | — | 1 |
| show-input | whether to display an input box, works when `range` is false | boolean | — | false |
| show-input-controls | 入力ボックスを表示するかどうか、`range` が false のときに動作します。 | boolean | — | true |
| input-size | インプットボックスのサイズ | string | large / medium / small / mini | small |
| show-stops | ブレークポイントを表示するかどうか | boolean | — | false |
| show-tooltip | ツールチップの値を表示するかどうか | boolean | — | true |
| format-tooltip | ツールチップの値を表示するためのフォーマット | function(value) | — | — |
| range | 範囲セレクトするかどうか | boolean | — | false |
| vertical | 垂直モード | boolean | — | false |
| height | スライダーの高さ、垂直モードで必要 | string | — | — |
| label | スクリーンリーダー用ラベル | string | — | — |
| debounce | タイプ時のデバウンス遅延をミリ秒単位で指定する。`show-input` がtrueのときに動作します。 | number | — | 300 |
| tooltip-class | ツールチップのカスタムクラス名 | string | — | — |
| marks | マークは，キーの種類は数字で，閉じた間隔[min, max]でなければなりません。マークはスタイルをカスタム出来ます。| object | — | — |
## イベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | 値が変更されたときにトリガされます（マウスがドラッグされている場合、このイベントはマウスが離されたときにのみ発生します）。 | value after changing |
| input | データが変化した時にトリガーする(スライド中にリアルタイムでエミットされる) | value after changing |

160
website/docs/jp/steps.md Normal file
View File

@ -0,0 +1,160 @@
## ステップ
プロセスに沿ってタスクを完了するようにユーザーを誘導します。そのステップは、実際のアプリケーションのシナリオに応じて設定することができ、ステップの数は2以下にすることはできません。
### 基本的な使い方
シンプルなステップバーです。
:::demo ステップのインデックスを示す `Number` 型の `active` 属性を設定する。 ステップの幅を固定する必要がある場合に `space` 属性を設定すると、`Number` 型を受け付けることができる。`space` 属性の単位は `px` である。設定されていない場合はレスポンシブです。`finish-status` 属性を設定すると、完了したステップの状態を変更することができる。
```html
<el-steps :active="active" finish-status="success">
<el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step>
</el-steps>
<el-button style="margin-top: 12px;" @click="next">Next step</el-button>
<script>
export default {
data() {
return {
active: 0
};
},
methods: {
next() {
if (this.active++ > 2) this.active = 0;
}
}
}
</script>
```
:::
### ステータスを含むステップバー
各ステップのステータスを表示します。
:::demo ステップの名前を設定するには `title` 属性を使うか、`slot` という名前を使って属性をオーバーライドします。このページの最後に全てのスロット名をリストアップしました。
```html
<el-steps :space="200" :active="1" finish-status="success">
<el-step title="Done"></el-step>
<el-step title="Processing"></el-step>
<el-step title="Step 3"></el-step>
</el-steps>
```
:::
### センター
タイトルと説明文は中央揃えにすることができます。
:::demo
```html
<el-steps :active="2" align-center>
<el-step title="Step 1" description="Some description"></el-step>
<el-step title="Step 2" description="Some description"></el-step>
<el-step title="Step 3" description="Some description"></el-step>
<el-step title="Step 4" description="Some description"></el-step>
</el-steps>
```
:::
### ステップバーには説明文が表示されます。
各ステップの説明があります。
:::demo
```html
<el-steps :active="1">
<el-step title="Step 1" description="Some description"></el-step>
<el-step title="Step 2" description="Some description"></el-step>
<el-step title="Step 3" description="Some description"></el-step>
</el-steps>
```
:::
### ステップバー（アイコン付き）
ステップバーには様々なカスタムアイコンを使用することができます。
:::demo アイコンは `icon` プロパティで設定します。アイコンの種類については、Iconコンポーネントのドキュメントを参照してください。さらに、`slot` を通じてアイコンをカスタマイズすることもできる。
```html
<el-steps :active="1">
<el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps>
```
:::
### 垂直方向のステップバー
垂直方向のステップバー
:::demo `el-steps` 要素で `direction` 属性を` vertical` に設定するだけです。
```html
<div style="height: 300px;">
<el-steps direction="vertical" :active="1">
<el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step>
</el-steps>
</div>
```
:::
### シンプルなステップバー
単純なステップバーで、`align-center`, `description`, `direction`, `space` は無視されます。
:::demo
```html
<el-steps :space="200" :active="1" simple>
<el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps>
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
<el-step title="Step 1" ></el-step>
<el-step title="Step 2" ></el-step>
<el-step title="Step 3" ></el-step>
</el-steps>
```
:::
### ステップ属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| space | 各ステップの間隔を指定し、省略した場合は応答します。パーセンテージをサポートしています。 | number / string | — | — |
| direction | 表示方向 | string | vertical/horizontal | horizontal |
| active | 現在アクティブになっているステップ | number | — | 0 |
| process-status | 現在のステップの状態 | string | wait / process / finish / error / success | process |
| finish-status | 終了ステップの状態 | string | wait / process / finish / error / success | finish |
| align-center | センタータイトルと説明 | boolean | — | false |
| simple | シンプルなテーマを適用するかどうか | boolean | - | false |
### ステップ属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| title | ステップタイトル | string | — | — |
| description | ステップ記述 | string | — | — |
| icon | ステップアイコン | step icon's class name. Icons can be passed via named slot as well | string | — |
| status | 現在の状態を表示します。設定されていない場合は、ステップスによって自動的に設定されます。 | wait / process / finish / error / success | - |
### ステップスロット
| Name | Description |
|----|----|
| icon | カスタムアイコン |
| title | ステップタイトル |
| description | ステップ記述 |

143
website/docs/jp/switch.md Normal file
View File

@ -0,0 +1,143 @@
## スイッチ
スイッチは、2つの状態を切り替えるために使用されます。
### 基本的な使い方
:::demo `v-model` を `Boolean` 型変数にバインドする。`active-color`と`inactive-color`属性は、2つの状態の背景色を決定する。
```html
<el-switch v-model="value1">
</el-switch>
<el-switch
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<script>
export default {
data() {
return {
value1: true,
value2: true
}
}
};
</script>
```
:::
### テキストの説明
:::demo テキストを表示するために `active-color` と `inactive-color` 属性を追加することができます。
```html
<el-switch
v-model="value1"
active-text="Pay by month"
inactive-text="Pay by year">
</el-switch>
<el-switch
style="display: block"
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="Pay by month"
inactive-text="Pay by year">
</el-switch>
<script>
export default {
data() {
return {
value1: true,
value2: true
}
}
};
</script>
```
:::
### 拡張された値型
:::demo `active-value`と`inactive-value`を設定することができる。どちらも `Boolean`, `String` または `Number` 型の値を受け取る。
```html
<el-tooltip :content="'Switch value: ' + value" placement="top">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
</el-tooltip>
<script>
export default {
data() {
return {
value: '100'
}
}
};
</script>
```
:::
### 無効化
:::demo `disabled`属性を追加すると、スイッチを無効にすることができます。
```html
<el-switch
v-model="value1"
disabled>
</el-switch>
<el-switch
v-model="value2"
disabled>
</el-switch>
<script>
export default {
data() {
return {
value1: true,
value2: false
}
}
};
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|-----| ----| ----| ----|---- |
| value / v-model | バインディング値 | boolean / string / number | — | — |
| disabled | スイッチが無効になっているかどうか | boolean | — | false |
| width | スイッチの幅 | number | — | 40 |
| active-icon-class | `on` 状態のときに表示されるアイコンのクラス名で、`active-text` を上書きします。 | string | — | — |
| inactive-icon-class |`off` 状態のときに表示されるアイコンのクラス名で、`inactive-text` を上書きします。| string | — | — |
| active-text | `on` 状態のときに表示されるテキスト | string | — | — |
| inactive-text | `off` 状態のときに表示されるテキスト | string | — | — |
| active-value | `on` 状態のときのスイッチの値 | boolean / string / number | — | true |
| inactive-value | `off` 状態のときのスイッチの値 | boolean / string / number | — | false |
| active-color | `on` 状態のときの背景色 | string | — | #409EFF |
| inactive-color | `off` 状態のときの背景色 | string | — | #C0CCDA |
| name | スイッチのインプット名 | string | — | — |
| validate-event | フォームバリデーションをトリガするかどうか | boolean | - | true |
### イベント
| Event Name | Description | Parameters |
| ---- | ----| ---- |
| change | 値が変わるとトリガー | value after changing |
### メソッド
| Method | Description | Parameters |
| ------|--------|------- |
| focus | スイッチコンポーネントにフォーカス | — |

1924
website/docs/jp/table.md Normal file
View File

File diff suppressed because it is too large Load Diff

305
website/docs/jp/tabs.md Normal file
View File

@ -0,0 +1,305 @@
## タブ
関連しているが異なるタイプに属するデータコレクションを分割します。
### 基本的な使い方
基本的で簡潔なタブです。
:::demo タブはカードの選択機能を提供します。デフォルトでは最初のタブがアクティブとして選択されており、`value`属性を設定することで任意のタブをアクティブにすることができます。
```html
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="User" name="first">User</el-tab-pane>
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
```
:::
### カードスタイル
カードのようなスタイルのタブ
:::demo `type` を `card` に設定すると、カードスタイルのタブを取得できます。
```html
<template>
<el-tabs type="card" @tab-click="handleClick">
<el-tab-pane label="User">User</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
```
:::
### ボーダーカード
ボーダーカードのタブです。
:::demo `type` を `border-card` に設定します。
```html
<el-tabs type="border-card">
<el-tab-pane label="User">User</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
```
:::
### タブの位置
タブの位置を設定するには `tab-position` 属性を使います。
タブの位置を設定するには、`tab-position`属性を使用します。`tabPosition="left|right|top|bottom" `
```html
<template>
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
<el-radio-button label="top">top</el-radio-button>
<el-radio-button label="right">right</el-radio-button>
<el-radio-button label="bottom">bottom</el-radio-button>
<el-radio-button label="left">left</el-radio-button>
</el-radio-group>
<el-tabs :tab-position="tabPosition" style="height: 200px;">
<el-tab-pane label="User">User</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
tabPosition: 'left'
};
}
};
</script>
```
:::
### カスタムタブ
名前付きスロットを使用して、タブラベルの内容をカスタマイズすることができます。
:::demo
```html
<el-tabs type="border-card">
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> Route</span>
Route
</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
```
:::
### タブを追加して閉じる
カードタイプのタブのみ、追加可能＆クローズ可能に対応しています。
:::demo
```html
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
{{item.content}}
</el-tab-pane>
</el-tabs>
<script>
export default {
data() {
return {
editableTabsValue: '2',
editableTabs: [{
title: 'Tab 1',
name: '1',
content: 'Tab 1 content'
}, {
title: 'Tab 2',
name: '2',
content: 'Tab 2 content'
}],
tabIndex: 2
}
},
methods: {
handleTabsEdit(targetName, action) {
if (action === 'add') {
let newTabName = ++this.tabIndex + '';
this.editableTabs.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content'
});
this.editableTabsValue = newTabName;
}
if (action === 'remove') {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
}
}
}
</script>
```
:::
### カスタマイズした新規タブのトリガーボタン
:::demo
```html
<div style="margin-bottom: 20px;">
<el-button
size="small"
@click="addTab(editableTabsValue)"
>
add tab
</el-button>
</div>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
{{item.content}}
</el-tab-pane>
</el-tabs>
<script>
export default {
data() {
return {
editableTabsValue: '2',
editableTabs: [{
title: 'Tab 1',
name: '1',
content: 'Tab 1 content'
}, {
title: 'Tab 2',
name: '2',
content: 'Tab 2 content'
}],
tabIndex: 2
}
},
methods: {
addTab(targetName) {
let newTabName = ++this.tabIndex + '';
this.editableTabs.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content'
});
this.editableTabsValue = newTabName;
},
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
}
}
</script>
```
:::
### タブの属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | バインディング値、選択されたタブの名前 | string | — | name of first tab |
| type | タブの種類 | string | card/border-card | — |
| closable | タブが閉じられるかどうか | boolean | — | false |
| addable | タブの追加が可能かどうか | boolean | — | false |
| editable | タブが追加可能で閉じられるかどうか | boolean | — | false |
| tab-position | タブの位置 | string | top/right/bottom/left | top |
| stretch | タブの幅が自動的にコンテナに収まるかどうか | boolean | - | false |
| before-leave | フック関数を使ってタブを切り替える。`false` を返すか、`Promise` を返した後に拒否された場合は、タブの切り替えができないようにする。 | Function(activeName, oldActiveName) | — | — |
### タブイベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| tab-click | タブがクリックされたときにトリガーされます。 | clicked tab |
| tab-remove | タブ削除ボタンがクリックされたときにトリガーされます。 | name of the removed tab |
| tab-add | タブ追加ボタンがクリックされたときにトリガーされます。 | — |
| edit | タブ追加ボタンやタブ削除ボタンがクリックされたときにトリガーされます。 | (targetName, action) |
### タブペインの属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| label | タブのタイトル | string | — | — |
| disabled | タブが無効になっているかどうか | boolean | — | false |
| name | タブの名前に対応する識別子、タブペインのエイリアスを表す | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
| closable | タブが閉じられるかどうか | boolean | — | false |
| lazy | タブがレイジーにレンダリングされるかどうか | boolean | — | false |

204
website/docs/jp/tag.md Normal file
View File

@ -0,0 +1,204 @@
## タグ
マーキングや選択に使用します。
### 基本的な使い方
:::demo タグの型を定義するには `type` 属性を用いる。さらに、`color` 属性を用いてタグの背景色を設定することもできる。
```html
<el-tag>Tag 1</el-tag>
<el-tag type="success">Tag 2</el-tag>
<el-tag type="info">Tag 3</el-tag>
<el-tag type="warning">Tag 4</el-tag>
<el-tag type="danger">Tag 5</el-tag>
```
:::
### 取り外し可能なタグ
:::demo `closable` 属性は取り外し可能なタグを定義するために用いることができる。これは `Boolean` を受け付けます。デフォルトでは、タグの削除にはフェージングアニメーションが付きます。アニメーションを使いたくない場合は、`disable-transitions` 属性に `Boolean` を指定して `true` に設定すればよい。`close` イベントはタグが削除されたときに発生する。
```html
<el-tag
v-for="tag in tags"
:key="tag.name"
closable
:type="tag.type">
{{tag.name}}
</el-tag>
<script>
export default {
data() {
return {
tags: [
{ name: 'Tag 1', type: '' },
{ name: 'Tag 2', type: 'success' },
{ name: 'Tag 3', type: 'info' },
{ name: 'Tag 4', type: 'warning' },
{ name: 'Tag 5', type: 'danger' }
]
};
}
}
</script>
```
:::
### 動的に編集
タグを動的に追加したり削除したりするには、`close`イベントを利用することができる。
:::demo
```html
<el-tag
:key="tag"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="mini"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
<style>
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
<script>
export default {
data() {
return {
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
inputVisible: false,
inputValue: ''
};
},
methods: {
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
}
}
}
</script>
```
:::
### サイズ
デフォルトのサイズの他に、Tagコンポーネントには3つの追加サイズが用意されており、異なるシナリオの中から選択することができます。
:::demo 追加のサイズを `medium`, `small`, `mini` で設定するには、属性 `size` を使用します。
```html
<el-tag>Default</el-tag>
<el-tag size="medium">Medium</el-tag>
<el-tag size="small">Small</el-tag>
<el-tag size="mini">Mini</el-tag>
```
:::
### テーマ
タグは3つの異なるテーマを提供します: `dark`、`light`、`plain`です。
:::demo `effect` を使って変更する場合、デフォルトは `light` です。
```html
<div class="tag-group">
<span class="tag-group__title">Dark</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="dark">
{{ item.label }}
</el-tag>
</div>
<div class="tag-group">
<span class="tag-group__title">Plain</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="plain">
{{ item.label }}
</el-tag>
</div>
<script>
export default {
data() {
return {
items: [
{ type: '', label: 'Tag 1' },
{ type: 'success', label: 'Tag 2' },
{ type: 'info', label: 'Tag 3' },
{ type: 'danger', label: 'Tag 4' },
{ type: 'warning', label: 'Tag 5' }
]
}
}
}
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| type | コンポーネントタイプ | string | success/info/warning/danger | — |
| closable | タグを削除できるかどうか | boolean | — | false |
| disable-transitions | アニメーションを無効にするかどうか | boolean | — | false |
| hit | タグにハイライトされた境界線があるかどうか | boolean | — | false |
| color | タグの背景色 | string | — | — |
| size | タグサイズ | string | medium / small / mini | — |
| effect | コンポーネントテーマ | string | dark / light / plain | light |
### イベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| click | タグがクリックされたときにトリガーされます。 | — |
| close | タグが削除されたときにトリガーされます。 | — |

199
website/docs/jp/time-picker.md Normal file
View File

@ -0,0 +1,199 @@
## タイムピッカー
時間インプットにはタイムピッカーを使用します。
### 固定タイムピッカー
ユーザーが選択できる固定時間のリストを提供する。
:::demo `el-time-select` ラベルを使用し、開始時刻、終了時刻、タイムステップを `start`, `end`, `step` で指定します。`
```html
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="Select time">
</el-time-select>
<script>
export default {
data() {
return {
value: ''
};
}
}
</script>
```
:::
### 任意のタイムピッカー
任意の時間を選ぶことができます。
:::demo ラベルに `el-time-picker` を用い、`selectableRange` を指定することで時間範囲を制限することができます。デフォルトでは、マウスホイールをスクロールして時間を選ぶことができますが、代わりに `arrow-control` 属性が設定されている場合は矢印を使って時間を選ぶこともできます。
```html
<template>
<el-time-picker
v-model="value1"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="Arbitrary time">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value2"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="Arbitrary time">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value1: new Date(2016, 9, 10, 18, 40),
value2: new Date(2016, 9, 10, 18, 40)
};
}
}
</script>
```
:::
### 固定時間範囲
開始時間が最初に選ばれた場合は、それに応じて終了時間が変更されます。
:::demo
```html
<template>
<el-time-select
placeholder="Start time"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
</el-time-select>
<el-time-select
placeholder="End time"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
</el-time-select>
</template>
<script>
export default {
data() {
return {
startTime: '',
endTime: ''
};
}
}
</script>
```
:::
### 任意の時間範囲
任意の時間範囲を選択することができます。
:::demo 範囲を指定するには、`is-range` 属性を追加する。また、範囲モードでは `arrow-control` がサポートされている。
```html
<template>
<el-time-picker
is-range
v-model="value1"
range-separator="To"
start-placeholder="Start time"
end-placeholder="End time">
</el-time-picker>
<el-time-picker
is-range
arrow-control
v-model="value2"
range-separator="To"
start-placeholder="Start time"
end-placeholder="End time">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
};
}
}
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | バインディング値 | date(TimePicker) / string(TimeSelect) | - | - |
| readonly | タイムピッカーが読み取り専用かどうか | boolean | — | false |
| disabled | タイムピッカーが無効になっているかどうか | boolean | — | false |
| editable | 入力が編集可能かどうか | boolean | — | true |
| clearable | クリアボタンを表示するかどうか | boolean | — | true |
| size | 入力のサイズ | string | medium / small / mini | — |
| placeholder | 非範囲モード時のプレースホルダ | string | — | — |
| start-placeholder | 範囲モードの開始時刻のプレースホルダ | string | — | — |
| end-placeholder | 範囲モード終了時のプレースホルダ | string | — | — |
| is-range | 時間範囲を選択するかどうか、`<el-time-picker>` でのみ動作します。 | boolean | — | false |
| arrow-control | 矢印ボタンを使って時間を選択するかどうか、`<el-time-picker>` でのみ動作します。 | boolean | — | false |
| align | 整列 | left / center / right | left |
| popper-class | タイムピッカーのドロップダウンのカスタムクラス名 | string | — | — |
| picker-options | 追加のオプション、下のテーブルを参照してください。 | object | — | {} |
| range-separator | 範囲セパレータ | string | - | '-' |
| default-value | オプション、カレンダーのデフォルトの日付 | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
| value-format | オプションで、タイムピッカーの場合のみ、バインディング値のフォーマットを指定します。指定しない場合、バインディング値は Date オブジェクトになります。 | string | see [date formats](#/en-US/component/date-picker#date-formats) | — |
| name | ネイティブ入力の `name` と同じ | string | — | — |
| prefix-icon | カスタムプレフィックスアイコンクラス | string | — | el-icon-time |
| clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
### 時間選択オプション
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | 開始時刻 | string | — | 09:00 |
| end | 終了時刻 | string | — | 18:00 |
| step | タイムステップ | string | — | 00:30 |
| minTime | 最低時間、それ以前の時間は無効化されます。 | string | — | 00:00 |
| maxTime | 最大時間、この時間以降は無効化されます。 | string | — | — |
### タイムピッカーのオプション
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| selectableRange | 利用可能な時間範囲、例えば `'18:30:00 - 20:30:00'`または`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']`など。 | string / array | — | — |
| format | ピッカー形式 | string | hour `HH`, minute `mm`, second `ss`, AM/PM `A` | HH:mm:ss |
### イベント
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | ユーザーが値を確認したときにトリガされます。 | component's binding value |
| blur | インプットがぼやけたときされます | component instance |
| focus | 入力がフォーカスされているときにトリガされます。 | component instance |
### 方法
| Method | Description | Parameters |
| ---- | ---- | ---- |
| focus | インプットコンポーネントにフォーカス | - |

107
website/docs/jp/time-select.md Normal file
View File

@ -0,0 +1,107 @@
## TimeSelect
Use Time Select for time input.
### Fixed time picker
Provide a list of fixed time for users to choose.
:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
```html
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="Select time">
</el-time-select>
<script>
export default {
data() {
return {
value: ''
};
}
}
</script>
```
:::
### Fixed time range
If start time is picked at first, then the end time will change accordingly.
:::demo
```html
<template>
<el-time-select
placeholder="Start time"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
</el-time-select>
<el-time-select
placeholder="End time"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
</el-time-select>
</template>
<script>
export default {
data() {
return {
startTime: '',
endTime: ''
};
}
}
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | medium / small / mini | — |
| placeholder | placeholder in non-range mode | string | — | — |
| picker-options | additional options, check the table below | object | — | {} |
| name | same as `name` in native input | string | — | — |
| prefix-icon | Custom prefix icon class | string | — | el-icon-time |
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
### Time Select Options
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
| maxTime | maximum time, any time after this time will be disabled | string | — | — |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
### Methods
| Method | Description | Parameters |
| ---- | ---- | ---- |
| focus | focus the Input component | - |
| blur | blur the Input component | - |

153
website/docs/jp/timeline.md Normal file
View File

@ -0,0 +1,153 @@
## タイムライン
タイムラインを視覚的に表示します。
### 基本的な使い方
タイムラインは、昇順または降順で複数のアクティビティに分割することができます。タイムスタンプは他のコンポーネントと区別するための重要な機能です。ステップとの違いに注意してください。
:::demo
```html
<div class="block">
<div class="radio">
Order:
<el-radio-group v-model="reverse">
<el-radio :label="true">descending</el-radio>
<el-radio :label="false">ascending</el-radio>
</el-radio-group>
</div>
<el-timeline :reverse="reverse">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.timestamp">
{{activity.content}}
</el-timeline-item>
</el-timeline>
</div>
<script>
export default {
data() {
return {
reverse: true,
activities: [{
content: 'Event start',
timestamp: '2018-04-15'
}, {
content: 'Approved',
timestamp: '2018-04-13'
}, {
content: 'Success',
timestamp: '2018-04-11'
}]
};
}
};
</script>
```
:::
### カスタムノード
サイズ、色、アイコンはノード内でカスタマイズ可能です。
:::demo
```html
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:timestamp="activity.timestamp">
{{activity.content}}
</el-timeline-item>
</el-timeline>
</div>
<script>
export default {
data() {
return {
activities: [{
content: 'Custom icon',
timestamp: '2018-04-12 20:46',
size: 'large',
type: 'primary',
icon: 'el-icon-more'
}, {
content: 'Custom color',
timestamp: '2018-04-03 20:46',
color: '#0bbd87'
}, {
content: 'Custom size',
timestamp: '2018-04-03 20:46',
size: 'large'
}, {
content: 'Default node',
timestamp: '2018-04-03 20:46'
}]
};
}
};
</script>
```
:::
### カスタムタイムスタンプ
タイムスタンプは、コンテンツが大きい場合にコンテンツの上部に配置することができます。
:::demo
```html
<div class="block">
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/2 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
```
:::
### タイムライン属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| reverse | ノードが昇順か降順かを指定、デフォルトは昇順です。 | boolean | — | false |
### タイムライン-アイテム属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| timestamp | タイムスタンプコンテンツ | string | - | — |
| hide-timestamp | タイムスタンプを表示するかどうか | boolean | — | false |
| placement | タイムスタンプ位置 | string | top / bottom | bottom |
| type | ノード型 | string | primary / success / warning / danger / info | - |
| color | ノードの背景色 | string | hsl / hsv / hex / rgb | - |
| size | ノードサイズ | string | normal / large | normal |
| icon | アイコンクラス名 | string | — | - |
### タイムラインアイテムスロット
| name | Description |
|------|--------|
| — | タイムライン項目のカスタムコンテンツ |
| dot | カスタム定義ノード |

196
website/docs/jp/tooltip.md Normal file
View File

@ -0,0 +1,196 @@
## ツールチップ
マウスホバーのプロンプト情報を表示します。
### 基本的な使い方
ツールチップの配置は9箇所です。
:::demo ホバー時の表示内容を設定するには、属性 `content` を用いる。属性 `placement` はツールチップの位置を決める。値は `[orientation]-[alignment]` で、方向は `top`, `left`, `right`, `bottom` の4つ、アライメントは `start`, `end`, `null` の3つで、デフォルトのアライメントはnullです。例えば、`placement="left-end"` を例にとると、ツールチップはホバリングしている要素の左側に表示され、ツールチップの下端は要素の下端に合わせて配置されます。
```html
<div class="box">
<div class="top">
<el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
<el-button>top-start</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">
<el-button>top</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">
<el-button>top-end</el-button>
</el-tooltip>
</div>
<div class="left">
<el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">
<el-button>left-start</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">
<el-button>left</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">
<el-button>left-end</el-button>
</el-tooltip>
</div>
<div class="right">
<el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">
<el-button>right-start</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">
<el-button>right</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">
<el-button>right-end</el-button>
</el-tooltip>
</div>
<div class="bottom">
<el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
<el-button>bottom-start</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">
<el-button>bottom</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
<el-button>bottom-end</el-button>
</el-tooltip>
</div>
</div>
<style>
.box {
width: 400px;
.top {
text-align: center;
}
.left {
float: left;
width: 110px;
}
.right {
float: right;
width: 110px;
}
.bottom {
clear: both;
text-align: center;
}
.item {
margin: 4px;
}
.left .el-tooltip__popper,
.right .el-tooltip__popper {
padding: 8px 10px;
}
.el-button {
width: 110px;
}
}
</style>
```
:::
### テーマ
ツールチップには、`dark` と `light` の2つのテーマがあります。
:::demo テーマを変更するには `effect` を設定します。デフォルト値は`dark`です。
```html
<el-tooltip content="Top center" placement="top">
<el-button>Dark</el-button>
</el-tooltip>
<el-tooltip content="Bottom center" placement="bottom" effect="light">
<el-button>Light</el-button>
</el-tooltip>
```
:::
### コンテンツを追加します。
複数行のテキストを表示し、そのフォーマットを設定します。
:::demo `el-tooltip` の `content` という名前のスロットを追加して `el-tooltip` の `content` 属性をオーバーライドします。
```html
<el-tooltip placement="top">
<div slot="content">multiple lines<br/>second line</div>
<el-button>Top center</el-button>
</el-tooltip>
```
:::
### 高度な使用法
基本的な使い方に加えて、自分でカスタマイズできる属性がいくつかあります。:
`transition` 属性はツールチップの表示・非表示のアニメーションをカスタマイズすることができ、デフォルト値は el-fade-in-linear です。
デフォルト値は el-faade-in-linear です。 `disabled` 属性は `tooltip` を無効にします。`true`に設定すればよいだけです。
実際、ツールチップは[Vue-popper](https://github.com/element-component/vue-popper)をベースにした拡張機能なので、Vue-popperで許可されている属性なら何でも使えます。
:::demo
```html
<template>
<el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">
<el-button @click="disabled = !disabled">click to {{disabled ? 'active' : 'close'}} tooltip function</el-button>
</el-tooltip>
</template>
<script>
export default {
data() {
return {
disabled: false
};
}
};
</script>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .expand-fade-leave-active {
margin-left: 20px;
opacity: 0;
}
</style>
```
:::
:::tip
ツールチップでは `router-link` コンポーネントはサポートされていないので、`vm.$router.push` を使用してください。
無効化されたフォーム要素は、Tooltipではサポートされていません。詳細は[Mdn](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter)を参照してください。Tooltipが動作するためには、無効化されたフォーム要素をコンテナ要素で包む必要があります。
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|----------------|---------|-----------|-------------|--------|
| effect | ツールチップのテーマ | string | dark/light | dark |
| content | コンテンツを表示、`slot#content` で上書きすることができます。 | String | — | — |
| placement | ツールチップの位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| value / v-model | ツールチップの可視性 | boolean | — | false |
| disabled | ツールチップが無効になっているかどうか | boolean | — | false |
| offset | ツールチップのオフセット | number | — | 0 |
| transition | アニメーション名 | string | — | el-fade-in-linear |
| visible-arrow | 矢印が表示されているかどうかを指定します。詳しくは、[Vue-popper](https://github.com/element-component/vue-popper)のページを参照してください。 | boolean | — | true |
| popper-options | [popper.js](https://popper.js.org/documentation.html) parameters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| open-delay | ミリ秒単位の出現の遅延 | number | — | 0 |
| manual | ツールチップを手動で制御するかどうかを指定します。`true` に設定すると `mouseenter` と `mouseleave` は効果を持ちません。 | boolean | — | false |
| popper-class | ツールチップのポッパーのカスタムクラス名 | string | — | — |
| enterable | マウスがツールチップに入るかどうか | Boolean | — | true |
| hide-after | ツールチップを非表示にするタイムアウト（ミリ秒単位） | number | — | 0 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) のツールチップ | number | — | 0 |

257
website/docs/jp/transfer.md Normal file
View File

@ -0,0 +1,257 @@
## トランスファー
### 基本的な使い方
:::demo データは `data` 属性を用いて転送に渡されます。データはオブジェクトの配列である必要があり、各オブジェクトは以下の属性を持つ必要があります。`key` はデータ項目の識別情報、`label` は表示されるテキスト、`disabled` はデータ項目が無効かどうかを示す。ターゲットリスト内の項目は `v-model` にバインドされた変数と同期しており、その変数の値はターゲット項目のキーの配列となる。したがって、ターゲットリストを初期状態で空にしたくない場合は、`v-model`を配列で初期化することができる。
```html
<template>
<el-transfer
v-model="value"
:data="data">
</el-transfer>
</template>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `Option ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value: [1, 4]
};
}
};
</script>
```
:::
### フィルタリング可能
データ項目の検索やフィルタリングができます。
:::demo フィルタモードを有効にするには、`filterable` 属性を `true` に設定する。デフォルトでは、`label` に検索キーワードが含まれている場合は検索結果に含まれる。また、`filter-method` 属性を用いて独自のフィルタメソッドを実装することもできる。これはメソッドを受け取り、キーワードが変更されるたびに検索キーワードと各データ項目をそれに渡す。あるデータ項目については、そのメソッドが真を返した場合、そのデータが検索結果リストに含まれる。
```html
<template>
<el-transfer
filterable
:filter-method="filterMethod"
filter-placeholder="State Abbreviations"
v-model="value"
:data="data">
</el-transfer>
</template>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
states.forEach((city, index) => {
data.push({
label: city,
key: index,
initial: initials[index]
});
});
return data;
};
return {
data: generateData(),
value: [],
filterMethod(query, item) {
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
}
};
}
};
</script>
```
:::
### カスタマイズ可能
リストのタイトル、ボタンのテキスト、データ項目のレンダリング機能、リストフッターのステータステキストの確認、リストフッターの内容をカスタマイズすることができます。
:::demo `title`, `button-texts`, `render-content`, `format` を使って、リストのタイトル、ボタンのテキスト、データ項目のレンダリング機能、リストヘッダのステータステキストのチェックをそれぞれカスタマイズします。さらに、スコープ付きスロットを使ってデータ項目をカスタマイズすることもできます。リストのフッターの内容には、2つの名前付きスロットが用意されています。`左フッター`と`右フッター`です。さらに、いくつかの項目を最初にチェックしたい場合は、`left-default-checked` と `right-default-checked` を使うことができます。最後に、この例では `change` イベントのデモを行います。このデモはJSX構文をサポートしていないので、jsfiddleでは実行できないことに注意してください。実際のプロジェクトでは、関連する依存関係が正しく設定されていれば `render-content` は動作します。
```html
<template>
<p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
<div style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block"
v-model="value"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:render-content="renderFunc"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change="handleChange"
:data="data">
<el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
<el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
</el-transfer>
<p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>
<div style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block"
v-model="value4"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change="handleChange"
:data="data">
<span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
<el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
<el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
</el-transfer>
</div>
</div>
</template>
<style>
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
</style>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `Option ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value: [1],
value4: [1],
renderFunc(h, option) {
return h("span", null, option.key, " - ", option.label);
}
};
},
methods: {
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys);
}
}
};
</script>
```
:::
### プロップのエイリアス
デフォルトでは、Transferはデータ項目の中から `key`, `label`, `disabled` を探します。データ項目に異なるキー名がある場合、`props` 属性を使ってエイリアスを定義することができます。
:::demo この例のデータ項目には `key` や `label` がなく、代わりに `value` と `desc` があります。そのため、`key`と`label`にエイリアスを設定する必要があります。
```html
<template>
<el-transfer
v-model="value"
:props="{
key: 'value',
label: 'desc'
}"
:data="data">
</el-transfer>
</template>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
value: i,
desc: `Option ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value: []
};
}
};
</script>
```
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | バインディング値 | array | — | — |
| data | データソース | array[{ key, label, disabled }] | — | [ ] |
| filterable | 転送がフィルタリング可能かどうか | boolean | — | false |
| filter-placeholder | フィルタ入力のプレースホルダ | string | — | Enter keyword |
| filter-method | カスタムフィルタメソッド | function | — | — |
| target-order | ターゲットリストの要素の順序を指定します。`original` に設定されている場合、要素はデータソースと同じ順序を保ちます。`push` に設定すると、新しく追加された要素はボトムに押し出されます。`unshift` に設定すると、新たに追加された要素はトップに挿入される。 | string | original / push / unshift | original |
| titles | カスタムリストタイトル | array | — | ['List 1', 'List 2'] |
| button-texts | カスタムボタンテキスト | array | — | [ ] |
| render-content | データ項目のカスタムレンダリング関数 | function(h, option) | — | — |
| format | リストヘッダの状態を確認するためのテキスト | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
| props | データソース用のプロップエイリアス | object{key, label, disabled} | — | — |
| left-default-checked | 左リストの初期チェックデータ項目のキー配列 | array | — | [ ] |
| right-default-checked | 右リストの初期チェックデータ項目のキー配列 | array | — | [ ] |
### スロット
| Name | Description |
|------|--------|
| left-footer | 左リストフッターの内容 |
| right-footer | 右リストフッターの内容 |
### スコープされたスロット
| Name | Description |
|------|--------|
| — | データ項目のカスタムコンテンツ。スコープパラメータは { オプション } です。 |
### メソッド
| Method | Description | Parameters |
| ---- | ---- | ---- |
| clearQuery | 特定のパネルのフィルタキーワードをクリア | 'left' / 'right' |
### イベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | 右側のリストでデータ項目が変更された場合にトリガーされる | key array of current data items in the right list, transfer direction (left or right), moved item keys |
| left-check-change | エンドユーザーが左リストのデータ項目のチェック状態を変更した場合にトリガーされます。 | key array of currently checked items, key array of items whose checked state have changed |
| right-check-change | エンドユーザーが右のリスト内の任意のデータ項目のチェック状態を変更した場合にトリガーされます。 | key array of currently checked items, key array of items whose checked state have changed |

155
website/docs/jp/transition.md Normal file
View File

@ -0,0 +1,155 @@
## ビルトイントランジション
Elementにビルトインされているトランジションをダイレクトに使うことができます。利用の前に、[transition docs](https://vuejs.org/v2/api/#transition)を読むことを勧めます。
### フェード
:::demo 2つのフェード効果が提供されています。: `el-fade-in-linear` と `el-fade-in`
```html
<template>
<div>
<el-button @click="show = !show">Click Me</el-button>
<div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-fade-in-linear">
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
</transition>
<transition name="el-fade-in">
<div v-show="show" class="transition-box">.el-fade-in</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
```
:::
### ズーム
:::demo `el-zoom-in-center`、 `el-zoom-in-top` と `el-zoom-in-bottom` が提供されています。
```html
<template>
<div>
<el-button @click="show2 = !show2">Click Me</el-button>
<div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-zoom-in-center">
<div v-show="show2" class="transition-box">.el-zoom-in-center</div>
</transition>
<transition name="el-zoom-in-top">
<div v-show="show2" class="transition-box">.el-zoom-in-top</div>
</transition>
<transition name="el-zoom-in-bottom">
<div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data: () => ({
show2: true
})
}
</script>
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
```
:::
### コラプス
コラプスの効果を利用するためには、`el-collapse-transition` コンポーネントを用います。
:::demo
```html
<template>
<div>
<el-button @click="show3 = !show3">Click Me</el-button>
<div style="margin-top: 20px; height: 200px;">
<el-collapse-transition>
<div v-show="show3">
<div class="transition-box">el-collapse-transition</div>
<div class="transition-box">el-collapse-transition</div>
</div>
</el-collapse-transition>
</div>
</div>
</template>
<script>
export default {
data: () => ({
show3: true
})
}
</script>
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
```
:::
### オンデマンド
```js
// fade/zoom
import 'element-ui/lib/theme-chalk/base.css';
// collapse
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
Vue.component(CollapseTransition.name, CollapseTransition)
```

740
website/docs/jp/tree.md Normal file
View File

@ -0,0 +1,740 @@
## ツリー
データの集合を階層化して表示します。
### 基本的な使い方
基本的なツリー構造。
:::demo
```html
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
export default {
data() {
return {
data: [{
label: 'Level one 1',
children: [{
label: 'Level two 1-1',
children: [{
label: 'Level three 1-1-1'
}]
}]
}, {
label: 'Level one 2',
children: [{
label: 'Level two 2-1',
children: [{
label: 'Level three 2-1-1'
}]
}, {
label: 'Level two 2-2',
children: [{
label: 'Level three 2-2-1'
}]
}]
}, {
label: 'Level one 3',
children: [{
label: 'Level two 3-1',
children: [{
label: 'Level three 3-1-1'
}]
}, {
label: 'Level two 3-2',
children: [{
label: 'Level three 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
```
:::
### 選択可能
ノードの選択に使用します。
:::demo この例では、ノードデータを非同期にロードする方法も示しています。
```html
<el-tree
:props="props"
:load="loadNode"
lazy
show-checkbox
@check-change="handleCheckChange">
</el-tree>
<script>
export default {
data() {
return {
props: {
label: 'name',
children: 'zones'
},
count: 1
};
},
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
}
if (node.level > 3) return resolve([]);
var hasChild;
if (node.data.name === 'region1') {
hasChild = true;
} else if (node.data.name === 'region2') {
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
setTimeout(() => {
var data;
if (hasChild) {
data = [{
name: 'zone' + this.count++
}, {
name: 'zone' + this.count++
}];
} else {
data = [];
}
resolve(data);
}, 500);
}
}
};
</script>
```
:::
### 遅延モードでのカスタムリーフノード
:::demo ノードのデータはクリックされるまで取得されないので、ツリーはそのノードがリーフノードであるかどうかを予測することができません。そのため、各ノードにはドロップダウンボタンが追加されており、リーフノードであればクリックされるとドロップダウンボタンは消えてしまいます。つまり、ノードがリーフノードであるかどうかを事前にツリーに伝えることで、リーフノードの前にドロップダウンボタンがレンダリングされるのを避けることもできます。
```html
<el-tree
:props="props"
:load="loadNode"
lazy
show-checkbox>
</el-tree>
<script>
export default {
data() {
return {
props: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
};
},
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
}
}
};
</script>
```
:::
### チェックボックス無効化
ノードのチェックボックスを無効に設定することができます。
:::demo この例では、defaultPropsで'disabled'プロパティが宣言されており、一部のノードは'disabled:true'として設定されています。対応するチェックボックスは無効化されており、クリックできないようになっています。
```html
<el-tree
:data="data"
:props="defaultProps"
show-checkbox
@check-change="handleCheckChange">
</el-tree>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: 'Level one 1',
children: [{
id: 3,
label: 'Level two 2-1',
children: [{
id: 4,
label: 'Level three 3-1-1'
}, {
id: 5,
label: 'Level three 3-1-2',
disabled: true
}]
}, {
id: 2,
label: 'Level two 2-2',
disabled: true,
children: [{
id: 6,
label: 'Level three 3-2-1'
}, {
id: 7,
label: 'Level three 3-2-2',
disabled: true
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label',
disabled: 'disabled',
},
};
}
};
</script>
```
:::
### デフォルト展開、チェック
ツリーノードは、最初に展開またはチェックすることができます。
:::demo `default-expanded-keys` と `default-checked-keys` を用いて、それぞれ初期展開ノードと初期チェックノードを設定する。これらが動作するためには `node-key` が必要であることに注意してください。この値はデータオブジェクトのキーの名前であり、そのキーの値はツリー全体で一意でなければなりません。
```html
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps">
</el-tree>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 9,
label: 'Level three 1-1-1'
}, {
id: 10,
label: 'Level three 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
id: 6,
label: 'Level two 2-2'
}]
}, {
id: 3,
label: 'Level one 3',
children: [{
id: 7,
label: 'Level two 3-1'
}, {
id: 8,
label: 'Level two 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
```
:::
### ツリーノードのチェック
:::demo この例では、チェックされたノードを取得して設定する方法を示しています。どちらも、ノードとキーの2つのアプローチで行うことができます。キーアプローチの場合は `node-key` が必要です。
```html
<el-tree
:data="data"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
<div class="buttons">
<el-button @click="getCheckedNodes">get by node</el-button>
<el-button @click="getCheckedKeys">get by key</el-button>
<el-button @click="setCheckedNodes">set by node</el-button>
<el-button @click="setCheckedKeys">set by key</el-button>
<el-button @click="resetChecked">reset</el-button>
</div>
<script>
export default {
methods: {
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([{
id: 5,
label: 'Level two 2-1'
}, {
id: 9,
label: 'Level three 1-1-1'
}]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
}
},
data() {
return {
data: [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 9,
label: 'Level three 1-1-1'
}, {
id: 10,
label: 'Level three 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
id: 6,
label: 'Level two 2-2'
}]
}, {
id: 3,
label: 'Level one 3',
children: [{
id: 7,
label: 'Level two 3-1'
}, {
id: 8,
label: 'Level two 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
```
:::
### カスタムノードの内容
ツリーノードの内容をカスタマイズできるので、好きなようにアイコンやボタンを追加することができます。
:::demo ツリーノードのテンプレートをカスタマイズするには、`render-content` とスコープ付きスロットの2つの方法があります。ツリーノードの内容を返すレンダー関数を割り当てるには、`render-content` を使用します。レンダリング関数の詳細については、Vueのドキュメントを参照してください。スコープされたスロットを使用したい場合は、スコープ内の `node` と `data` にアクセスできます。JSX 構文をサポートしていないため、`render-content` デモは jsfiddle で実行できないことに注意してください。実際のプロジェクトでは、関連する依存関係が正しく設定されていれば `render-content` は動作します。
```html
```
:::
### ツリーノードフィルタリング
ツリーノードはフィルタリング出来る。
:::demo ツリーインスタンスの `filter` メソッドを呼び出してツリーノードをフィルタリングします。そのパラメータはフィルタリングキーワードである。これが動作するためには `filter-node-method` が必要であり、その値がフィルタリングメソッドであることに注意すること。
```html
<el-input
placeholder="Filter keyword"
v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree">
</el-tree>
<script>
export default {
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
},
data() {
return {
filterText: '',
data: [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 9,
label: 'Level three 1-1-1'
}, {
id: 10,
label: 'Level three 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
id: 6,
label: 'Level two 2-2'
}]
}, {
id: 3,
label: 'Level one 3',
children: [{
id: 7,
label: 'Level two 3-1'
}, {
id: 8,
label: 'Level two 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
```
:::
### アコーディオン
一度に展開できるのは同一レベル内の1つのノードのみです。
:::demo
```html
<el-tree
:data="data"
:props="defaultProps"
accordion
@node-click="handleNodeClick">
</el-tree>
<script>
export default {
data() {
return {
data: [{
label: 'Level one 1',
children: [{
label: 'Level two 1-1',
children: [{
label: 'Level three 1-1-1'
}]
}]
}, {
label: 'Level one 2',
children: [{
label: 'Level two 2-1',
children: [{
label: 'Level three 2-1-1'
}]
}, {
label: 'Level two 2-2',
children: [{
label: 'Level three 2-2-1'
}]
}]
}, {
label: 'Level one 3',
children: [{
label: 'Level two 3-1',
children: [{
label: 'Level three 3-1-1'
}]
}, {
label: 'Level two 3-2',
children: [{
label: 'Level three 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
```
:::
### ドラッグ可能
ツリーノードに `draggable` 属性を追加することで、ツリーノードをドラッグ＆ドロップすることができます。
:::demo
```html
<el-tree
:data="data"
node-key="id"
default-expand-all
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag">
</el-tree>
<script>
export default {
data() {
return {
data: [{
label: 'Level one 1',
children: [{
label: 'Level two 1-1',
children: [{
label: 'Level three 1-1-1'
}]
}]
}, {
label: 'Level one 2',
children: [{
label: 'Level two 2-1',
children: [{
label: 'Level three 2-1-1'
}]
}, {
label: 'Level two 2-2',
children: [{
label: 'Level three 2-2-1'
}]
}]
}, {
label: 'Level one 3',
children: [{
label: 'Level two 3-1',
children: [{
label: 'Level three 3-1-1'
}]
}, {
label: 'Level two 3-2',
children: [{
label: 'Level three 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleDragStart(node, ev) {
console.log('drag start', node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log('tree drag end: ', dropNode && dropNode.label, dropType);
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode, type) {
if (dropNode.data.label === 'Level two 3-1') {
return type !== 'inner';
} else {
return true;
}
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
}
}
};
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
| data | tree data | array | — | — |
| empty-text | text displayed when data is void | string | — | — |
| node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — |
| props | configuration options, see the following table | object | — | — |
| render-after-expand | whether to render child nodes only after a parent node is expanded for the first time | boolean | — | true |
| load | method for loading subtree data, only works when `lazy` is true | function(node, resolve) | — | — |
| render-content | render function for tree node | Function(h, { node, data, store } | — | — |
| highlight-current | whether current node is highlighted | boolean | — | false |
| default-expand-all | whether to expand all nodes by default | boolean | — | false |
| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | boolean | — | true |
| check-on-click-node | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean | — | false |
| auto-expand-parent | whether to expand father node when a child node is expanded | boolean | — | true |
| default-expanded-keys | array of keys of initially expanded nodes | array | — | — |
| show-checkbox | whether node is selectable | boolean | — | false |
| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false |
| default-checked-keys | array of keys of initially checked nodes | array | — | — |
| current-node-key | key of initially selected node | string, number | — | — |
| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — |
| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false |
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 |
| icon-class | custome tree node icon | string | - | - |
| lazy | whether to lazy load leaf node, used with `load` attribute | boolean | — | false |
| draggable | whether enable tree nodes drag and drop | boolean | — | false |
| allow-drag | this function will be executed before dragging a node. If `false` is returned, the node can not be dragged | Function(node) | — | — |
| allow-drop | this function will be executed before the dragging node is dropped. If `false` is returned, the dragging node can not be dropped at the target node. `type` has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node) | Function(draggingNode, dropNode, type) | — | — |
### props
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ---------------------------------------- | ------ | --------------- | ------- |
| label | specify which key of node object is used as the node's label | string, function(data, node) | — | — |
| children | specify which node object is used as the node's subtree | string | — | — |
| disabled | specify which key of node object represents if node's checkbox is disabled | boolean, function(data, node) | — | — |
| isLeaf | specify whether the node is a leaf node, only works when lazy load is enabled | boolean, function(data, node) | — | — |
### Method
`Tree` has the following method, which returns the currently selected array of nodes.
| Method | Description | Parameters |
| --------------- | ---------------------------------------- | ---------------------------------------- |
| filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
| updateKeyChildren | set new data to node, only works when `node-key` is assigned | (key, data) Accept two parameters: 1. key of node 2. new data |
| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | (leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. 2. default value is `false`. If the parameter is `true`, the return value contains halfchecked nodes |
| setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked |
| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
| setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
| getHalfCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes | - |
| getHalfCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of node's keys | - |
| getCurrentKey | return the highlight node's key (null if no node is highlighted) | — |
| getCurrentNode | return the highlight node's data (null if no node is highlighted) | — |
| setCurrentKey | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted. If `null`, cancel the currently highlighted node |
| setCurrentNode | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
| getNode | get node by data or key | (data) the node's data or key |
| remove | remove a node, only works when node-key is assigned | (data) the node's data or node to be deleted |
| append | append a child node to a given node in the tree | (data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node |
| insertBefore | insert a node before a given node in the tree | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |
| insertAfter | insert a node after a given node in the tree | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |
### Events
| Event Name | Description | Parameters |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
| node-contextmenu | triggers when a node is clicked by right button | four parameters: event, node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
| check-change | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes |
| check | triggers after clicking the checkbox of a node | two parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |
| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode |
| node-expand | triggers when current node open | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
| node-collapse | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
| node-drag-start | triggers when dragging starts | two parameters: node object corresponding to the dragging node, event. |
| node-drag-enter | triggers when the dragging node enters another node | three parameters: node object corresponding to the dragging node, node object corresponding to the entering node, event. |
| node-drag-leave | triggers when the dragging node leaves a node | three parameters: node object corresponding to the dragging node, node object corresponding to the leaving node, event. |
| node-drag-over | triggers when dragging over a node (like mouseover event) | three parameters: node object corresponding to the dragging node, node object corresponding to the dragging over node, event. |
| node-drag-end | triggers when dragging ends | four parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be `undefined`), node drop type (before / after / inner), event. |
| node-drop | triggers after the dragging node is dropped | four parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event. |
### Scoped Slot
| Name | Description |
|------|--------|
| — | Custom content for tree nodes. The scope parameter is { node, data } |

147
website/docs/jp/typography.md Normal file
View File

@ -0,0 +1,147 @@
<script>
import bus from '../../bus';
const varMap = [
'$--font-size-extra-large',
'$--font-size-large',
'$--font-size-medium',
'$--font-size-base',
'$--font-size-small',
'$--font-size-extra-small'
];
const original = {
'font_size_extra_large': '20px',
'font_size_large': '18px',
'font_size_medium': '16px',
'font_size_base': '14px',
'font_size_small': '13px',
'font_size_extra_small': '12px'
}
export default {
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
'font_size_extra_large': '',
'font_size_large': '',
'font_size_medium': '',
'font_size_base': '',
'font_size_small': '',
'font_size_extra_small': ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
varMap.forEach((v) => {
const key = v.replace('$--', '').replace(/-/g, '_')
if (value[v]) {
this[key] = value[v]
} else {
this[key] = original[key]
}
});
}
}
},
}
</script>
## タイポグラフィ
私たちは、さまざまなプラットフォームで最高のプレゼンテーションを実現するために、フォントの規約を作成します。
### Font
<div class="demo-term-box">
<img src="../../assets/images/term-pingfang.png" alt="">
<img src="../../assets/images/term-hiragino.png" alt="">
<img src="../../assets/images/term-microsoft.png" alt="">
<img src="../../assets/images/term-sf.png" alt="">
<img src="../../assets/images/term-helvetica.png" alt="">
<img src="../../assets/images/term-arial.png" alt="">
</div>
### フォント規約
<table class="demo-typo-size">
<tbody>
<tr
>
<td>Level</td>
<td>Font Size</td>
<td class="color-dark-light">Demo</td>
</tr>
<tr
:style="{ fontSize: font_size_extra_small }"
>
<td>Supplementary text</td>
<td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_small }"
>
<td>Body (small)</td>
<td class="color-dark-light">{{font_size_small}} Small</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_base }"
>
<td>Body</td>
<td class="color-dark-light">{{font_size_base}} Base</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_medium }"
>
<td >Small Title</td>
<td class="color-dark-light">{{font_size_medium}} Medium</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_large }"
>
<td>Title</td>
<td class="color-dark-light">{{font_size_large}} large</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_extra_large }"
>
<td>Main Title</td>
<td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
<td>Build with Element</td>
</tr>
</tbody>
</table>
### フォントラインの高さ
<div>
<img class="lineH-left" src="~examples/assets/images/typography.png" />
<ul class="lineH-right">
<li>line-height:1 <span>No line height</span></li>
<li>line-height:1.3 <span>Compact</span></li>
<li>line-height:1.5 <span>Regular</span></li>
<li>line-height:1.7 <span>Loose</span></li>
</ul>
</div>
### フォントファミリー
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```

452
website/docs/jp/upload.md Normal file
View File

@ -0,0 +1,452 @@
## アップロード
クリックまたはドラッグ＆ドロップでファイルをアップロード
### クリックしてファイルをアップロード
:::demo `slot` を用いてアップロードボタンの種類とテキストをカスタマイズする。最大アップロード数を制限するために `limit` と `on-exceed` を設定し、制限を超えたときの方法を指定します。さらに、`before-remove` フックでファイルの削除を中止することもできる。
```html
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
>
<el-button size="small" type="primary">Click to upload</el-button>
<template #tip>
<div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
</template>
</el-upload>
<script>
export default {
data() {
return {
fileList: [
{
name: 'food.jpeg',
url:
'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
{
name: 'food2.jpeg',
url:
'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
],
}
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList)
},
handlePreview(file) {
console.log(file)
},
handleExceed(files, fileList) {
this.$message.warning(
`The limit is 3, you selected ${
files.length
} files this time, add up to ${
files.length + fileList.length
} totally`,
)
},
beforeRemove(file, fileList) {
return this.$confirm(`Cancel the transfert of ${file.name} ?`)
},
},
}
</script>
```
:::
### ユーザーアバターのアップロード
アップロードするファイルの形式やサイズを制限するには、`before-upload` フックを使う。
:::demo
```html
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
export default {
data() {
return {
imageUrl: '',
}
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('Avatar picture must be JPG format!')
}
if (!isLt2M) {
this.$message.error('Avatar picture size can not exceed 2MB!')
}
return isJPG && isLt2M
},
},
}
</script>
```
:::
### フォトウォール
fileListのスタイルを変更するには `list-type` を用いる。
:::demo
```html
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
}
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList)
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
},
}
```
:::
### カスタムファイルのサムネイル
デフォルトのサムネイルテンプレートを変更するには、`scoped-slot` を用いる。
:::demo
```html
<el-upload action="#" list-type="picture-card" :auto-upload="false">
<template #default>
<i class="el-icon-plus"></i>
</template>
<template #file="{file}">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</template>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
}
},
methods: {
handleRemove(file) {
console.log(file)
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleDownload(file) {
console.log(file)
},
},
}
</script>
```
:::
### サムネイル付きFileList
:::demo
```html
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture"
>
<el-button size="small" type="primary">Click to upload</el-button>
<template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template>
</el-upload>
<script>
export default {
data() {
return {
fileList: [
{
name: 'food.jpeg',
url:
'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
{
name: 'food2.jpeg',
url:
'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
],
}
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList)
},
handlePreview(file) {
console.log(file)
},
},
}
</script>
```
:::
### ファイルリスト制御
`on-change` フック関数を使ってアップロードファイルの一覧を制御する
:::demo
```html
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="handleChange"
:file-list="fileList"
>
<el-button size="small" type="primary">Click to upload</el-button>
<template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template>
</el-upload>
<script>
export default {
data() {
return {
fileList: [
{
name: 'food.jpeg',
url:
'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
{
name: 'food2.jpeg',
url:
'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
],
}
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList.slice(-3)
},
},
}
</script>
```
:::
### ドラッグしてアップロード
ファイルを特定の場所にドラッグしてアップロードすることができます。
:::demo
```html
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
multiple
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">Drop file here or <em>click to upload</em></div>
<template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template>
</el-upload>
```
:::
### 手動アップロード
:::demo
```html
<el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false"
>
<template #trigger>
<el-button size="small" type="primary">select file</el-button>
</template>
<el-button
style="margin-left: 10px;"
size="small"
type="success"
@click="submitUpload"
>upload to server</el-button
>
<template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template>
</el-upload>
<script>
export default {
methods: {
submitUpload() {
this.$refs.upload.submit()
},
},
}
</script>
```
:::
### 属性
Attribute | Description | Type | Accepted Values | Default
----| ----| ----| ----| ----
action | 必須、リクエストURL | string | — | —
headers | リクエストヘッダ | object | — | —
multiple | 複数ファイルのアップロードが許可されているかどうか | boolean | — | —
data | リクエストの追加オプション | object | — | —
name | アップロードファイルのキー名 | string | — | file
with-credentials | クッキーを送信するかどうか | boolean | — |false
show-file-list | アップロードされたファイルリストを表示するかどうか | boolean | — | true
drag | ドラッグ＆ドロップモードを有効にするかどうか | boolean | — | false
accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode` is `true` | string | — | —
on-preview | アップロードされたファイルをクリックした時のフック関数 | function(file) | — | —
on-remove | ファイル削除時のフック関数 | function(file, fileList) | — | —
on-success | アップロード成功時のフック関数 | function(response, file, fileList) | — | —
on-error | エラー時のフック関数 | function(err, file, fileList) | — | —
on-progress | 進捗時のフック関数 | function(event, file, fileList) | — | — |
on-change | ファイル選択時、アップロード成功時、アップロード失敗時のフック関数 | function(file, fileList) | — | — |
before-upload | フック関数を使用してアップロードする前に、アップロードするファイルをパラメータとしてアップロードすることができます。`false`を返すか、`Promise`を返した後に拒否された場合、アップロードは中止されます。 | function(file) | — | —
before-remove | フック関数を使用して、ファイルとファイルリストをパラメータとしてファイルを削除することができます。`false`を返すか、`Promise`を返した後に拒否された場合、削除は中止される。 | function(file, fileList) | — | — |
thumbnail-mode | サムネイルが表示されているかどうか | boolean | — | false
file-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
list-type | ファイルリストの型 | string | text/picture/picture-card | text |
auto-upload | ファイルを自動アップロードするかどうか | boolean | — | true |
http-request | デフォルトの xhr の動作をオーバーライドし、独自のアップロードファイルのリクエストを実装できるようにします。 | function | — | — |
disabled | アップロードを無効にするかどうか | boolean | — | false |
limit | アップロード可能な最大数 | number | — | — |
on-exceed | リミットを突破した時のフック関数 | function(files, fileList) | — | - |
### スロット
| Name | Description |
|------|--------|
| trigger | ファイルダイアログをトリガーする内容 |
| tip | tipsの内容 |
### メソッド
| Methods Name | Description | Parameters |
|---------- |-------- |---------- |
| clearFiles | アップロードされたファイルリストをクリアします (このメソッドは `before-upload` フックではサポートされていません)。 | — |
| abort | アップロード要求の取り消し | （ file: fileList's item ） |
| submit | ファイルリストを手動でアップロード | — |

2
website/enums/language.ts
View File

@ -7,4 +7,6 @@ export enum Language {
ES = 'es',
/** French */
FR = 'fr-FR',
/** Japanese */
JP = 'jp',
}

31
website/i18n/component.json
View File

@ -122,5 +122,36 @@
"nav": {
"dropdown": "Version: "
}
},
{
"lang": "jp",
"demo-block": {
"hide-text": "隠す",
"show-text": "展開する",
"button-text": "試してみる!",
"tooltip-text": "codepen.ioでこのデモを実行します。"
},
"footer": {
"links": "リンク",
"repo": "GitHub",
"community": "コミュニティ",
"changelog": "Changelog",
"theme": "Online Theme Roller",
"faq": "FAQ",
"gitter": "Gitter",
"starter": "スターターキット",
"feedback": "フィードバック",
"contribution": "貢献",
"eleme": "Eleme"
},
"header": {
"guide": "ガイド",
"components": "コンポーネント",
"theme": "テーマ",
"resource": "リソース"
},
"nav": {
"dropdown": "Version: "
}
}
]

106
website/i18n/page.json
View File

@ -422,5 +422,111 @@
"placeholder2": "Plus de ressources sont en développement."
}
}
},
{
"lang": "jp",
"pages": {
"index": {
"1": "デスクトップUIライブラリ",
"2": "Element、開発者、デザイナー、プロダクトマネージャーのためのVue 2.0ベースのコンポーネントライブラリ",
"3": "ガイド",
"4": "設計ガイドラインを理解し、論理的に健全で、合理的に構成された使いやすい製品を設計者が構築できるように支援します。",
"5": "詳細を見る",
"6": "コンポーネント",
"7": "コンポーネントのデモを見ながら、インタラクションの詳細を体験してください。カプセル化されたコードを使用して開発効率を向上させましょう。",
"8": "リソース",
"9": "ページのプロトタイプやビジュアルドラフトを形成し、デザイン効率を高めるための関連するデザインリソースをダウンロードできます。",
"10": "テーマ",
"11": "オンラインテーマローラーは、サイトのテーマとコンポーネントスタイルを可視化し、カスタムに管理します。",
"12": "Theme customization is available!",
"13": "ここをクリックしてください。",
"14": "独自のテーマを作る",
"lang": "jp",
"titleSize": "34",
"paraSize": "18"
},
"component": {},
"theme": {
"1": "Official Theme",
"2": "My Theme",
"3": "Theme name"
},
"theme-preview": {
"1": "戻る"
},
"theme-nav": {},
"changelog": {
"1": "Changelog",
"2": "en-US"
},
"design": {
"1": "デザイン領域",
"2": "一貫性",
"3": "",
"4": "フィードバック",
"5": "",
"6": "効率性",
"7": "",
"8": "制御性",
"9": "",
"10": "一貫性",
"11": "実生活との一貫性: ",
"12": "実生活のプロセスやロジックに沿って、利用者が慣れ親しんだ言語や習慣を遵守する。",
"13": "インターフェイス内での一貫性: ",
"14": "デザインスタイル、アイコンやテキスト、要素の位置など、すべての要素が一貫している必要があります。",
"15": "フィードバック",
"16": "オペレーションフィードバック: ",
"17": "スタイルの更新やインタラクティブな効果により、ユーザーが操作を明確に認識できるようにします。",
"18": "ビジュアルフィードバック: ",
"19": "ページの要素を更新したり並べ替えたりして、現在の状態を反映させます。",
"20": "効率性",
"21": "プロセスの簡素化: ",
"22": "操作プロセスをシンプルかつ直感的に保つことができます。",
"23": "確かでクリアーな: ",
"24": "ユーザーが素早く理解して判断できるように、意図を明確に伝えましょう。",
"25": "識別が容易: ",
"26": "インターフェイスは、ユーザーが識別するのに役立ち、暗記や想起から解放されるようなストレートなものでなければなりません。",
"27": "制御性",
"28": "意思決定: ",
"29": "オペレーションについてのアドバイスをしてもよいが、ユーザーのために判断してはいけない。",
"30": "コントロールされた結果: ",
"31": "ユーザーには、現在の操作のキャンセル、中止、終了などの操作の自由が与えられるべきである。"
},
"guide": {
"1": "デザインディシプリン",
"2": "ナビゲーション"
},
"nav": {
"1": "ナビゲーション",
"2": "ナビゲーションは、どこに行けばいいのか、どうやって行けばいいのかというユーザーの問題を解決することに焦点を当てています。一般的には `サイドバーナビゲーション` と`トップナビゲーション` に分類されます。",
"3": "正しいナビゲーションを選択します。",
"4": "適切なナビゲーションはユーザーにスムーズな体験を与え、不適切なナビゲーションは混乱を招きます。サイドバーナビゲーションとトップナビゲーションの違いは以下の通りです。",
"5": "サイドナビゲーション",
"6": "ナビゲーションを左端に固定することで、視認性が向上し、ページ間の切り替えが容易になります。この場合、ページの上部領域には、検索バー、ヘルプボタン、通知ボタンなど、よく使うツールを配置します。背景管理やユーティリティーサイトに適しています。",
"7": "レベル1カテゴリー",
"8": "単純に構造化されたサイトで、1レベルのページしかない場合に適しています。パンくずは必要ありません。",
"9": "レベル2カテゴリー",
"10": "サイドバーには最大2段階のナビゲーションが表示されます。パンくずはユーザーが見つけやすく、ナビゲートしやすいよう、第2レベルのナビゲーションと組み合わせて使用することをお勧めします。",
"11": "レベル3カテゴリー",
"12": "複雑なユーティリティのウェブサイトに適しています。左側のサイドバーは第1レベルのナビゲーションを保持し、中央の列は第2レベルのナビゲーションまたは他のユーティリティオプションを表示します。",
"13": "トップナビゲーション",
"14": "上から下への通常の閲覧順に準拠することで、より自然になります。ナビゲーションの量や文字の長さは上の幅に制限されます。",
"15": "ナビの少ないサイトや大きな塊のあるサイトに適しています。"
},
"resource": {
"1": "リソース",
"2": "工事中",
"3": "Axureコンポーネント",
"4": "AxureでElement UIをインポートすることで、インタラクションデザインの際に提供するすべてのコンポーネントを簡単に適用することができます。",
"5": "ダウンロード",
"6": "Sketch テンプレート",
"7": "Elementテンプレートからコンポーネントを適用することで、統一感のあるビジュアルスタイルを保ちながらデザインの効率化を図ることができます。",
"8": "インタラクションデザインのドキュメント",
"9": "インタラクションデザインのドキュメントをよく見てみましょう。小宇宙的な視点から各コンポーネントの詳細を知ることができます。",
"paraHeight": "1.6",
"placeholder1": "工事中",
"placeholder2": "より多くのリソースが開発されています。"
}
}
}
]

3
website/i18n/route.json
View File

@ -10,5 +10,8 @@
},
{
"lang": "fr-FR"
},
{
"lang": "jp"
}
]

82
website/i18n/theme-editor.json
View File

@ -373,5 +373,87 @@
"FontWeight": "Font Weight",
"LineHeight": "Line Height"
}
},
{
"lang": "jp",
"variable-name" : {
"color-primary": "primary color",
"color-white": "basic white",
"color-black": "basic black",
"color-success": "success color",
"color-warning": "warning color",
"color-danger": "danger color",
"color-info": "info color",
"color-text-primary": "primary text color",
"color-text-regular": "regular text color",
"color-text-secondary": "secondary text color",
"color-text-placeholder": "placeholder text color",
"border-color-base": "border color base",
"border-color-light": "border color light",
"border-color-lighter": "border color lighter",
"border-color-extra-light": "border color extra light",
"background-color-base": "base background color",
"border-radius-base": "border radius base",
"border-radius-small": "border radius small",
"border-radius-circle": "border radius circle",
"box-shadow-base": "box shadow base",
"box-shadow-dark": "box shadow dark",
"box-shadow-light": "box shadow light",
"font-size-extra-large": "extra large font size",
"font-size-large": "large font size",
"font-size-medium": "medium font size",
"font-size-base": "base font size",
"font-size-small": "small font size",
"font-size-extra-small": "extra small font size",
"font-weight-primary": "primary font weight",
"font-weight-secondary": "secondary font weight",
"font-line-height-primary": "primary font line height",
"font-line-height-secondary": "secondary font line height"
},
"display-name": {
"border-color": "border color",
"font-color": "font color",
"background-color": "background color",
"font-weight": "font weight",
"font-size": "font size",
"font-line-height": "font line height",
"border-radius": "border radius"
},
"action": {
"require-them-name": "Theme name is required",
"duplicate-them-name": "Duplicate them name",
"confirm-delete-theme": "Are you sure you want to delete this theme?",
"no-preview-config": "No preview config found",
"max-user-theme": "Maxium user theme limit",
"undo": "Undo",
"redo": "Redo",
"notice": "Notice",
"confirm": "Confirm",
"cancel": "Cancel",
"load-local-theme-config": "Loading your last saved theme config",
"last-modified": "Last modified",
"upload-theme": "Click to upload theme",
"reset-theme": "Reset",
"rename-theme": "Rename",
"copy-theme": "Copy",
"delete-theme": "Delete",
"download-theme": "Download",
"theme-check": "Preview",
"theme-copy": "Copy",
"theme-edit": "Edit",
"description-element": "Default theme",
"description-napos": "Dark theme",
"description-kiwi": "kiwi theme"
},
"category": {
"BrandColor": "Brand Color",
"FunctionalColor": "Functional Color",
"FontColor": "Font Color",
"BorderColor": "Border Color",
"BackgroundColor": "Background Color",
"FontSize": "Font Size",
"FontWeight": "Font Weight",
"LineHeight": "Line Height"
}
}
]

6
website/i18n/title.json
View File

@ -22,5 +22,11 @@
"guide": "Guide | Element",
"component": "Composants | Element",
"resource": "Ressources | Element"
},
"jp": {
"home": "Element - WebのためのデスクトップUIツールキット",
"guide": "ガイド | Element",
"component": "コンポーネント | Element",
"resource": "リソース | Element"
}
}

302
website/nav.config.json
View File

@ -1206,5 +1206,307 @@
}
]
}
],
"jp": [
{
"name": "Changelog",
"path": "/changelog"
},
{
"name": "Element React",
"href": "https://elemefe.github.io/element-react/"
},
{
"name": "Element Angular",
"href": "https://element-angular.faas.ele.me/"
},
{
"name": "Development",
"children": [
{
"path": "/installation",
"name": "Installation"
},
{
"path": "/quickstart",
"name": "Quick Start"
},
{
"path": "/i18n",
"name": "Internationalization"
},
{
"path": "/custom-theme",
"name": "Custom Theme"
},
{
"path": "/transition",
"name": "Built-in transition"
}
]
},
{
"name": "Components",
"groups": [
{
"groupName": "Basic",
"list": [
{
"path": "/layout",
"title": "Layout"
},
{
"path": "/container",
"title": "Layout Container"
},
{
"path": "/color",
"title": "Color"
},
{
"path": "/typography",
"title": "Typography"
},
{
"path": "/border",
"title": "Border"
},
{
"path": "/icon",
"title": "Icon"
},
{
"path": "/button",
"title": "Button"
},
{
"path": "/link",
"title": "Link"
}
]
},
{
"groupName": "Form",
"list": [
{
"path": "/radio",
"title": "Radio"
},
{
"path": "/checkbox",
"title": "Checkbox"
},
{
"path": "/input",
"title": "Input"
},
{
"path": "/input-number",
"title": "InputNumber"
},
{
"path": "/select",
"title": "Select"
},
{
"path": "/cascader",
"title": "Cascader"
},
{
"path": "/switch",
"title": "Switch"
},
{
"path": "/slider",
"title": "Slider"
},
{
"path": "/time-picker",
"title": "TimePicker"
},
{
"path": "/time-select",
"title": "TimeSelect"
},
{
"path": "/date-picker",
"title": "DatePicker"
},
{
"path": "/datetime-picker",
"title": "DateTimePicker"
},
{
"path": "/upload",
"title": "Upload"
},
{
"path": "/rate",
"title": "Rate"
},
{
"path": "/color-picker",
"title": "ColorPicker"
},
{
"path": "/transfer",
"title": "Transfer"
},
{
"path": "/form",
"title": "Form"
}
]
},
{
"groupName": "Data",
"list": [
{
"path": "/table",
"title": "Table"
},
{
"path": "/tag",
"title": "Tag"
},
{
"path": "/progress",
"title": "Progress"
},
{
"path": "/tree",
"title": "Tree"
},
{
"path": "/pagination",
"title": "Pagination"
},
{
"path": "/badge",
"title": "Badge"
}
]
},
{
"groupName": "Notice",
"list": [
{
"path": "/alert",
"title": "Alert"
},
{
"path": "/loading",
"title": "Loading"
},
{
"path": "/message",
"title": "Message"
},
{
"path": "/message-box",
"title": "MessageBox"
},
{
"path": "/notification",
"title": "Notification"
}
]
},
{
"groupName": "Navigation",
"list": [
{
"path": "/menu",
"title": "NavMenu"
},
{
"path": "/tabs",
"title": "Tabs"
},
{
"path": "/breadcrumb",
"title": "Breadcrumb"
},
{
"path": "/page-header",
"title": "PageHeader"
},
{
"path": "/dropdown",
"title": "Dropdown"
},
{
"path": "/steps",
"title": "Steps"
}
]
},
{
"groupName": "Others",
"list": [
{
"path": "/dialog",
"title": "Dialog"
},
{
"path": "/tooltip",
"title": "Tooltip"
},
{
"path": "/popover",
"title": "Popover"
},
{
"path": "/popconfirm",
"title": "Popconfirm"
},
{
"path": "/card",
"title": "Card"
},
{
"path": "/carousel",
"title": "Carousel"
},
{
"path": "/collapse",
"title": "Collapse"
},
{
"path": "/timeline",
"title": "Timeline"
},
{
"path": "/divider",
"title": "Divider"
},
{
"path": "/calendar",
"title": "Calendar"
},
{
"path": "/image",
"title": "Image"
},
{
"path": "/backtop",
"title": "Backtop"
},
{
"path": "/infiniteScroll",
"title": "InfiniteScroll"
},
{
"path": "/avatar",
"title": "Avatar"
},
{
"path": "/drawer",
"title": "Drawer"
}
]
}
]
}
]
}

8
website/route.config.js
View File

@ -33,6 +33,9 @@ const LOAD_MAP = {
[Language.FR]: name => {
return getAsyncComponent(() => import(/* webpackChunkName: "fr-FR" */ `./pages/${name}.vue`))
},
[Language.JP]: name => {
return getAsyncComponent(() => import(/* webpackChunkName: "jp" */ `./pages/${name}.vue`))
},
}
const load = function(lang, path) {
@ -52,6 +55,9 @@ const LOAD_DOCS_MAP = {
[Language.FR]: path => {
return getAsyncComponent(() => import(/* webpackChunkName: "DOCS fr-FR" */ `./docs/fr-FR${path}.md`))
},
[Language.JP]: path => {
return getAsyncComponent(() => import(/* webpackChunkName: "DOCS fr-FR" */ `./docs/jp${path}.md`))
},
}
const loadDocs = function(lang, path) {
@ -154,6 +160,8 @@ if (userLanguage.indexOf('zh-') !== -1) {
defaultPath = Language.ES
} else if (userLanguage.indexOf('fr') !== -1) {
defaultPath = Language.FR
} else if (userLanguage.indexOf('jp') !== -1) {
defaultPath = Language.JP
}
route = route.concat([{