javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [Carousel] Add motion blur functionality (#15603)

Browse Source 
* feat(components): [Carousel] Add motion blur functionality

docs(components): [Carousel] Add example properties

docs(components): [Carousel] Add docs properties

* fix(components): [Carousel] change the id name in filter in svg

fix(components): [Carousel] button to remove motion blur effect

fix(components): [Carousel] svg hides when motion blur is false

* update(components): [Carousel]  docs/en-US/component/carousel.md

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* update(components): [Carousel] docs/examples/carousel/motion-blur.vue

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* update(components): [Carousel] docs/examples/carousel/motion-blur.vue

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* update(components): [Carousel] packages/components/carousel/src/carousel.ts

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* docs(components): [Carousel]  add feature version labels

---------

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
This commit is contained in:
Jed
2024-02-29 14:54:06 +08:00
committed by GitHub
parent 3f4bee5a90
commit 53bc6517f2
7 changed files with 196 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/examples/carousel/motion-blur.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div class="block text-center">
<span class="demonstration">Motion blur the switch (default)</span>
<el-carousel height="200px" motion-blur>
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small justify-center" text="2xl">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<p class="text-center demonstration">Vertical effect</p>
<el-carousel
height="200px"
direction="vertical"
motion-blur
:autoplay="false"
>
<el-carousel-item v-for="item in 4" :key="item">
<h3 text="2xl" justify="center">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style scoped>
.demonstration {
color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
</style>