mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 19:28:14 +08:00
docs(style): [tag] use new display tag (#12659)
* docs(style): [tag] use new display tag * refactor(components): [check] updated doc and code to new display tag * docs(components): [tag] update format of doc * style(components): [tag] undo redundant changes * style(components): [tag] undo redundant changes and update tag doc
This commit is contained in:
wzc520pyfm
GitHub
parent
9627100b7c
commit
0d46d99022
@ -73,45 +73,50 @@ tag/checkable
|
||||
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
## Tag API
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ------------------- | ------------------------------------ | ------- | --------------------------- | ------- |
|
||||
| type | component type | string | success/info/warning/danger | — |
|
||||
| closable | whether Tag can be removed | boolean | — | false |
|
||||
| disable-transitions | whether to disable animations | boolean | — | false |
|
||||
| hit | whether Tag has a highlighted border | boolean | — | false |
|
||||
| color | background color of the Tag | string | — | — |
|
||||
| size | tag size | string | large / default /small | default |
|
||||
| effect | component theme | string | dark / light / plain | light |
|
||||
| round | whether Tag is rounded | boolean | — | false |
|
||||
### Tag Attributes
|
||||
|
||||
## Events
|
||||
| Name | Description | Type | Default |
|
||||
| ------------------- | ------------------------------------ | ----------------------------------------------------------- | ------- |
|
||||
| type | type of Tag | ^[enum]`'success' \| 'info' \| 'warning' \| 'danger' \| ''` | '' |
|
||||
| closable | whether Tag can be removed | ^[boolean] | false |
|
||||
| disable-transitions | whether to disable animations | ^[boolean] | false |
|
||||
| hit | whether Tag has a highlighted border | ^[boolean] | false |
|
||||
| color | background color of the Tag | ^[string] | '' |
|
||||
| size | size of Tag | ^[enum]`'large' \| 'default' \| 'small' \| ''` | '' |
|
||||
| effect | theme of Tag | ^[enum]`'dark' \| 'light' \| 'plain'` | light |
|
||||
| round | whether Tag is rounded | ^[boolean] | false |
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| ----- | ---------------------------- | ---------- |
|
||||
| click | triggers when Tag is clicked | — |
|
||||
| close | triggers when Tag is removed | — |
|
||||
### Tag Events
|
||||
|
||||
## Slots
|
||||
| Name | Description | Type |
|
||||
| ----- | ---------------------------- | -------------------------------------- |
|
||||
| click | triggers when Tag is clicked | ^[Function]`(evt: MouseEvent) => void` |
|
||||
| close | triggers when Tag is removed | ^[Function]`(evt: MouseEvent) => void` |
|
||||
|
||||
### Tag Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ------------------------- |
|
||||
| — | customize default content |
|
||||
|
||||
## CheckTag Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ------- | ----------- | ------- | --------------- | ------- |
|
||||
| checked | is checked | boolean | true/false | — |
|
||||
## CheckTag API
|
||||
|
||||
## CheckTag Events
|
||||
### CheckTag Attributes
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| ------ | ---------------------------------- | ---------- |
|
||||
| change | triggers when Check Tag is clicked | checked |
|
||||
| Name | Description | Type | Default |
|
||||
| ------------------------- | ----------- | ---------- | ------- |
|
||||
| checked / v-model:checked | is checked | ^[boolean] | false |
|
||||
|
||||
## CheckTag Slots
|
||||
### CheckTag Events
|
||||
|
||||
| Name | Description | Type |
|
||||
| ------ | ---------------------------------- | ------------------------------------- |
|
||||
| change | triggers when Check Tag is clicked | ^[Function]`(value: boolean) => void` |
|
||||
|
||||
### CheckTag Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ------------------------- |
|
||||
|
||||
@ -5,6 +5,9 @@ import type CheckTag from './check-tag.vue'
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
|
||||
export const checkTagProps = buildProps({
|
||||
/**
|
||||
* @description is checked
|
||||
*/
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<span :class="[ns.b(), ns.is('checked', checked)]" @click="handleChange">
|
||||
<span :class="containerKls" @click="handleChange">
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { CHANGE_EVENT } from '@element-plus/constants'
|
||||
import { useNamespace } from '@element-plus/hooks'
|
||||
import { checkTagEmits, checkTagProps } from './check-tag'
|
||||
@ -16,6 +17,7 @@ const props = defineProps(checkTagProps)
|
||||
const emit = defineEmits(checkTagEmits)
|
||||
|
||||
const ns = useNamespace('check-tag')
|
||||
const containerKls = computed(() => [ns.b(), ns.is('checked', props.checked)])
|
||||
|
||||
const handleChange = () => {
|
||||
const checked = !props.checked
|
||||
|
||||
@ -5,28 +5,52 @@ import type Tag from './tag.vue'
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
|
||||
export const tagProps = buildProps({
|
||||
closable: Boolean,
|
||||
/**
|
||||
* @description type of Tag
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
values: ['success', 'info', 'warning', 'danger', ''],
|
||||
default: '',
|
||||
},
|
||||
hit: Boolean,
|
||||
/**
|
||||
* @description whether Tag can be removed
|
||||
*/
|
||||
closable: Boolean,
|
||||
/**
|
||||
* @description whether to disable animations
|
||||
*/
|
||||
disableTransitions: Boolean,
|
||||
/**
|
||||
* @description whether Tag has a highlighted border
|
||||
*/
|
||||
hit: Boolean,
|
||||
/**
|
||||
* @description background color of the Tag
|
||||
*/
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description size of Tag
|
||||
*/
|
||||
size: {
|
||||
type: String,
|
||||
values: componentSizes,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description theme of Tag
|
||||
*/
|
||||
effect: {
|
||||
type: String,
|
||||
values: ['dark', 'light', 'plain'],
|
||||
default: 'light',
|
||||
},
|
||||
/**
|
||||
* @description whether Tag is rounded
|
||||
*/
|
||||
round: Boolean,
|
||||
} as const)
|
||||
export type TagProps = ExtractPropTypes<typeof tagProps>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<span
|
||||
v-if="disableTransitions"
|
||||
:class="classes"
|
||||
:class="containerKls"
|
||||
:style="{ backgroundColor: color }"
|
||||
@click="handleClick"
|
||||
>
|
||||
@ -14,7 +14,7 @@
|
||||
</span>
|
||||
<transition v-else :name="`${ns.namespace.value}-zoom-in-center`" appear>
|
||||
<span
|
||||
:class="classes"
|
||||
:class="containerKls"
|
||||
:style="{ backgroundColor: color }"
|
||||
@click="handleClick"
|
||||
>
|
||||
@ -45,7 +45,7 @@ const emit = defineEmits(tagEmits)
|
||||
|
||||
const tagSize = useFormSize()
|
||||
const ns = useNamespace('tag')
|
||||
const classes = computed(() => {
|
||||
const containerKls = computed(() => {
|
||||
const { type, hit, effect, closable, round } = props
|
||||
return [
|
||||
ns.b(),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user