mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
161 lines
5.8 KiB
Markdown
161 lines
5.8 KiB
Markdown
## ステップ
|
|
|
|
プロセスに沿ってタスクを完了するようにユーザーを誘導します。そのステップは、実際のアプリケーションのシナリオに応じて設定することができ、ステップの数は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 | ステップ記述 |
|
|
|