mirror of https://github.com/element-plus/element-plus.git synced 2024-12-09 02:31:33 +08:00

epic(website): refactor website (#3426 )

* feat(website): init viteperss (#3162)

* init vitepress

* Finish homepage

* relayout page

* partial finish

* update

* update use lang

* remove font weight; change font size

* docs: optimize docs folder structure

* reorganize project

* fix ssr issue

* fix build issues

Co-authored-by: Kevin <sxzz@sxzz.moe>
Co-authored-by: zouhang <zouhang@didiglobal.com>

* feat(website) integrate with crowdin (#3218)

- Introduce Crowdin CLI
- Add script for fetching Crowdin token from env
- Add script for local development

* fix formatting

* update codeblocks (#3249)

* feat(docs): update website preview script

- Update azure preview build script
- Eliminate dead links

* bootstrap docs

* fix homepage layout issue

* fix formating

* Finish ToC and codepen integration

* reorganized files and fix issue that causes demo unavailable after build

* feat(docs): migration documentations (#3283)

* feat(docs): migration documentations

- Move documentations to docs/

* remove unused files

* docs: [popconfirm] migrate document (#3285)

* feat(docs): migrate documentation from space.md to upload.md (#3292)

- Upload documentations acorrodingly

* docs: [date-picker] migrate document  (#3289)

* docs: [date-picker] migrate document

* fix: typo

* docs: [slider] migrate document (#3287)

* docs: migrate documents (#3290)

* docs: migrate-datetime-picker

* docs: migrate descriptions

* docs: migrate dialog

* docs: migrate divider

* docs: migrate drawer

* docs: migrate drapdown

* docs: fix drapdown

* docs: migrate empty

* docs: migrate form

* docs: add scoped for style

* docs: simplify toRefs

* chore: update doc (#3297)

* chore: update doc

* chore: update doc

* chore: update doc

* feat(docs): migrate documentations from infinite-scroll to page-header (#3303)

- Update docs accordingly
- Update CodePen icon to match style
- Update component name to match others

* docs: migrate documentions (#3293)

migrate list:
* image
* popover
* scrollbar
* radio
* rate
* skeleton
* select
* select-v2
* reault
* progress
* pagination

* chore: update doc (#3305)

Co-authored-by: 0song <0song@gmail.com>

* Fix broken pipeline

* chore: update demo plugin

* website perfection

* fix hydration bug

* docs: update guide (#3342)

* WIP docs

* docs: update docs

* add dark mode

* make dev fetch components from local instead of node_modules

Co-authored-by: msidolphin <msidolphin@outlook.com>
Co-authored-by: Aex <spryti@qq.com>
Co-authored-by: 0song <82012629+0song@users.noreply.github.com>
Co-authored-by: 0song <0song@gmail.com>
Co-authored-by: zouhang <zouhang@didiglobal.com>
Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

* fix(docs): fix codepen code example issue (#3380)

* fix(docs): fix codepen code example issue

- Add lang="ts" for all example files
- Fix codepen import error

* revert changes in resource.vue

* feat(docs): complete crowdin integration (#3408)

* Update mds for preparing the integration script

* deprecate old website

* update sponsors and even handler for resize

* update build script for preview

* fix preview-build error

* fix preview-build error

* fix preview-build error

* fix preview-build error

* fix preview-build error

* update deploy script and some bugs

* Fix existing issue

* chore(project): add dev preview workflow

* chore(project): rename dev to staging

* update the size of toc

* update staging-preview script

* update preview scripts

* enable website build for preview

* fix build error

* final commitment for update the details

* remove azure pipeline

* move docs ignores into docs and update date

Co-authored-by: Kevin <sxzz@sxzz.moe>
Co-authored-by: zouhang <zouhang@didiglobal.com>
Co-authored-by: msidolphin <msidolphin@outlook.com>
Co-authored-by: Aex <spryti@qq.com>
Co-authored-by: 0song <82012629+0song@users.noreply.github.com>
Co-authored-by: 0song <0song@gmail.com>

2021-09-17 00:18:50 +08:00

4.8 KiB

Raw Blame History

Carousel

Loop a series of images or texts in a limited space

Basic usage

:::demo Combine el-carousel with el-carousel-item, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside el-carousel-item tag. By default the carousel switches when mouse hovers over an indicator. Set trigger to click, and the carousel switches only when an indicator is clicked.

carousel/basic

:::

Indicators

Indicators can be displayed outside the carousel

:::demo The indicator-position attribute determines where the indicators are located. By default they are inside the carousel, and setting indicator-position to outside moves them outside; setting indicator-position to none hides the indicators.

carousel/indicator

:::

Arrows

You can define when arrows are displayed

:::demo The arrow attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting arrow to always or never shows/hides the arrows permanently.

carousel/arrows

:::

Card mode

When a page is wide enough but has limited height, you can activate card mode for carousels

:::demo Setting type to card activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.

carousel/card

:::

Vertical

By default, direction is horizontal. Let carousel be displayed in the vertical direction by setting direction to vertical.

:::demo

carousel/vertical

:::

Carousel Attributes

Attribute	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

Carousel Events

Event Name	Description	Parameters
change	triggers when the active slide switches	index of the new active slide, index of the old active slide

Carousel Methods

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-Item Attributes

Attribute	Description	Type	Accepted Values	Default
name	name of the item, can be used in `setActiveItem`	string	—	—
label	text content for the corresponding indicator	string	—	—

4.8 KiB Raw Blame History