mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-11 11:39:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [collapse] collpase item supports custom icon (#18215)

Browse Source 
* feat(components): [collapse] Collpase item supports custom icon

* docs(components): [collapse] update collpase custom docs
This commit is contained in:
kimverchan 2024-09-12 22:13:25 +08:00 committed by GitHub
parent 2a568113a3
commit 647af2cd22
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 107 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/en-US/component/collapse.md
View File

@ -37,6 +37,16 @@ collapse/customization
:::
## Custom icon ^(2.8.3)
Besides using the `icon` attribute, you can customize icon of panel item with named slots, which makes adding custom content.
:::demo
collapse/custom-icon
:::
## Collapse API
### Collapse Attributes
@ -62,15 +72,17 @@ collapse/customization
### Collapse Item Attributes
| Name | Description | Type | Default |
| -------- | ---------------------------------- | --------------------- | ------- |
| name | unique identification of the panel | ^[string] / ^[number] | — |
| title | title of the panel | ^[string] | '' |
| disabled | disable the collapse item | ^[boolean] | false |
| Name | Description | Type | Default |
| ------------- | ---------------------------------- | ------------------------ | ---------- |
| name | unique identification of the panel | ^[string] / ^[number] | — |
| title | title of the panel | ^[string] | '' |
| icon ^(2.8.3) | icon of the collapse item | ^[string] / ^[Component] | ArrowRight |
| disabled | disable the collapse item | ^[boolean] | false |
### Collapse Item Slot
| Name | Description |
| ------- | ------------------------------ |
| default | content of Collapse Item |
| title | content of Collapse Item title |
| Name | Description | Type |
| ------------- | ------------------------------ | -------------------------------- |
| default | content of Collapse Item | — |
| title | content of Collapse Item title | — |
| icon ^(2.8.3) | content of Collapse Item icon | ^[object]`{ isActive: boolean }` |

72
docs/examples/collapse/custom-icon.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div class="demo-collapse">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="Consistency" name="1" :icon="CaretRight">
<div>
Consistent with real life: in line with the process and logic of real
life, and comply with languages and habits that the users are used to;
</div>
<div>
Consistent within interface: all elements should be consistent, such
as: design style, icons and texts, position of elements, etc.
</div>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<template #icon="{ isActive }">
<span class="icon-ele">
{{ isActive ? 'Expanded' : 'Collapsed' }}
</span>
</template>
<div>
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
</div>
<div>
Visual feedback: reflect current state by updating or rearranging
elements of the page.
</div>
</el-collapse-item>
<el-collapse-item title="Efficiency" name="3">
<div>
Simplify the process: keep operating process simple and intuitive;
</div>
<div>
Definite and clear: enunciate your intentions clearly so that the
users can quickly understand and make decisions;
</div>
<div>
Easy to identify: the interface should be straightforward, which helps
the users to identify and frees them from memorizing and recalling.
</div>
</el-collapse-item>
<el-collapse-item title="Controllability" name="4">
<div>
Decision making: giving advices about operations is acceptable, but do
not make decisions for the users;
</div>
<div>
Controlled consequences: users should be granted the freedom to
operate, including canceling, aborting or terminating current
operation.
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { CaretRight } from '@element-plus/icons-vue'
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
console.log(val)
}
</script>
<style scoped>
.icon-ele {
margin: 0 8px 0 auto;
color: #409eff;
}
</style>

10
packages/components/collapse/src/collapse-item.ts
View File

@ -1,4 +1,5 @@
import { buildProps, definePropType } from '@element-plus/utils'
import { buildProps, definePropType, iconPropType } from '@element-plus/utils'
import { ArrowRight } from '@element-plus/icons-vue'
import type { ExtractPropTypes } from 'vue'
import type { CollapseActiveName } from './collapse'
@ -17,6 +18,13 @@ export const collapseItemProps = buildProps({
type: definePropType<CollapseActiveName>([String, Number]),
default: undefined,
},
/**
* @description icon of the collapse item
*/
icon: {
type: iconPropType,
default: ArrowRight,
},
/**
* @description disable the collapse item
*/

9
packages/components/collapse/src/collapse-item.vue
View File

@ -14,9 +14,11 @@
@blur="focusing = false"
>
<slot name="title">{{ title }}</slot>
<el-icon :class="arrowKls">
<arrow-right />
</el-icon>
<slot name="icon" :is-active="isActive">
<el-icon :class="arrowKls">
<component :is="icon" />
</el-icon>
</slot>
</button>
<el-collapse-transition>
@ -39,7 +41,6 @@
<script lang="ts" setup>
import ElCollapseTransition from '@element-plus/components/collapse-transition'
import ElIcon from '@element-plus/components/icon'
import { ArrowRight } from '@element-plus/icons-vue'
import { collapseItemProps } from './collapse-item'
import { useCollapseItem, useCollapseItemDOM } from './use-collapse-item'