test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 11:17:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(docs): icon usage (#4057)

Browse Source
This commit is contained in:
Aex 2021-10-28 06:18:09 +08:00 committed by GitHub
parent cb03f4d890
commit a2a9cd2eab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 230 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs/en-US/component/datetime-picker.md
View File

@ -66,31 +66,31 @@ datetime-picker/default-time
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| model-value / v-model | binding value | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | large/medium/small/mini | large |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |
| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
| format | format of the displayed value in the input box | string | see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD HH:mm:ss |
| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
| range-separator | range separator | string | - | '-' |
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
| default-time | the default time value after picking a date | non-range: Date / range: Date[] | non-range: a Date object, range: array of two Date objects, and the first item is for the start date and second for the end date. Time `00:00:00` will be used if not specified | — |
| name | same as `name` in native input | string | — | — |
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| model-value / v-model | binding value | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | large/medium/small/mini | large |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |
| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
| format | format of the displayed value in the input box | string | see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD HH:mm:ss |
| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
| range-separator | range separator | string | - | '-' |
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
| default-time | the default time value after picking a date | non-range: Date / range: Date[] | non-range: a Date object, range: array of two Date objects, and the first item is for the start date and second for the end date. Time `00:00:00` will be used if not specified | — |
| name | same as `name` in native input | string | — | — |
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
| prefix-icon | Custom prefix icon component | string | — | Date |
| clear-icon | Custom clear icon component | string | — | CircleClose |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
## Events

9
docs/en-US/component/dropdown.md
View File

@ -7,7 +7,7 @@ lang: en-US
Toggleable menu for displaying lists of links and actions.
<style lang="scss" scoped>
<style lang="scss" >
.example-showcase {
.el-dropdown {
@ -19,9 +19,10 @@ Toggleable menu for displaying lists of links and actions.
cursor: pointer;
color: var(--el-color-primary);
}
.el-icon-arrow-down {
font-size: 12px;
}
.el-icon--right {
font-size: 12px;
vertical-align: middle;
}
}
.block-col-2 {

2
docs/en-US/component/select-v2.md
View File

@ -143,7 +143,7 @@ select-v2/remote-search
<!-- | no-match-text | 搜索条件无匹配时显示的文字，也可以使用`#empty`设置 | string | — | 无匹配数据 | -->
<!-- | reserve-keyword | 多选且可搜索时，是否在选中一个Option后保留当前的搜索关键词 | boolean | — | false |
| default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
| clear-icon | 自定义清空图标的类名 | string / component | — | CircleClose |
| allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
| filter-method | 自定义搜索方法 | function | — | — |
| remote | 是否为远程搜索 | boolean | — | false |

14
docs/examples/avatar/types.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="demo-type">
<div>
<el-avatar :icon="User"></el-avatar>
<el-avatar :icon="UserFilled"></el-avatar>
</div>
<div>
<el-avatar
@ -13,15 +13,7 @@
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { User } from '@element-plus/icons'
export default defineComponent({
setup() {
return {
User,
}
},
})
<script setup lang="ts">
import { UserFilled } from '@element-plus/icons'
</script>

7
docs/examples/badge/basic.vue
View File

@ -14,7 +14,8 @@
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
Click Me
<el-icon class="el-icon--right"><caret-bottom /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
@ -31,6 +32,10 @@
</el-dropdown>
</template>
<script lang="ts" setup>
import { CaretBottom } from '@element-plus/icons'
</script>
<style scoped>
.item {
margin-top: 10px;

10
docs/examples/badge/dot.vue
View File

@ -1,14 +1,14 @@
<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-button class="share-button" :icon="Share" type="primary"></el-button>
</el-badge>
</template>
<script lang="ts" setup>
import { Share } from '@element-plus/icons'
</script>
<style scoped>
.item {
margin-top: 10px;

6
docs/examples/breadcrumb/icon.vue
View File

@ -1,8 +1,12 @@
<template>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons'
</script>

24
docs/examples/container/example.vue
View File

@ -3,9 +3,9 @@
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-sub-menu index="1">
<template #title
><i class="el-icon-message"></i>Navigator One</template
>
<template #title>
<el-icon><message /></el-icon>Navigator One
</template>
<el-menu-item-group>
<template #title>Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
@ -20,7 +20,9 @@
</el-sub-menu>
</el-sub-menu>
<el-sub-menu index="2">
<template #title><i class="el-icon-menu"></i>Navigator Two</template>
<template #title>
<el-icon><icon-menu /></el-icon>Navigator Two
</template>
<el-menu-item-group>
<template #title>Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
@ -35,9 +37,9 @@
</el-sub-menu>
</el-sub-menu>
<el-sub-menu index="3">
<template #title
><i class="el-icon-setting"></i>Navigator Three</template
>
<template #title>
<el-icon><setting /></el-icon>Navigator Three
</template>
<el-menu-item-group>
<template #title>Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
@ -57,7 +59,7 @@
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-icon style="margin-right: 15px"><setting /></el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>
@ -84,8 +86,14 @@
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Message, Menu, Setting } from '@element-plus/icons'
export default defineComponent({
components: {
Message,
Setting,
'icon-menu': Menu,
},
setup() {
const item = {
date: '2016-05-02',

25
docs/examples/descriptions/sizes.vue
View File

@ -18,35 +18,35 @@
</template>
<el-descriptions-item>
<template #label>
<i class="el-icon-user"></i>
<el-icon><user /></el-icon>
Username
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<i class="el-icon-mobile-phone"></i>
<el-icon><iphone /></el-icon>
Telephone
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<i class="el-icon-location-outline"></i>
<el-icon><location /></el-icon>
Place
</template>
Suzhou
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<i class="el-icon-tickets"></i>
<el-icon><tickets /></el-icon>
Remarks
</template>
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<i class="el-icon-office-building"></i>
<el-icon><office-building /></el-icon>
Address
</template>
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
@ -76,7 +76,22 @@
</template>
<script lang="ts">
import {
User,
Iphone,
Location,
Tickets,
OfficeBuilding,
} from '@element-plus/icons'
export default {
components: {
User,
Iphone,
Location,
Tickets,
OfficeBuilding,
},
data() {
return {
size: '',

8
docs/examples/divider/custom-content.vue
View File

@ -3,7 +3,9 @@
<span>What you are you do not see, what you see is your shadow. </span>
<el-divider content-position="left">Rabindranath Tagore</el-divider>
<span>I cannot choose the best. The best chooses me.</span>
<el-divider><i class="el-icon-star-on"></i></el-divider>
<el-divider>
<el-icon><star-filled /></el-icon>
</el-divider>
<span
>My wishes are fools, they shout across thy song, my Master. Let me but
listen.</span
@ -11,3 +13,7 @@
<el-divider content-position="right">Rabindranath Tagore</el-divider>
</div>
</template>
<script lang="ts" setup>
import { StarFilled } from '@element-plus/icons'
</script>

17
docs/examples/dropdown/basic-usage.vue
View File

@ -1,7 +1,10 @@
<template>
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
Dropdown List
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
@ -15,12 +18,6 @@
</el-dropdown>
</template>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409eff;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons'
</script>

16
docs/examples/dropdown/command-event.vue
View File

@ -1,7 +1,7 @@
<template>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
@ -18,8 +18,12 @@
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons'
export default defineComponent({
components: {
ArrowDown,
},
setup() {
const handleCommand = (command) => {
ElMessage(`click on item ${command}`)
@ -30,13 +34,3 @@ export default defineComponent({
},
})
</script>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409eff;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>

85
docs/examples/dropdown/how-to-trigger.vue
View File

@ -4,21 +4,17 @@
<span class="demonstration">hover to trigger</span>
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus"
>Action 2</el-dropdown-item
>
<el-dropdown-item icon="el-icon-circle-plus-outline"
>Action 3</el-dropdown-item
>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check"
>Action 5</el-dropdown-item
>
<el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
<el-dropdown-item :icon="CirclePlusFilled">
Action 2
</el-dropdown-item>
<el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
<el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
<el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -27,21 +23,17 @@
<span class="demonstration">click to trigger</span>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus"
>Action 2</el-dropdown-item
>
<el-dropdown-item icon="el-icon-circle-plus-outline"
>Action 3</el-dropdown-item
>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check"
>Action 5</el-dropdown-item
>
<el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
<el-dropdown-item :icon="CirclePlusFilled">
Action 2
</el-dropdown-item>
<el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
<el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
<el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -50,21 +42,17 @@
<span class="demonstration">right click to trigger</span>
<el-dropdown trigger="contextmenu">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus"
>Action 2</el-dropdown-item
>
<el-dropdown-item icon="el-icon-circle-plus-outline"
>Action 3</el-dropdown-item
>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check"
>Action 5</el-dropdown-item
>
<el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
<el-dropdown-item :icon="CirclePlusFilled">
Action 2
</el-dropdown-item>
<el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
<el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
<el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -72,18 +60,13 @@
</el-row>
</template>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409eff;
}
.el-icon-arrow-down {
font-size: 12px;
}
.demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>
<script lang="ts" setup>
import {
ArrowDown,
CircleCheck,
Check,
CirclePlus,
CirclePlusFilled,
Plus,
} from '@element-plus/icons'
</script>

14
docs/examples/dropdown/menu-hiding-behavior.vue
View File

@ -1,7 +1,7 @@
<template>
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
@ -15,12 +15,6 @@
</el-dropdown>
</template>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409eff;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons'
</script>

18
docs/examples/dropdown/triggering-element.vue
View File

@ -1,7 +1,7 @@
<template>
<el-dropdown>
<el-button type="primary">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
@ -29,8 +29,12 @@
<script lang="ts">
import { defineComponent } from 'vue'
import { ArrowDown } from '@element-plus/icons'
export default defineComponent({
components: {
ArrowDown,
},
setup() {
const handleClick = () => {
alert('button click')
@ -41,15 +45,3 @@ export default defineComponent({
},
})
</script>
<style>
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>

4
docs/examples/link/with-icon.vue
View File

@ -2,10 +2,10 @@
<div>
<el-link :icon="Edit">Edit</el-link>
<el-link>
Check<el-icon class="el-icon--right"><view /></el-icon>
Check<el-icon class="el-icon--right"><icon-view /></el-icon>
</el-link>
</div>
</template>
<script setup lang="ts">
import { Edit, View } from '@element-plus/icons'
import { Edit, View as IconView } from '@element-plus/icons'
</script>

4
docs/examples/loading/customization.vue
View File

@ -2,7 +2,7 @@
<el-table
v-loading="loading"
element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
:element-loading-spinner="Loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData"
style="width: 100%"
@ -27,10 +27,12 @@
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { Loading } from '@element-plus/icons'
export default defineComponent({
setup() {
const state = reactive({
Loading,
tableData: [
{
date: '2016-05-02',

1
docs/examples/loading/fullscreen.vue
View File

@ -27,7 +27,6 @@ export default defineComponent({
const loading = ElLoading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
})
setTimeout(() => {

20
docs/examples/menu/collapse.vue
View File

@ -12,7 +12,7 @@
>
<el-sub-menu index="1">
<template #title>
<i class="el-icon-location"></i>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group>
@ -29,15 +29,15 @@
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<el-icon><icon-menu /></el-icon>
<template #title>Navigator Two</template>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<el-icon><document /></el-icon>
<template #title>Navigator Three</template>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<el-icon><setting /></el-icon>
<template #title>Navigator Four</template>
</el-menu-item>
</el-menu>
@ -45,8 +45,20 @@
<script lang="ts">
import { defineComponent, ref } from 'vue'
import {
Location,
Document,
Menu as IconMenu,
Setting,
} from '@element-plus/icons'
export default defineComponent({
components: {
Location,
Document,
Setting,
IconMenu,
},
setup() {
const isCollapse = ref(true)
const handleOpen = (key, keyPath) => {

28
docs/examples/menu/vertical.vue
View File

@ -10,7 +10,7 @@
>
<el-sub-menu index="1">
<template #title>
<i class="el-icon-location"></i>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
@ -26,15 +26,15 @@
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<el-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<el-icon><document /></el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<el-icon><setting /></el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
@ -52,7 +52,7 @@
>
<el-sub-menu index="1">
<template #title>
<i class="el-icon-location"></i>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
@ -68,15 +68,15 @@
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<el-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<el-icon><document /></el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<el-icon><setting /></el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
@ -86,8 +86,20 @@
<script lang="ts">
import { defineComponent } from 'vue'
import {
Location,
Document,
Menu as IconMenu,
Setting,
} from '@element-plus/icons'
export default defineComponent({
components: {
Location,
Document,
Setting,
IconMenu,
},
setup() {
const handleOpen = (key, keyPath) => {
console.log(key, keyPath)

6
docs/examples/page-header/custom-icon.vue
View File

@ -1,3 +1,7 @@
<template>
<el-page-header icon="el-icon-arrow-left" content="detail" />
<el-page-header :icon="ArrowLeft" content="detail" />
</template>
<script lang="ts" setup>
import { ArrowLeft } from '@element-plus/icons'
</script>

7
docs/examples/progress/custom-color.vue
View File

@ -8,8 +8,8 @@
<el-progress :percentage="percentage" :color="customColors" />
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease" />
<el-button icon="el-icon-plus" @click="increase" />
<el-button :icon="Minus" @click="decrease" />
<el-button :icon="Plus" @click="increase" />
</el-button-group>
</div>
</div>
@ -17,6 +17,7 @@
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { Minus, Plus } from '@element-plus/icons'
export default defineComponent({
setup() {
@ -58,6 +59,8 @@ export default defineComponent({
customColorMethod,
increase,
decrease,
Minus,
Plus,
}
},
})

6
docs/examples/progress/customized-content.vue
View File

@ -12,7 +12,7 @@
<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-button type="success" :icon="Check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
@ -23,6 +23,10 @@
</div>
</template>
<script lang="ts" setup>
import { Check } from '@element-plus/icons'
</script>
<style lang="scss" scoped>
.percentage-value {
display: block;

7
docs/examples/progress/dashboard-progress-bar.vue
View File

@ -4,8 +4,8 @@
<el-progress type="dashboard" :percentage="percentage2" :color="colors" />
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease" />
<el-button icon="el-icon-plus" @click="increase" />
<el-button :icon="Minus" @click="decrease" />
<el-button :icon="Plus" @click="increase" />
</el-button-group>
</div>
</div>
@ -13,6 +13,7 @@
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { Minus, Plus } from '@element-plus/icons'
export default defineComponent({
setup() {
@ -49,6 +50,8 @@ export default defineComponent({
...toRefs(state),
increase,
decrease,
Minus,
Plus,
}
},
})

10
docs/examples/steps/simple.vue
View File

@ -1,8 +1,8 @@
<template>
<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-step title="Step 1" :icon="Edit"></el-step>
<el-step title="Step 2" :icon="UploadFilled"></el-step>
<el-step title="Step 3" :icon="Picture"></el-step>
</el-steps>
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
@ -11,3 +11,7 @@
<el-step title="Step 3"></el-step>
</el-steps>
</template>
<script lang="ts" setup>
import { Edit, UploadFilled, Picture } from '@element-plus/icons'
</script>

10
docs/examples/steps/with-icon.vue
View File

@ -1,7 +1,11 @@
<template>
<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-step title="Step 1" :icon="Edit"></el-step>
<el-step title="Step 2" :icon="Upload"></el-step>
<el-step title="Step 3" :icon="Picture"></el-step>
</el-steps>
</template>
<script lang="ts" setup>
import { Edit, Upload, Picture } from '@element-plus/icons'
</script>

8
docs/examples/tabs/custom-tab.vue
View File

@ -2,7 +2,9 @@
<el-tabs type="border-card">
<el-tab-pane>
<template #label>
<span><i class="el-icon-date"></i> Route</span>
<span>
<el-icon><calendar /></el-icon>Route
</span>
</template>
Route
</el-tab-pane>
@ -11,3 +13,7 @@
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
</template>
<script lang="ts" setup>
import { Calendar } from '@element-plus/icons'
</script>