mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-03-07 15:47:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: add template tag for component markdown

Browse Source
This commit is contained in:
btea 2021-09-07 15:59:49 +08:00 committed by GitHub
parent 0b1f74154b
commit 8d1a4c5ea6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 1501 additions and 1228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
website/docs/en-US/badge.md
View File

@ -9,36 +9,38 @@ Displays the amount of new messages.
:::demo The amount is defined with `value` which accepts `Number` or `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>
<template>
<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>
<template #dropdown>
<el-dropdown-menu>
<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>
</template>
</el-dropdown>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<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>
</template>
</el-dropdown>
</template>
<style>
.item {
@ -57,12 +59,14 @@ You can customize the max value.
:::demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `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>
<template>
<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>
</template>
<style>
.item {
@ -81,12 +85,14 @@ Displays text content other than numbers.
:::demo When `value` is a `String`, it can display customized text.
```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>
<template>
<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>
</template>
<style>
.item {
@ -105,14 +111,16 @@ Use a red dot to mark content that needs to be noticed.
:::demo Use the attribute `is-dot`. It is a `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>
<template>
<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>
</template>
<style>
.item {

24
website/docs/en-US/empty.md
View File

@ -7,7 +7,9 @@ Placeholder hints for empty states.
:::demo
```html
<el-empty description="description"></el-empty>
<template>
<el-empty description="description"></el-empty>
</template>
```
:::
@ -19,9 +21,11 @@ Use `image` prop to set image URL.
:::demo
```html
<el-empty
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
></el-empty>
<template>
<el-empty
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
></el-empty>
</template>
```
:::
@ -33,7 +37,9 @@ Use `image-size` prop to control image size.
:::demo
```html
<el-empty :image-size="200"></el-empty>
<template>
<el-empty :image-size="200"></el-empty>
</template>
```
:::
@ -45,9 +51,11 @@ Use the default slot to insert content at the bottom.
:::demo
```html
<el-empty>
<el-button type="primary">Button</el-button>
</el-empty>
<template>
<el-empty>
<el-button type="primary">Button</el-button>
</el-empty>
</template>
```
:::

64
website/docs/en-US/pagination.md
View File

@ -7,14 +7,16 @@ If you have too much data to display in one page, use pagination.
:::demo Set `layout` with different pagination elements you wish to display separated with a comma. Pagination elements are: `prev` (a button navigating to the previous page), `next` (a button navigating to the next page), `pager` (page list), `jumper` (a jump-to input), `total` (total item count), `size` (a select to determine page size) and `->`(every element after this symbol will be pulled to the right).
```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>
<template>
<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>
</template>
```
:::
@ -24,13 +26,15 @@ If you have too much data to display in one page, use pagination.
:::demo By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the `pager-count` attribute.
```html
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
<template>
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
</template>
```
:::
@ -40,8 +44,10 @@ If you have too much data to display in one page, use pagination.
:::demo Set the `background` attribute and the buttons will have a background color.
```html
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
<template>
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</template>
```
:::
@ -53,7 +59,9 @@ Use small pagination in the case of limited space.
:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller.
```html
<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
<template>
<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
</template>
```
:::
@ -175,15 +183,17 @@ When there is only one page, hide the pagination by setting the `hide-on-single-
:::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>
<template>
<div>
<el-switch v-model="value"> </el-switch>
<el-pagination
:hide-on-single-page="value"
:total="5"
layout="prev, pager, next"
>
</el-pagination>
</div>
</template>
<script>
export default {

221
website/docs/en-US/progress.md
View File

@ -7,11 +7,13 @@ Progress is used to show the progress of current operation, and inform the user
:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`. You can custom text format by setting `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>
<template>
<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>
</template>
<script>
export default {
@ -49,29 +51,31 @@ In this case the percentage takes no additional space.
:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
```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>
<template>
<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>
</template>
```
:::
@ -83,18 +87,23 @@ You can use `color` attr to set the progress bar color. it accepts color string,
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<template>
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress
:percentage="percentage"
:color="customColorMethod"
></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :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>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :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>
</template>
<script>
export default {
@ -200,11 +209,13 @@ You can use `color` attr to set the progress bar color. it accepts color string,
:::demo You can specify `type` attribute to `circle` to use circular progress bar, and use `width` attribute to change the size of circle.
```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>
<template>
<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>
</template>
```
:::
@ -216,22 +227,24 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
:::demo
```html
<el-progress
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<el-progress
type="dashboard"
:percentage="percentage2"
: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>
<template>
<el-progress
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<el-progress
type="dashboard"
:percentage="percentage2"
: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>
</template>
<script>
export default {
@ -323,26 +336,28 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
:::demo Use default slot to add customized content.
```html
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
<template>
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
</template>
```
:::
@ -352,29 +367,31 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration.
```html
<el-progress :percentage="50" :indeterminate="true"></el-progress>
<el-progress
:percentage="100"
:format="format"
:indeterminate="true"
></el-progress>
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
></el-progress>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
></el-progress>
<el-progress
:percentage="50"
status="exception"
:indeterminate="true"
></el-progress>
<template>
<el-progress :percentage="50" :indeterminate="true"></el-progress>
<el-progress
:percentage="100"
:format="format"
:indeterminate="true"
></el-progress>
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
></el-progress>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
></el-progress>
<el-progress
:percentage="50"
status="exception"
:indeterminate="true"
></el-progress>
</template>
<script>
export default {

132
website/docs/en-US/tag.md
View File

@ -7,11 +7,13 @@ Used for marking and selection.
:::demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
```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>
<template>
<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>
</template>
```
:::
@ -21,9 +23,11 @@ Used for marking and selection.
:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `disable-transitions` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
```html
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{tag.name}}
</el-tag>
<template>
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{tag.name}}
</el-tag>
</template>
<script>
export default {
@ -51,28 +55,30 @@ You can use the `close` event to add and remove tag dynamically.
:::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="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ New Tag</el-button
>
<template>
<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="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ New Tag</el-button
>
</template>
<style>
.el-tag + .el-tag {
@ -135,10 +141,12 @@ Besides default size, Tag component provides three additional sizes for you to c
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
```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>
<template>
<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>
</template>
```
:::
@ -150,28 +158,30 @@ Tag provide three different themes: `dark`、`light` and `plain`
:::demo Using `effect` to change, default is `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>
<template>
<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>
</template>
<script>
export default {
@ -199,10 +209,12 @@ Sometimes because of the business needs, we might need checkbox like tag, but **
:::demo basic check-tag usage, the API is rather simple.
```html
<div>
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
</div>
<template>
<div>
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
</div>
</template>
<script>
export default {

106
website/docs/es/badge.md
View File

@ -9,36 +9,38 @@ Muestra la cantidad de mensajes nuevos.
:::demo La cantidad está definida por `value` que acepta `Number` o `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>
<template>
<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>
<template #dropdown>
<el-dropdown-menu>
<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>
</template>
</el-dropdown>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<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>
</template>
</el-dropdown>
</template>
<style>
.item {
@ -57,12 +59,14 @@ Se puede personalizar el valor máximo.
:::demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `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>
<template>
<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>
</template>
<style>
.item {
@ -81,12 +85,14 @@ Mostrar texto en vez de números.
:::demo Cuando `value` es un `String`, puede mostrar texto personalizado.
```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>
<template>
<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>
</template>
<style>
.item {
@ -105,14 +111,16 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
:::demo Use el atributo `is-dot`. Es un `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>
<template>
<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>
</template>
<style>
.item {

24
website/docs/es/empty.md
View File

@ -7,7 +7,9 @@ Placeholder hints for empty states.
:::demo
```html
<el-empty description="descrição"></el-empty>
<template>
<el-empty description="descrição"></el-empty>
</template>
```
:::
@ -19,9 +21,11 @@ Use `image` prop to set image URL.
:::demo
```html
<el-empty
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
></el-empty>
<template>
<el-empty
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
></el-empty>
</template>
```
:::
@ -33,7 +37,9 @@ Use `image-size` prop to control image size.
:::demo
```html
<el-empty :image-size="200"></el-empty>
<template>
<el-empty :image-size="200"></el-empty>
</template>
```
:::
@ -45,9 +51,11 @@ Use the default slot to insert content at the bottom.
:::demo
```html
<el-empty>
<el-button type="primary">Button</el-button>
</el-empty>
<template>
<el-empty>
<el-button type="primary">Button</el-button>
</el-empty>
</template>
```
:::

58
website/docs/es/pagination.md
View File

@ -7,14 +7,16 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
:::demo Asigne en el atributo `layout` los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamaño de la página ) y `->`(todo elemento situado luego de este símbolo será movido a la derecha).
```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>
<template>
<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>
</template>
```
:::
@ -24,13 +26,15 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
:::demo De forma predeterminada, Pagination colapsa los botones del paginador adicionales cuando tiene más de 7 páginas. Esto se puede configurar con el atributo `pager-count`.
```html
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
<template>
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
</template>
```
:::
@ -42,7 +46,9 @@ Usa una paginación pequeña en caso de espacio limitado.
:::demo Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña.
```html
<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
<template>
<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
</template>
```
:::
@ -164,15 +170,17 @@ Cuando sólo hay una página, oculte la paginación configurando el atributo `hi
:::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>
<template>
<div>
<el-switch v-model="value"> </el-switch>
<el-pagination
:hide-on-single-page="value"
:total="5"
layout="prev, pager, next"
>
</el-pagination>
</div>
</template>
<script>
export default {

221
website/docs/es/progress.md
View File

@ -7,11 +7,13 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
:::demo Usa el atributo `percentage` para asignar el porcentaje. Este es **requerido** y tiene que ser un valor entre `0-100`. Puede personalizar el formato de texto estableciendo `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>
<template>
<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>
</template>
<script>
export default {
@ -49,29 +51,31 @@ En este caso el porcentaje no toma espacio adicional.
:::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
```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>
<template>
<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>
</template>
```
:::
@ -83,18 +87,23 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<template>
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress
:percentage="percentage"
:color="customColorMethod"
></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :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>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :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>
</template>
<script>
export default {
@ -200,11 +209,13 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
:::demo Puede asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamaño del círculo.
```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>
<template>
<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>
</template>
```
:::
@ -214,23 +225,25 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
:::demo También puede especificar el atributo `type` a `dashboard` para usar la barra de progreso del panel de control.
```html
<el-progress
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<el-progress
type="dashboard"
:percentage="percentage2"
:color="colors"
></el-progress>
<template>
<el-progress
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<el-progress
type="dashboard"
:percentage="percentage2"
: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>
<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>
</template>
<script>
export default {
@ -322,26 +335,28 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
:::demo Use default slot to add customized content.
```html
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
<template>
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
</template>
```
:::
@ -351,29 +366,31 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration.
```html
<el-progress :percentage="50" :indeterminate="true"></el-progress>
<el-progress
:percentage="100"
:format="format"
:indeterminate="true"
></el-progress>
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
></el-progress>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
></el-progress>
<el-progress
:percentage="50"
status="exception"
:indeterminate="true"
></el-progress>
<template>
<el-progress :percentage="50" :indeterminate="true"></el-progress>
<el-progress
:percentage="100"
:format="format"
:indeterminate="true"
></el-progress>
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
></el-progress>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
></el-progress>
<el-progress
:percentage="50"
status="exception"
:indeterminate="true"
></el-progress>
</template>
<script>
export default {

132
website/docs/es/tag.md
View File

@ -7,11 +7,13 @@ Se utiliza para marcar y seleccionar.
:::demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.
```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>
<template>
<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>
</template>
```
:::
@ -21,9 +23,11 @@ Se utiliza para marcar y seleccionar.
:::demo el atributo `closable` puede usarse para definir una etiqueta removible. Acepta un `Boolean`. De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo `disable-transitions` , que acepta `Boolean`, como `true`. Se dispara el evento `close` cuando la etiqueta es removida.
```html
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{tag.name}}
</el-tag>
<template>
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{tag.name}}
</el-tag>
</template>
<script>
export default {
@ -51,28 +55,30 @@ Puede utilizar el evento `close` para añadir y eliminar etiquetas dinámicament
:::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="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ New Tag</el-button
>
<template>
<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="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ New Tag</el-button
>
</template>
<style>
.el-tag + .el-tag {
@ -135,10 +141,12 @@ Además del tamaño predeterminado, el componente Tag proporciona tres tamaños
:::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
```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>
<template>
<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>
</template>
```
:::
@ -150,28 +158,30 @@ Tag provide three different themes: `dark`、`light` and `plain`
:::demo Using `effect` to change, default is `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>
<template>
<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>
</template>
<script>
export default {
@ -199,10 +209,12 @@ Sometimes because of the business needs, we might need checkbox like tag, but **
:::demo basic check-tag usage, the API is rather simple.
```html
<div>
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
</div>
<template>
<div>
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
</div>
</template>
<script>
export default {

106
website/docs/fr-FR/badge.md
View File

@ -9,36 +9,38 @@ Affiche le nombre de nouveaux messages.
:::demo La quantité est définit par `value` qui accepte un `Number` ou un `String`.
```html
<el-badge :value="12" class="item">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">Réponses</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">Réponses</el-button>
</el-badge>
<template>
<el-badge :value="12" class="item">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">Réponses</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">Réponses</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item class="clearfix">
Commentaires
<el-badge class="mark" :value="12" />
</el-dropdown-item>
<el-dropdown-item class="clearfix">
Réponses
<el-badge class="mark" :value="3" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item class="clearfix">
Commentaires
<el-badge class="mark" :value="12" />
</el-dropdown-item>
<el-dropdown-item class="clearfix">
Réponses
<el-badge class="mark" :value="3" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<style>
.item {
@ -57,12 +59,14 @@ Vous pouvez configurer la valeur maximale.
:::demo La valeur maximale est définit par `max` qui accepte un `Number`. Ceci ne marche qui si `value` est également un `Number`.
```html
<el-badge :value="200" :max="99" class="item">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge :value="100" :max="10" class="item">
<el-button size="small">Réponses</el-button>
</el-badge>
<template>
<el-badge :value="200" :max="99" class="item">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge :value="100" :max="10" class="item">
<el-button size="small">Réponses</el-button>
</el-badge>
</template>
<style>
.item {
@ -81,12 +85,14 @@ Affiche du texte autre que des nombres.
:::demo Quand `value` est un `String`, il affiche un texte personnalisé.
```html
<el-badge value="new" class="item">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge value="hot" class="item">
<el-button size="small">Réponses</el-button>
</el-badge>
<template>
<el-badge value="new" class="item">
<el-button size="small">Commentaires</el-button>
</el-badge>
<el-badge value="hot" class="item">
<el-button size="small">Réponses</el-button>
</el-badge>
</template>
<style>
.item {
@ -105,14 +111,16 @@ Utilisez un point rouge pour signaler du contenu devant être remarqué.
:::demo Utilisez l'attribut `is-dot` qui est un `Boolean`.
```html
<el-badge is-dot class="item">Requète</el-badge>
<el-badge is-dot class="item">
<el-button
class="share-button"
icon="el-icon-share"
type="primary"
></el-button>
</el-badge>
<template>
<el-badge is-dot class="item">Requète</el-badge>
<el-badge is-dot class="item">
<el-button
class="share-button"
icon="el-icon-share"
type="primary"
></el-button>
</el-badge>
</template>
<style>
.item {

24
website/docs/fr-FR/empty.md
View File

@ -7,7 +7,9 @@ Placeholder hints for empty states.
:::demo
```html
<el-empty description="description"></el-empty>
<template>
<el-empty description="description"></el-empty>
</template>
```
:::
@ -19,9 +21,11 @@ Use `image` prop to set image URL.
:::demo
```html
<el-empty
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
></el-empty>
<template>
<el-empty
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
></el-empty>
</template>
```
:::
@ -33,7 +37,9 @@ Use `image-size` prop to control image size.
:::demo
```html
<el-empty :image-size="200"></el-empty>
<template>
<el-empty :image-size="200"></el-empty>
</template>
```
:::
@ -45,9 +51,11 @@ Use the default slot to insert content at the bottom.
:::demo
```html
<el-empty>
<el-button type="primary">Button</el-button>
</el-empty>
<template>
<el-empty>
<el-button type="primary">Button</el-button>
</el-empty>
</template>
```
:::

64
website/docs/fr-FR/pagination.md
View File

@ -7,14 +7,16 @@ Si vous avez beaucoup de données à afficher sur une seule page, il est préfé
:::demo Configurez `layout` avec les différent éléments de pagination que vous souhaitez, séparés par des virgules. Les éléments possibles sont: `prev` (pour aller vers la page précédente), `next` (pour aller vers la page suivante), `pager` (liste des pages), `jumper` (un champ pour aller directement à une page précise), `total` (Le nombre total d'entrées), `size` (un sélecteur qui détermine la taille de la page) et `->`(chaque élément après celui-ci sera poussé vers la droite).
```html
<div class="block">
<span class="demonstration">Quand vous avez quelques pages</span>
<el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
</div>
<div class="block">
<span class="demonstration">Quand vous avez plus que 7 pages</span>
<el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
</div>
<template>
<div class="block">
<span class="demonstration">Quand vous avez quelques pages</span>
<el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
</div>
<div class="block">
<span class="demonstration">Quand vous avez plus que 7 pages</span>
<el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
</div>
</template>
```
:::
@ -24,13 +26,15 @@ Si vous avez beaucoup de données à afficher sur une seule page, il est préfé
:::demo Par défaut, Pagination réduit les boutons lorsqu'il y a plus de 7 pages. Ce nombre est configurable avec l'attribut `pager-count`.
```html
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
<template>
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
</template>
```
:::
@ -40,8 +44,10 @@ Si vous avez beaucoup de données à afficher sur une seule page, il est préfé
:::demo Réglez l'attribut `background` pour change la couleur de fond des boutons.
```html
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
<template>
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</template>
```
:::
@ -53,7 +59,9 @@ Utilisez une pagination de taille réduite si vous manquez d'espace.
:::demo Ajoutez simplement l'attribut `small` et la pagination sera de taille réduite.
```html
<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
<template>
<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
</template>
```
:::
@ -175,15 +183,17 @@ Lorsqu'il n'y a qu'une seule page, il est possible de cacher la pagination avec
:::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>
<template>
<div>
<el-switch v-model="value"> </el-switch>
<el-pagination
:hide-on-single-page="value"
:total="5"
layout="prev, pager, next"
>
</el-pagination>
</div>
</template>
<script>
export default {

221
website/docs/fr-FR/progress.md
View File

@ -7,11 +7,13 @@ Progress est utilisé pour afficher la progression d'une opération et informer
:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. Vous pouvez personnaliser le format du texte en définissant le `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>
<template>
<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>
</template>
<script>
export default {
@ -49,29 +51,31 @@ Dans ce cas le pourcentage ne prends pas de place en plus.
:::demo L'attribut `stroke-width` détermine le `width` de la barre de progression. Utilisez `text-inside` mettre la description à l'intérieur de la barre.
```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>
<template>
<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>
</template>
```
:::
@ -83,18 +87,23 @@ Vous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<template>
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress
:percentage="percentage"
:color="customColorMethod"
></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :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>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :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>
</template>
<script>
export default {
@ -200,11 +209,13 @@ Vous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de
:::demo Vous pouvez mettre l'attribut `type` à `circle` pour obtenir une barre circulaire, et utiliser `width` pour changer la taille du cercle.
```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>
<template>
<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>
</template>
```
:::
@ -216,22 +227,24 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
:::demo
```html
<el-progress
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<el-progress
type="dashboard"
:percentage="percentage2"
: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>
<template>
<el-progress
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<el-progress
type="dashboard"
:percentage="percentage2"
: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>
</template>
<script>
export default {
@ -323,26 +336,28 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
:::demo Use default slot to add customized content.
```html
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
<template>
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
</template>
```
:::
@ -352,29 +367,31 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration.
```html
<el-progress :percentage="50" :indeterminate="true"></el-progress>
<el-progress
:percentage="100"
:format="format"
:indeterminate="true"
></el-progress>
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
></el-progress>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
></el-progress>
<el-progress
:percentage="50"
status="exception"
:indeterminate="true"
></el-progress>
<template>
<el-progress :percentage="50" :indeterminate="true"></el-progress>
<el-progress
:percentage="100"
:format="format"
:indeterminate="true"
></el-progress>
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
></el-progress>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
></el-progress>
<el-progress
:percentage="50"
status="exception"
:indeterminate="true"
></el-progress>
</template>
<script>
export default {

132
website/docs/fr-FR/tag.md
View File

@ -7,11 +7,13 @@ Les tags sont utiles sont marquer certaines données afin d'ajouter des informat
:::demo Utilisez l'attribut `type` pour définir le type de tag. De plus, l'attribut `color` détermine la couleur de fond.
```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>
<template>
<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>
</template>
```
:::
@ -21,9 +23,11 @@ Les tags sont utiles sont marquer certaines données afin d'ajouter des informat
:::demo L'attribut `closable` détermine si un tag est supprimable grâce à un `Boolean`. Par défaut la suppression bénéficie d'un animation de fading. Utilisez `disable-transitions` si vous ne souhaitez pas d'animations en utilisant un `Boolean` à `true`. L'évènement `close` se déclenche quand un tag est supprimé.
```html
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{tag.name}}
</el-tag>
<template>
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{tag.name}}
</el-tag>
</template>
<script>
export default {
@ -51,28 +55,30 @@ Vous pouvez utiliser l'évènement `close` pour ajouter et supprimer des tags dy
:::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="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ Nouveau Tag</el-button
>
<template>
<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="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ Nouveau Tag</el-button
>
</template>
<style>
.el-tag + .el-tag {
@ -135,10 +141,12 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan
:::demo Utilisez `size` pour choisir une autre taille parmi `medium`, `small` ou `mini`.
```html
<el-tag>Défaut</el-tag>
<el-tag size="medium">Medium</el-tag>
<el-tag size="small">Small</el-tag>
<el-tag size="mini">Mini</el-tag>
<template>
<el-tag>Défaut</el-tag>
<el-tag size="medium">Medium</el-tag>
<el-tag size="small">Small</el-tag>
<el-tag size="mini">Mini</el-tag>
</template>
```
:::
@ -150,28 +158,30 @@ Les balises utilisent trois thèmes différents: `dark`, `light` et `plain`
:::demo Utilisez `effect` pour changer. La valeur par défaut est `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>
<template>
<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>
</template>
<script>
export default {
@ -199,10 +209,12 @@ Sometimes because of the business needs, we might need checkbox like tag, but **
:::demo basic check-tag usage, the API is rather simple.
```html
<div>
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
</div>
<template>
<div>
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
</div>
</template>
<script>
export default {

106
website/docs/jp/badge.md
View File

@ -9,36 +9,38 @@
:::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>
<template>
<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>
<template #dropdown>
<el-dropdown-menu>
<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>
</template>
</el-dropdown>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<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>
</template>
</el-dropdown>
</template>
<style>
.item {
@ -57,12 +59,14 @@
:::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>
<template>
<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>
</template>
<style>
.item {
@ -81,12 +85,14 @@
:::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>
<template>
<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>
</template>
<style>
.item {
@ -105,14 +111,16 @@
:::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>
<template>
<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>
</template>
<style>
.item {

24
website/docs/jp/empty.md
View File

@ -7,7 +7,9 @@ Placeholder hints for empty states.
:::demo
```html
<el-empty description="デスクリプション"></el-empty>
<template>
<el-empty description="デスクリプション"></el-empty>
</template>
```
:::
@ -19,9 +21,11 @@ Use `image` prop to set image URL.
:::demo
```html
<el-empty
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
></el-empty>
<template>
<el-empty
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
></el-empty>
</template>
```
:::
@ -33,7 +37,9 @@ Use `image-size` prop to control image size.
:::demo
```html
<el-empty :image-size="200"></el-empty>
<template>
<el-empty :image-size="200"></el-empty>
</template>
```
:::
@ -45,9 +51,11 @@ Use the default slot to insert content at the bottom.
:::demo
```html
<el-empty>
<el-button type="primary">Button</el-button>
</el-empty>
<template>
<el-empty>
<el-button type="primary">Button</el-button>
</el-empty>
</template>
```
:::

64
website/docs/jp/pagination.md
View File

@ -7,14 +7,16 @@
:::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>
<template>
<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>
</template>
```
:::
@ -24,13 +26,15 @@
:::demo デフォルトでは、ページネーションは 7 ページを超えると余分なページャーボタンを折りたたむようになっています。これは `pager-count` 属性で設定できます。
```html
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
<template>
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
</template>
```
:::
@ -40,8 +44,10 @@
:::demo `background`属性を設定すると、ボタンの背景色が設定されます。
```html
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
<template>
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</template>
```
:::
@ -53,7 +59,9 @@
:::demo `small` 属性を `true` に設定するだけで、ページネーションが小さくなります。
```html
<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
<template>
<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
</template>
```
:::
@ -175,15 +183,17 @@
:::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>
<template>
<div>
<el-switch v-model="value"> </el-switch>
<el-pagination
:hide-on-single-page="value"
:total="5"
layout="prev, pager, next"
>
</el-pagination>
</div>
</template>
<script>
export default {

221
website/docs/jp/progress.md
View File

@ -7,11 +7,13 @@
:::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>
<template>
<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>
</template>
<script>
export default {
@ -49,29 +51,31 @@
:::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>
<template>
<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>
</template>
```
:::
@ -83,18 +87,23 @@
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<template>
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress
:percentage="percentage"
:color="customColorMethod"
></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :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>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :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>
</template>
<script>
export default {
@ -200,11 +209,13 @@
:::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>
<template>
<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>
</template>
```
:::
@ -216,22 +227,24 @@
:::demo
```html
<el-progress
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<el-progress
type="dashboard"
:percentage="percentage2"
: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>
<template>
<el-progress
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<el-progress
type="dashboard"
:percentage="percentage2"
: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>
</template>
<script>
export default {
@ -323,26 +336,28 @@
:::demo Use default slot to add customized content.
```html
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
<template>
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
</template>
```
:::
@ -352,29 +367,31 @@
:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration.
```html
<el-progress :percentage="50" :indeterminate="true"></el-progress>
<el-progress
:percentage="100"
:format="format"
:indeterminate="true"
></el-progress>
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
></el-progress>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
></el-progress>
<el-progress
:percentage="50"
status="exception"
:indeterminate="true"
></el-progress>
<template>
<el-progress :percentage="50" :indeterminate="true"></el-progress>
<el-progress
:percentage="100"
:format="format"
:indeterminate="true"
></el-progress>
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
></el-progress>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
></el-progress>
<el-progress
:percentage="50"
status="exception"
:indeterminate="true"
></el-progress>
</template>
<script>
export default {

132
website/docs/jp/tag.md
View File

@ -7,11 +7,13 @@
:::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>
<template>
<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>
</template>
```
:::
@ -21,9 +23,11 @@
:::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>
<template>
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{tag.name}}
</el-tag>
</template>
<script>
export default {
@ -51,28 +55,30 @@
:::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="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ New Tag</el-button
>
<template>
<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="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ New Tag</el-button
>
</template>
<style>
.el-tag + .el-tag {
@ -135,10 +141,12 @@
:::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>
<template>
<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>
</template>
```
:::
@ -150,28 +158,30 @@
:::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>
<template>
<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>
</template>
<script>
export default {
@ -199,10 +209,12 @@ Sometimes because of the business needs, we might need checkbox like tag, but **
:::demo basic check-tag usage, the API is rather simple.
```html
<div>
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
</div>
<template>
<div>
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
</div>
</template>
<script>
export default {

106
website/docs/zh-CN/badge.md
View File

@ -9,36 +9,38 @@
:::demo 定义`value`属性，它接受`Number`或者`String`。
```html
<el-badge :value="12" class="item">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">回复</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">回复</el-button>
</el-badge>
<template>
<el-badge :value="12" class="item">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">回复</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">回复</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item class="clearfix">
评论
<el-badge class="mark" :value="12" />
</el-dropdown-item>
<el-dropdown-item class="clearfix">
回复
<el-badge class="mark" :value="3" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item class="clearfix">
评论
<el-badge class="mark" :value="12" />
</el-dropdown-item>
<el-dropdown-item class="clearfix">
回复
<el-badge class="mark" :value="3" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<style>
.item {
@ -57,12 +59,14 @@
:::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。
```html
<el-badge :value="200" :max="99" class="item">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="100" :max="10" class="item">
<el-button size="small">回复</el-button>
</el-badge>
<template>
<el-badge :value="200" :max="99" class="item">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="100" :max="10" class="item">
<el-button size="small">回复</el-button>
</el-badge>
</template>
<style>
.item {
@ -81,12 +85,14 @@
:::demo 定义`value`为`String`类型是时可以用于显示自定义文本。
```html
<el-badge value="new" class="item">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge value="hot" class="item">
<el-button size="small">回复</el-button>
</el-badge>
<template>
<el-badge value="new" class="item">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge value="hot" class="item">
<el-button size="small">回复</el-button>
</el-badge>
</template>
<style>
.item {
@ -105,14 +111,16 @@
:::demo 除了数字外，设置`is-dot`属性，它接受一个`Boolean`。
```html
<el-badge is-dot class="item">数据查询</el-badge>
<el-badge is-dot class="item">
<el-button
class="share-button"
icon="el-icon-share"
type="primary"
></el-button>
</el-badge>
<template>
<el-badge is-dot class="item">数据查询</el-badge>
<el-badge is-dot class="item">
<el-button
class="share-button"
icon="el-icon-share"
type="primary"
></el-button>
</el-badge>
</template>
<style>
.item {

24
website/docs/zh-CN/empty.md
View File

@ -7,7 +7,9 @@
:::demo
```html
<el-empty description="描述文字"></el-empty>
<template>
<el-empty description="描述文字"></el-empty>
</template>
```
:::
@ -19,9 +21,11 @@
:::demo
```html
<el-empty
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
></el-empty>
<template>
<el-empty
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
></el-empty>
</template>
```
:::
@ -33,7 +37,9 @@
:::demo
```html
<el-empty :image-size="200"></el-empty>
<template>
<el-empty :image-size="200"></el-empty>
</template>
```
:::
@ -45,9 +51,11 @@
:::demo
```html
<el-empty>
<el-button type="primary">按钮</el-button>
</el-empty>
<template>
<el-empty>
<el-button type="primary">按钮</el-button>
</el-empty>
</template>
```
:::

64
website/docs/zh-CN/pagination.md
View File

@ -7,14 +7,16 @@
:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为下一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示总条目数，`size`用于设置每页显示的页码数量。
```html
<div class="block">
<span class="demonstration">页数较少时的效果</span>
<el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
</div>
<div class="block">
<span class="demonstration">大于 7 页时的效果</span>
<el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
</div>
<template>
<div class="block">
<span class="demonstration">页数较少时的效果</span>
<el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
</div>
<div class="block">
<span class="demonstration">大于 7 页时的效果</span>
<el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
</div>
</template>
```
:::
@ -24,13 +26,15 @@
:::demo 默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过`pager-count`属性可以设置最大页码按钮数。
```html
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
<template>
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
</template>
```
:::
@ -40,8 +44,10 @@
:::demo 设置`background`属性可以为分页按钮添加背景色。
```html
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
<template>
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</template>
```
:::
@ -53,7 +59,9 @@
:::demo 只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。
```html
<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
<template>
<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
</template>
```
:::
@ -175,15 +183,17 @@
:::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>
<template>
<div>
<el-switch v-model="value"> </el-switch>
<el-pagination
:hide-on-single-page="value"
:total="5"
layout="prev, pager, next"
>
</el-pagination>
</div>
</template>
<script>
export default {

221
website/docs/zh-CN/progress.md
View File

@ -7,11 +7,13 @@
:::demo Progress 组件设置`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>
<template>
<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>
</template>
<script>
export default {
@ -49,29 +51,31 @@
:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `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>
<template>
<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>
</template>
```
:::
@ -83,19 +87,24 @@
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<template>
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress
:percentage="percentage"
:color="customColorMethod"
></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :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>
<el-progress :percentage="percentage2" :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>
</template>
<script>
export default {
@ -203,11 +212,13 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
:::demo
```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>
<template>
<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>
</template>
```
:::
@ -217,22 +228,24 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
:::demo 通过 `type` 属性来指定使用仪表盘形进度条。
```html
<el-progress
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<el-progress
type="dashboard"
:percentage="percentage2"
: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>
<template>
<el-progress
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<el-progress
type="dashboard"
:percentage="percentage2"
: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>
</template>
<script>
export default {
@ -324,26 +337,28 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
:::demo 通过默认插槽添加自定义内容。
```html
<el-progress :percentage="50">
<el-button type="text">自定义内容</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>自定义内容</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">当前进度</span>
</template>
</el-progress>
<template>
<el-progress :percentage="50">
<el-button type="text">自定义内容</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>自定义内容</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">当前进度</span>
</template>
</el-progress>
</template>
```
:::
@ -353,29 +368,31 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
:::demo Progress 组件设置 `indeterminate` 属性控制进度条运动。通过设置 `duration` 属性可以控制运动速度。
```html
<el-progress :percentage="50" :indeterminate="true"></el-progress>
<el-progress
:percentage="100"
:format="format"
:indeterminate="true"
></el-progress>
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
></el-progress>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
></el-progress>
<el-progress
:percentage="50"
status="exception"
:indeterminate="true"
></el-progress>
<template>
<el-progress :percentage="50" :indeterminate="true"></el-progress>
<el-progress
:percentage="100"
:format="format"
:indeterminate="true"
></el-progress>
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
></el-progress>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
></el-progress>
<el-progress
:percentage="50"
status="exception"
:indeterminate="true"
></el-progress>
</template>
<script>
export default {

132
website/docs/zh-CN/tag.md
View File

@ -7,11 +7,13 @@
:::demo 由`type`属性来选择 tag 的类型，也可以通过`color`属性来自定义背景色。
```html
<el-tag>标签一</el-tag>
<el-tag type="success">标签二</el-tag>
<el-tag type="info">标签三</el-tag>
<el-tag type="warning">标签四</el-tag>
<el-tag type="danger">标签五</el-tag>
<template>
<el-tag>标签一</el-tag>
<el-tag type="success">标签二</el-tag>
<el-tag type="info">标签三</el-tag>
<el-tag type="warning">标签四</el-tag>
<el-tag type="danger">标签五</el-tag>
</template>
```
:::
@ -21,9 +23,11 @@
:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`disable-transitions`属性，它接受一个`Boolean`，true 为关闭。
```html
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{tag.name}}
</el-tag>
<template>
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{tag.name}}
</el-tag>
</template>
<script>
export default {
@ -51,28 +55,30 @@
:::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="small"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ New Tag</el-button
>
<template>
<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="small"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ New Tag</el-button
>
</template>
<style>
.el-tag + .el-tag {
@ -135,10 +141,12 @@ Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下
:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
```html
<el-tag closable>默认标签</el-tag>
<el-tag size="medium" closable>中等标签</el-tag>
<el-tag size="small" closable>小型标签</el-tag>
<el-tag size="mini" closable>超小标签</el-tag>
<template>
<el-tag closable>默认标签</el-tag>
<el-tag size="medium" closable>中等标签</el-tag>
<el-tag size="small" closable>小型标签</el-tag>
<el-tag size="mini" closable>超小标签</el-tag>
</template>
```
:::
@ -150,28 +158,30 @@ Tag 组件提供了三个不同的主题：`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>
<template>
<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>
</template>
<script>
export default {
@ -199,10 +209,12 @@ Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`
:::demo check-tag 的基础使用方法，check-tag 提供的 API 非常简单
```html
<div>
<el-check-tag checked style="margin-right: 8px;">选中</el-check-tag>
<el-check-tag @change="onChange" :checked="checked">点我切换</el-check-tag>
</div>
<template>
<div>
<el-check-tag checked style="margin-right: 8px;">选中</el-check-tag>
<el-check-tag @change="onChange" :checked="checked">点我切换</el-check-tag>
</div>
</template>
<script>
export default {