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

docs(components): [carousel] use new display tag (#14953)

Browse Source
This commit is contained in:
wzc520pyfm 2024-07-23 10:24:48 +08:00 committed by GitHub
parent b7c9c1010b
commit 07a1ac7583
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 91 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
docs/en-US/component/carousel.md
View File

@ -75,52 +75,56 @@ carousel/vertical
::: :::
## Carousel Attributes ## Carousel API
| Name | Description | Type | Accepted Values | Default | ### Carousel Attributes
| -------------------- | ----------------------------------------------------- | ------- | ------------------- | ---------- |
| height | height of the carousel | string | — | — |
| initial-index | index of the initially active slide (starting from 0) | number | — | 0 |
| trigger | how indicators are triggered | string | hover/click | hover |
| autoplay | whether automatically loop the slides | boolean | — | true |
| interval | interval of the auto loop, in milliseconds | number | — | 3000 |
| indicator-position | position of the indicators | string | outside/none | — |
| arrow | when arrows are shown | string | always/hover/never | hover |
| type | type of the Carousel | string | card | — |
| loop | display the items in loop | boolean | - | true |
| direction | display direction | string | horizontal/vertical | horizontal |
| pause-on-hover | pause autoplay when hover | boolean | - | true |
| motion-blur ^(2.6.0) | infuse dynamism and smoothness into the carousel | boolean | - | false |
## Carousel Events | Name | Description | Type | Default |
| -------------------- | ----------------------------------------------------- | --------------------------------------- | ---------- |
| height | height of the carousel | ^[string] | '' |
| initial-index | index of the initially active slide (starting from 0) | ^[number] | 0 |
| trigger | how indicators are triggered | ^[enum]`'hover' \| 'click'` | hover |
| autoplay | whether automatically loop the slides | ^[boolean] | true |
| interval | interval of the auto loop, in milliseconds | ^[number] | 3000 |
| indicator-position | position of the indicators | ^[enum]`'' \| 'none' \| 'outside'` | '' |
| arrow | when arrows are shown | ^[enum]`'always' \| 'hover' \| 'never'` | hover |
| type | type of the Carousel | ^[enum]`'' \| 'card'` | '' |
| loop | display the items in loop | ^[boolean] | true |
| direction | display direction | ^[enum]`'horizontal' \| 'vertical'` | horizontal |
| pause-on-hover | pause autoplay when hover | ^[boolean] | true |
| motion-blur ^(2.6.0) | infuse dynamism and smoothness into the carousel | ^[boolean] | false |
| Name | Description | Parameters | ### Carousel Events
| ------ | --------------------------------------- | ------------------------------------------------------------ |
| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |
## Carousel Methods | Name | Description | Type |
| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| change | triggers when the active slide switches, it has two parameters, the one is the index of the new active slide, and other is index of the old active slide | ^[Function]`(current: number, prev: number) => boolean` |
| Method | Description | Parameters | ### Carousel Slots
| ------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------- |
| setActiveItem | manually switch slide | index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` |
| prev | switch to the previous slide | — |
| next | switch to the next slide | — |
## Carousel Slots
| Name | Description | Subtags | | Name | Description | Subtags |
| ---- | ------------------------- | ------------- | | ------- | ------------------------- | ------------- |
| - | customize default content | Carousel-Item | | default | customize default content | Carousel-Item |
## Carousel-Item Attributes ### Carousel Exposes
| Name | Description | Type | Accepted Values | Default | | Method | Description | Type |
| ----- | ------------------------------------------------ | ------ | --------------- | ------- | | ------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| name | name of the item, can be used in `setActiveItem` | string | — | — | | setActiveItem | manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` | ^[Function]`(index: string \| number) => void` |
| label | text content for the corresponding indicator | string | — | — | | prev | switch to the previous slide | ^[Function]`() => void` |
| next | switch to the next slide | ^[Function]`() => void` |
## Carousel-Item Slots ## Carousel-Item API
### Carousel-Item Attributes
| Name | Description | Type | Default |
| ----- | ------------------------------------------------ | --------------------- | ------- |
| name | name of the item, can be used in `setActiveItem` | ^[string] | '' |
| label | text content for the corresponding indicator | ^[string] / ^[number] | '' |
### Carousel-Item Slots
| Name | Description | | Name | Description |
| ---- | ------------------------- | | ------- | ------------------------- |
| — | customize default content | | default | customize default content |

6
packages/components/carousel/src/carousel-item.ts
View File

@ -2,7 +2,13 @@ import { buildProps } from '@element-plus/utils'
import type { ExtractPropTypes } from 'vue' import type { ExtractPropTypes } from 'vue'
export const carouselItemProps = buildProps({ export const carouselItemProps = buildProps({
/**
* @description name of the item, can be used in `setActiveItem`
*/
name: { type: String, default: '' }, name: { type: String, default: '' },
/**
* @description text content for the corresponding indicator
*/
label: { label: {
type: [String, Number], type: [String, Number],
default: '', default: '',

46
packages/components/carousel/src/carousel.ts
View File

@ -2,62 +2,100 @@ import { buildProps, isNumber } from '@element-plus/utils'
import type { ExtractPropTypes } from 'vue' import type { ExtractPropTypes } from 'vue'
export const carouselProps = buildProps({ export const carouselProps = buildProps({
/**
* @description index of the initially active slide (starting from 0)
*/
initialIndex: { initialIndex: {
type: Number, type: Number,
default: 0, default: 0,
}, },
/**
* @description height of the carousel
*/
height: { height: {
type: String, type: String,
default: '', default: '',
}, },
/**
* @description how indicators are triggered
*/
trigger: { trigger: {
type: String, type: String,
values: ['hover', 'click'], values: ['hover', 'click'],
default: 'hover', default: 'hover',
}, },
/**
* @description whether automatically loop the slides
*/
autoplay: { autoplay: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
/**
* @description interval of the auto loop, in milliseconds
*/
interval: { interval: {
type: Number, type: Number,
default: 3000, default: 3000,
}, },
/**
* @description position of the indicators
*/
indicatorPosition: { indicatorPosition: {
type: String, type: String,
values: ['', 'none', 'outside'], values: ['', 'none', 'outside'],
default: '', default: '',
}, },
/**
* @description when arrows are shown
*/
arrow: { arrow: {
type: String, type: String,
values: ['always', 'hover', 'never'], values: ['always', 'hover', 'never'],
default: 'hover', default: 'hover',
}, },
/**
* @description type of the Carousel
*/
type: { type: {
type: String, type: String,
values: ['', 'card'], values: ['', 'card'],
default: '', default: '',
}, },
/**
* @description display the items in loop
*/
loop: { loop: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
/**
* @description display direction
*/
direction: { direction: {
type: String, type: String,
values: ['horizontal', 'vertical'], values: ['horizontal', 'vertical'],
default: 'horizontal', default: 'horizontal',
}, },
/**
* @description pause autoplay when hover
*/
pauseOnHover: { pauseOnHover: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
motionBlur: { /**
type: Boolean, * @description infuse dynamism and smoothness into the carousel
default: false, */
}, motionBlur: Boolean,
} as const) } as const)
export const carouselEmits = { export const carouselEmits = {
/**
* @description triggers when the active slide switches
* @param current index of the new active slide
* @param prev index of the old active slide
*/
change: (current: number, prev: number) => [current, prev].every(isNumber), change: (current: number, prev: number) => [current, prev].every(isNumber),
} }

2
packages/components/carousel/src/carousel.vue
View File

@ -166,7 +166,7 @@ const indicatorsClasses = computed(() => {
}) })
defineExpose({ defineExpose({
/** @description manually switch slide */ /** @description manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` */
setActiveItem, setActiveItem,
/** @description switch to the previous slide */ /** @description switch to the previous slide */
prev, prev,