mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
docs(components): [carousel] use new display tag (#14953)
This commit is contained in:
wzc520pyfm
GitHub
parent
b7c9c1010b
commit
07a1ac7583
@ -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 |
|
||||
| ------- | ------------------------- | ------------- |
|
||||
| default | customize default content | Carousel-Item |
|
||||
|
||||
| Name | Description | Subtags |
|
||||
| ---- | ------------------------- | ------------- |
|
||||
| - | customize default content | Carousel-Item |
|
||||
### Carousel Exposes
|
||||
|
||||
## Carousel-Item Attributes
|
||||
| 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` |
|
||||
|
||||
| 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 | — | — |
|
||||
## Carousel-Item API
|
||||
|
||||
## Carousel-Item Slots
|
||||
### Carousel-Item Attributes
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ------------------------- |
|
||||
| — | customize default content |
|
||||
| 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 |
|
||||
| ------- | ------------------------- |
|
||||
| default | customize default content |
|
||||
|
||||
@ -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: '',
|
||||
|
||||
@ -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),
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user