mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +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 |
| -------------------- | ----------------------------------------------------- | ------- | ------------------- | ---------- |
| 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 Attributes
## 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 |
| ------ | --------------------------------------- | ------------------------------------------------------------ |
| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |
### Carousel Events
## 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 |
| ------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------- |
| 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
### Carousel Slots
| 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 |
| ----- | ------------------------------------------------ | ------ | --------------- | ------- |
| name | name of the item, can be used in `setActiveItem` | string | — | — |
| label | text content for the corresponding indicator | string | — | — |
| Method | Description | Type |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| 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` |
| 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 |
| ---- | ------------------------- |
| — | 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'
export const carouselItemProps = buildProps({
/**
* @description name of the item, can be used in `setActiveItem`
*/
name: { type: String, default: '' },
/**
* @description text content for the corresponding indicator
*/
label: {
type: [String, Number],
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'
export const carouselProps = buildProps({
/**
* @description index of the initially active slide (starting from 0)
*/
initialIndex: {
type: Number,
default: 0,
},
/**
* @description height of the carousel
*/
height: {
type: String,
default: '',
},
/**
* @description how indicators are triggered
*/
trigger: {
type: String,
values: ['hover', 'click'],
default: 'hover',
},
/**
* @description whether automatically loop the slides
*/
autoplay: {
type: Boolean,
default: true,
},
/**
* @description interval of the auto loop, in milliseconds
*/
interval: {
type: Number,
default: 3000,
},
/**
* @description position of the indicators
*/
indicatorPosition: {
type: String,
values: ['', 'none', 'outside'],
default: '',
},
/**
* @description when arrows are shown
*/
arrow: {
type: String,
values: ['always', 'hover', 'never'],
default: 'hover',
},
/**
* @description type of the Carousel
*/
type: {
type: String,
values: ['', 'card'],
default: '',
},
/**
* @description display the items in loop
*/
loop: {
type: Boolean,
default: true,
},
/**
* @description display direction
*/
direction: {
type: String,
values: ['horizontal', 'vertical'],
default: 'horizontal',
},
/**
* @description pause autoplay when hover
*/
pauseOnHover: {
type: Boolean,
default: true,
},
motionBlur: {
type: Boolean,
default: false,
},
/**
* @description infuse dynamism and smoothness into the carousel
*/
motionBlur: Boolean,
} as const)
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),
}

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

@ -166,7 +166,7 @@ const indicatorsClasses = computed(() => {
})
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,
/** @description switch to the previous slide */
prev,