feat(carousel): add vertical mode for carousel (#137)

* feat(carousel): add vertical mode for carousel

* fix: change for code reviews

* fix: change for code reviews

* chore: new version

* docs(carousel): add html source code for vertical

.changeset/hot-candles-fly.md

@@ -0,0 +1,6 @@
+---
+'@banana-ui/banana': patch
+'@banana-ui/react': patch
+---
+
+add vertical mode for carousel

docs/example/Carousel/demos/vertical.tsx

@@ -0,0 +1,35 @@
+/**
+ * title: 垂直展示
+ * description: 当需要垂直展示时，需要手动指定容器高度(设置对应css变量`--banana-carousel-vertical-height`)
+ */
+
+import { Carousel } from '@banana-ui/react';
+
+export default function Vertical() {
+  const style = `
+    .demo-slide--vertical {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(to bottom right, #5193e9, #0e61cd);
+      color: #fff;
+      font-size: 48px;
+    }
+    .container {
+      --banana-carousel-vertical-height: 300px;
+    }
+  `;
+
+  return (
+    <>
+      <style>{style}</style>
+      <Carousel className="container" vertical>
+        <div className="demo-slide--vertical">1</div>
+        <div className="demo-slide--vertical">2</div>
+        <div className="demo-slide--vertical">3</div>
+        <div className="demo-slide--vertical">4</div>
+        <div className="demo-slide--vertical">5</div>
+      </Carousel>
+    </>
+  );
+}

docs/example/Carousel/index.md

@@ -26,6 +26,7 @@ group: 组件
 <code src="./demos/disableFill.tsx"></code>
 <code src="./demos/useRef.tsx"></code>
 <code src="./demos/autoHeight.tsx"></code>
+<code src="./demos/vertical.tsx"></code>
 
 ## 属性 - Attributes & Properties
 
@@ -42,6 +43,7 @@ group: 组件
 | disableFill <br /> (disable-fill)                    | 默认情况下，当你传入的轮播图个数小于 slidesPerView 时，会自动填充，传入此属性可以取消这个行为 | `boolean` | false  |
 | autoHeight                                           | 是否自动调整高度                                                                              | `boolean` | false  |
 | indicator                                            | 是否显示指示器（默认为小圆点）                                                                | `boolean` | false  |
+| vertical                                             | 是否垂直展示                                                                                  | `boolean` | false  |
 
 ## 方法 - Methods
 
@@ -90,3 +92,4 @@ group: 组件
 | --banana-carousel-indicator-gap       | 指示器之间的间隔                                  | `--banana-carousel-indicator-size` |
 | --banana-carousel-indicator-size      | 指示器的大小                                      | 8px                                |
 | --banana-carousel-indicator-color     | 指示器的颜色（非激活状态的指示器`opacity`为 0.5） | rgba(46, 50, 56, 1)                |
+| --banana-carousel-vertical-height     | 垂直展示时，需要指定容器的高度                    | 100%                               |

packages/banana/src/carousel/index.styles.ts

@@ -25,19 +25,27 @@ export default [
       transition: height var(--banana-carousel-transition-duration, ${unsafeCSS(Var.TransitionNormal)});
     }
 
+    .external-wrapper--vertical {
+      height: var(--banana-carousel-vertical-height, 100%);
+    }
+
     .slides-wrapper {
       display: flex;
       transition: transform var(--banana-carousel-transition-duration, ${unsafeCSS(Var.TransitionNormal)});
       /* This variable should not be used directly, use the gap property instead */
       /* DO NOT PUT IT IN THE DOCUMENTATION */
       gap: calc(var(--banana-carousel-gap, 0) * 1px);
     }
+    .slides-wrapper--vertical {
+      flex-direction: column;
+      height: 100%;
+    }
 
     .slides-wrapper.no-transition {
       transition-duration: 0ms;
     }
 
-    .slides-wrapper ::slotted(*) {
+    .slides-wrapper--normal ::slotted(*) {
       /* This variable should not be used directly, use the slidesPerView property instead */
       /* DO NOT PUT IT IN THE DOCUMENTATION */
       width: calc(
@@ -49,10 +57,20 @@ export default [
       flex-shrink: 0;
     }
 
+    .slides-wrapper--vertical ::slotted(*) {
+      /* This variable should not be used directly, use the slidesPerView property instead */
+      /* DO NOT PUT IT IN THE DOCUMENTATION */
+      height: calc(
+        (100% - (var(--banana-carousel-slidesPerView) - 1) * var(--banana-carousel-gap) * 1px) /
+          var(--banana-carousel-slidesPerView)
+      );
+      width: 100%;
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+
     .navigation-buttons {
       position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
       margin: 0;
       padding: 0;
       border: none;
@@ -63,6 +81,16 @@ export default [
       z-index: 1;
     }
 
+    .navigation-button--normal {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .navigation-button--vertical {
+      left: 50%;
+      transform: translateX(-50%) rotate(90deg);
+    }
+
     .navigation-button--disabled {
       opacity: 0.4;
       cursor: default;
@@ -72,13 +100,19 @@ export default [
       background-color: rgba(${unsafeCSS(Colors.Gray2)}, 0.5);
     }
 
-    .navigation-button--previous {
+    .navigation-button--previous__normal {
       left: 10px;
     }
+    .navigation-button--previous__vertical {
+      top: 10px;
+    }
 
-    .navigation-button--next {
+    .navigation-button--next__normal {
       right: 10px;
     }
+    .navigation-button--next__vertical {
+      bottom: 10px;
+    }
 
     .default-prev-icon,
     .default-next-icon {
@@ -90,9 +124,6 @@ export default [
 
     .indicators {
       position: absolute;
-      bottom: 16px;
-      left: 50%;
-      transform: translateX(-50%);
       margin: 0;
       padding: 0;
       list-style: none;
@@ -102,6 +133,19 @@ export default [
       z-index: 1;
     }
 
+    .indicators--normal {
+      bottom: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .indicators--vertical {
+      right: 16px;
+      bottom: 50%;
+      transform: translateY(50%);
+      flex-direction: column;
+    }
+
     .indicator {
       width: var(--banana-carousel-indicator-size, 8px);
       height: var(--banana-carousel-indicator-size, 8px);