feat(carousel): adds next-slide-style and prev-slide-style props, c…

…loses #2340
tusen-ai · Mar 26, 2022 · 021e58a · 021e58a
1 parent 78d8d69
commit 021e58a
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 15 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -49,6 +49,7 @@
 - `n-date-picker` adds `time-picker-props` props, closes [#2660](https://github.com/TuSimple/naive-ui/issues/2660).
 - `n-tabs` adds `trigger` prop, closes [#2679](https://github.com/TuSimple/naive-ui/issues/2679).
 - `n-menu` adds `itemColorHover`, `itemColorActiveHover`, `itemTextColorActiveHover`, `itemTextColorHorizontal`, `itemTextColorHoverHorizontal`, `itemTextColorActiveHorizontal`, `itemTextColorActiveHoverHorizontal`, `itemTextColorChildActiveHorizontal`, `itemIconColorActiveHover`, `itemIconColorHorizontal`, `itemIconColorHoverHorizontal`, `itemIconColorActiveHorizontal`, `itemIconColorActiveHoverHorizontal`, `itemIconColorChildActiveHorizontal`, `arrowColorActiveHover`, `itemColorHoverInverted`, `itemColorActiveHoverInverted`, `itemTextColorActiveHoverInverted`, `itemTextColorHorizontalInverted`, `itemTextColorHoverHorizontalInverted`, `itemTextColorChildActiveHorizontalInverted`, `itemTextColorActiveHorizontalInverted`, `itemTextColorActiveHoverHorizontalInverted`, `itemIconColorActiveHoverInverted`, `itemIconColorHorizontalInverted`, `itemIconColorHoverHorizontalInverted`, `itemIconColorActiveHorizontalInverted`, `itemIconColorActiveHoverHorizontalInverted`, `itemIconColorChildActiveHorizontalInverted`, `arrowColorActiveHoverInverted` theme variables, closes [#2598](https://github.com/TuSimple/naive-ui/issues/2598).
+- `n-carousel` adds `next-slide-style` and `prev-slide-style` props, closes [#2340](https://github.com/TuSimple/naive-ui/issues/2340).
 
 ### i18n
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -49,6 +49,7 @@
 - `n-date-picker` 新增 `time-picker-props` 属性，关闭 [#2660](https://github.com/TuSimple/naive-ui/issues/2660)
 - `n-tabs` 新增 `trigger` 属性，关闭 [#2679](https://github.com/TuSimple/naive-ui/issues/2679)
 - `n-menu` 新增 `itemColorHover`, `itemColorActiveHover`, `itemTextColorActiveHover`, `itemTextColorHorizontal`, `itemTextColorHoverHorizontal`, `itemTextColorActiveHorizontal`, `itemTextColorActiveHoverHorizontal`, `itemTextColorChildActiveHorizontal`, `itemIconColorActiveHover`, `itemIconColorHorizontal`, `itemIconColorHoverHorizontal`, `itemIconColorActiveHorizontal`, `itemIconColorActiveHoverHorizontal`, `itemIconColorChildActiveHorizontal`, `arrowColorActiveHover`, `itemColorHoverInverted`, `itemColorActiveHoverInverted`, `itemTextColorActiveHoverInverted`, `itemTextColorHorizontalInverted`, `itemTextColorHoverHorizontalInverted`, `itemTextColorChildActiveHorizontalInverted`, `itemTextColorActiveHorizontalInverted`, `itemTextColorActiveHoverHorizontalInverted`, `itemIconColorActiveHoverInverted`, `itemIconColorHorizontalInverted`, `itemIconColorHoverHorizontalInverted`, `itemIconColorActiveHorizontalInverted`, `itemIconColorActiveHoverHorizontalInverted`, `itemIconColorChildActiveHorizontalInverted`, `arrowColorActiveHoverInverted` 主题变量，关闭 [#2598](https://github.com/TuSimple/naive-ui/issues/2598)
+- `n-carousel` 新增 `next-slide-style` 和 `prev-slide-style` 属性，关闭 [#2340](https://github.com/TuSimple/naive-ui/issues/2340)
 
 ### i18n
 

diff --git a/src/carousel/demos/enUS/custom-card.demo.vue b/src/carousel/demos/enUS/custom-card.demo.vue
@@ -0,0 +1,49 @@
+<markdown>
+# Customize card
+
+You can use `next-slide-style` and `prev-slide-style` to adjust the ratio of front & back cards size ratio.
+</markdown>
+
+<template>
+  <n-carousel
+    effect="card"
+    prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
+    next-slide-style="transform: translateX(50%) translateZ(-800px);"
+    style="height: 240px"
+    :show-dots="false"
+  >
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
+      >
+    </n-carousel-item>
+  </n-carousel>
+</template>
+
+<style>
+.carousel-img {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>
diff --git a/src/carousel/demos/enUS/index.demo-entry.md b/src/carousel/demos/enUS/index.demo-entry.md
@@ -7,8 +7,8 @@ It's usually used to display good news.
 ```demo
 basic.vue
 arrow.vue
-dots.vue
 autoplay.vue
+dots.vue
 vertical.vue
 space-between.vue
 slides-per-view.vue
@@ -21,6 +21,7 @@ keyboard.vue
 mousewheel.vue
 simulate-drag.vue
 custom-arrow-and-dots.vue
+custom-card.vue
 ```
 
 ## API
@@ -29,27 +30,29 @@ custom-arrow-and-dots.vue
 
 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
-| autoplay | `boolean` | `false` | Whether to scroll automatically. |
+| autoplay | `boolean` | `false` | Whether to scroll automatically. |  |
 | centered-slides | `boolean` | `false` | Whether to center the current view carousel. | 2.24.0 |
 | current-index | `number` | `undefined` | current index. | 2.24.0 |
 | default-index | `number` | `0` | default index. | 2.24.0 |
-| direction | `'horizontal' \| 'vertical'` | `'horizontal'` | Carousel shows the direction. |
+| direction | `'horizontal' \| 'vertical'` | `'horizontal'` | Carousel shows the direction. |  |
 | dot-placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Dot placement in the panel. | 2.24.0 |
 | dot-type | `'dot' \| 'line'` | `'dot'` | Dot style. | 2.24.0 |
 | draggable | `boolean` | `false` | Whether to switch the carousel by dragging the mouse. | 2.24.0 |
 | effect | `'slide' \| 'fade' \| 'card' \| 'custom'` | `'slide'` | Transition effect when switching between carousel. | 2.24.0, `'card'` 2.24.2 |
-| interval | `number` | `5000` | Auto play interval (ms). |
+| interval | `number` | `5000` | Auto play interval (ms). |  |
 | keyboard | `boolean` | `false` | Whether to switch the carousel by pressing the key, it only works when the focus is on Dots. | 2.24.0 |
 | loop | `boolean` | `true` | Whether to loop. | 2.24.0 |
 | mousewheel | `boolean` | `false` | Whether to switch the carousel through the mouse wheel. | 2.24.0 |
+| next-slide-style | `object \| string` | `undefined` | Next slide's style. | NEXT_VERSION |
+| prev-slide-style | `object \| string` | `undefined` | Previous slide's style. | NEXT_VERSION |
 | show-arrow | `boolean` | `false` | Whether to show arrow buttons. | 2.24.0 |
 | show-dots | `boolean` | `true` | Whether to show dots. | 2.24.0 |
 | slides-per-view | `'auto' \| number` | `1` | Number of carousels displayed on per view. | 2.24.0 |
 | space-between | `number` | `0` | The spacing between the carousels. | 2.24.0 |
 | touchable | `boolean` | `true` | Whether to switch the carousel by touch. | 2.24.0 |
 | transition-style | `{ transitionDuration?: string, transitionTimingFunction?: string }` | `{ transitionDuration: '300ms' }` | The style of the transition effect. | 2.24.0 |
 | transition-props | `TransitionProps` | `undefined` | Custom transition effect properties, [reference](https://v3.vuejs.org/api/built-in-components.html#transition). | 2.24.0 |
-| trigger | `'click' \| 'hover'` | `'click'` | The method of manual switching. |
+| trigger | `'click' \| 'hover'` | `'click'` | The method of manual switching. |  |
 | on-update:current-index | `(currentIndex: number, lastIndex: number) => void` | `undefined` | Callback function when the current index changes. | 2.24.0 |
 
 ### Carousel Slots

diff --git a/src/carousel/demos/zhCN/custom-card.demo.vue b/src/carousel/demos/zhCN/custom-card.demo.vue
@@ -0,0 +1,49 @@
+<markdown>
+# 自定义卡片效果
+
+你可以使用 `next-slide-style` 和 `prev-slide-style` 来调整前后卡片的比例。
+</markdown>
+
+<template>
+  <n-carousel
+    effect="card"
+    prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
+    next-slide-style="transform: translateX(50%) translateZ(-800px);"
+    style="height: 240px"
+    :show-dots="false"
+  >
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
+      >
+    </n-carousel-item>
+  </n-carousel>
+</template>
+
+<style>
+.carousel-img {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>
diff --git a/src/carousel/demos/zhCN/index.demo-entry.md b/src/carousel/demos/zhCN/index.demo-entry.md
@@ -7,8 +7,8 @@
 ```demo
 basic.vue
 arrow.vue
-dots.vue
 autoplay.vue
+dots.vue
 vertical.vue
 space-between.vue
 slides-per-view.vue
@@ -21,6 +21,7 @@ keyboard.vue
 mousewheel.vue
 simulate-drag.vue
 custom-arrow-and-dots.vue
+custom-card.vue
 ```
 
 ## API
@@ -29,27 +30,29 @@ custom-arrow-and-dots.vue
 
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
-| autoplay | `boolean` | `false` | 是否自动播放 |
+| autoplay | `boolean` | `false` | 是否自动播放 |  |
 | centered-slides | `boolean` | `false` | 是否居中显示当前页轮播图 | 2.24.0 |
 | current-index | `number` | `undefined` | 当前显示页 | 2.24.0 |
 | default-index | `number` | `0` | 默认显示页 | 2.24.0 |
-| direction | `'horizontal' \| 'vertical'` | `'horizontal'` | 轮播图显示的方向 |
+| direction | `'horizontal' \| 'vertical'` | `'horizontal'` | 轮播图显示的方向 |  |
 | dot-placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | 轮播指示点位置 | 2.24.0 |
 | dot-type | `'dot' \| 'line'` | `'dot'` | 轮播指示点样式 | 2.24.0 |
 | draggable | `boolean` | `false` | 是否通过鼠标拖拽切换轮播图 | 2.24.0 |
 | effect | `'slide' \| 'fade' \| 'card' \| 'custom'` | `'slide'` | 轮播图切换时的过渡效果 | 2.24.0, `'card'` 2.24.2 |
-| interval | `number` | `5000` | 自动播放的间隔（ms） |
+| interval | `number` | `5000` | 自动播放的间隔（ms） |  |
 | keyboard | `boolean` | `false` | 是否通过按键切换轮播图，只有焦点在 Dots 上时才起作用 | 2.24.0 |
 | loop | `boolean` | `true` | 是否循环播放 | 2.24.0 |
 | mousewheel | `boolean` | `false` | 是否通过鼠标滚轮切换轮播图 | 2.24.0 |
+| next-slide-style | `object \| string` | `undefined` | 下一张轮播图的样式 | NEXT_VERSION |
+| prev-slide-style | `object \| string` | `undefined` | 上一张轮播图的样式 | NEXT_VERSION |
 | slides-per-view | `'auto' \| number` | `1` | 每一页显示的轮播图数量 | 2.24.0 |
 | space-between | `number` | `0` | 轮播图之间的间距 | 2.24.0 |
 | show-arrow | `boolean` | `false` | 是否显示箭头按钮 | 2.24.0 |
 | show-dots | `boolean` | `true` | 是否展示指示点 | 2.24.0 |
 | touchable | `boolean` | `true` | 是否通过触摸拖拽切换轮播图 | 2.24.0 |
 | transition-style | `{ transitionDuration?: string, transitionTimingFunction?: string }` | `{ transitionDuration: '300ms' }` | 过渡效果的样式 | 2.24.0 |
 | transition-props | `TransitionProps` | `undefined` | 自定义过渡效果属性，[参考 Vue 文档](https://v3.cn.vuejs.org/api/built-in-components.html#transition) | 2.24.0 |
-| trigger | `'click' \| 'hover'` | `'click'` | 触发切换的方式 |
+| trigger | `'click' \| 'hover'` | `'click'` | 触发切换的方式 |  |
 | on-update:current-index | `(currentIndex: number, lastIndex: number) => void` | `undefined` | 当前页变化时的回调函数 | 2.24.0 |
 
 ### Carousel Slots

diff --git a/src/carousel/src/Carousel.tsx b/src/carousel/src/Carousel.tsx
@@ -109,6 +109,8 @@ const carouselProps = {
   },
   transitionProps: Object as PropType<TransitionProps>,
   draggable: Boolean,
+  prevSlideStyle: Object as PropType<CSSProperties | string>,
+  nextSlideStyle: Object as PropType<CSSProperties | string>,
   touchable: {
     type: Boolean,
     default: true
@@ -516,7 +518,9 @@ export default defineComponent({
       getSlideStyle,
       addSlide,
       removeSlide,
-      onCarouselItemClick
+      onCarouselItemClick,
+      prevSlideStyleRef: toRef(props, 'prevSlideStyle'),
+      nextSlideStyleRef: toRef(props, 'nextSlideStyle')
     }
     provide(carouselMethodsInjectionKey, carouselMethods)
 

diff --git a/src/carousel/src/CarouselItem.tsx b/src/carousel/src/CarouselItem.tsx
@@ -61,6 +61,8 @@ export default defineComponent({
       isActive: isActiveRef,
       index: indexRef,
       style: styleRef,
+      prevSlideStyle: NCarousel.prevSlideStyleRef,
+      nextSlideStyle: NCarousel.nextSlideStyleRef,
       handleClick
     }
   },
@@ -90,7 +92,11 @@ export default defineComponent({
         tabindex="-1"
         data-index={index}
         aria-hidden={!isActive}
-        style={style}
+        style={[
+          style,
+          isPrev ? this.prevSlideStyle : '',
+          isNext ? this.nextSlideStyle : ''
+        ]}
         // @ts-expect-error
         onClickCapture={this.handleClick}
       >

diff --git a/src/carousel/src/interface.ts b/src/carousel/src/interface.ts
@@ -1,3 +1,4 @@
+import { CSSProperties, Ref } from 'vue'
 import { createInjectionKey } from '../../_utils'
 
 export const tuple = <T extends string[]>(...args: T): T => args
@@ -25,6 +26,8 @@ export interface CarouselMethodsInjection {
   addSlide: (slide?: HTMLElement) => void
   removeSlide: (slide?: HTMLElement) => void
   onCarouselItemClick: (index: number, event: MouseEvent) => void
+  prevSlideStyleRef: Ref<CSSProperties | string | undefined>
+  nextSlideStyleRef: Ref<CSSProperties | string | undefined>
 }
 export const carouselMethodsInjectionKey =
   createInjectionKey<CarouselMethodsInjection>('n-carousel-methods')

diff --git a/src/carousel/src/styles/index.cssr.ts b/src/carousel/src/styles/index.cssr.ts
@@ -315,9 +315,7 @@ export default cB('carousel', `
   cM('fade', [
     cE('slide', `
       position: absolute;
-      left: 50%;
       opacity: 0;
-      transform: translateX(-50%);
       transition-property: opacity;
     `, [
       cM('current', `
@@ -327,7 +325,7 @@ export default cB('carousel', `
   ]),
   cM('card', [
     cE('slides', `
-      perspective: 1200px;
+      perspective: 1000px;
     `),
     cE('slide', `
       position: absolute;