diff --git a/docs/example/Carousel/demos/autoHeight.tsx b/docs/example/Carousel/demos/autoHeight.tsx index 6044c39e..29cc4604 100644 --- a/docs/example/Carousel/demos/autoHeight.tsx +++ b/docs/example/Carousel/demos/autoHeight.tsx @@ -4,7 +4,6 @@ */ import { Carousel } from '@banana-ui/react'; -import React from 'react'; export default function autoHeight() { const style = ` diff --git a/docs/example/Carousel/demos/autoplay.tsx b/docs/example/Carousel/demos/autoplay.tsx index 0c233342..31cd20f3 100644 --- a/docs/example/Carousel/demos/autoplay.tsx +++ b/docs/example/Carousel/demos/autoplay.tsx @@ -4,7 +4,6 @@ */ import { Carousel } from '@banana-ui/react'; -import React from 'react'; export default function autoplay() { const style = ` @@ -20,7 +19,7 @@ export default function autoplay() { `; return ( -
+ <>
1
@@ -29,6 +28,6 @@ export default function autoplay() {
4
5
 -
+ ); } diff --git a/docs/example/Carousel/demos/demo0.tsx b/docs/example/Carousel/demos/basicUsage.tsx similarity index 87% rename from docs/example/Carousel/demos/demo0.tsx rename to docs/example/Carousel/demos/basicUsage.tsx index c1e24031..c53423ca 100644 --- a/docs/example/Carousel/demos/demo0.tsx +++ b/docs/example/Carousel/demos/basicUsage.tsx @@ -3,9 +3,8 @@ */ import { Carousel } from '@banana-ui/react'; -import React from 'react'; -export default function CarouselDemo0() { +export default function BasicUsage() { const style = ` .demo-slide { height: 300px; @@ -19,7 +18,7 @@ export default function CarouselDemo0() { `; return ( -
+ <>
1
@@ -28,6 +27,6 @@ export default function CarouselDemo0() {
4
5
 -
+ ); } diff --git a/docs/example/Carousel/demos/demo3.tsx b/docs/example/Carousel/demos/demo3.tsx index 274d1d83..31f9a55d 100644 --- a/docs/example/Carousel/demos/demo3.tsx +++ b/docs/example/Carousel/demos/demo3.tsx @@ -4,7 +4,6 @@ */ import { Carousel } from '@banana-ui/react'; -import React from 'react'; export default function CarouselDemo3() { const style = ` diff --git a/docs/example/Carousel/demos/disableDrag.tsx b/docs/example/Carousel/demos/disableDrag.tsx index 55032777..edbe4d3c 100644 --- a/docs/example/Carousel/demos/disableDrag.tsx +++ b/docs/example/Carousel/demos/disableDrag.tsx @@ -4,7 +4,6 @@ */ import { Carousel } from '@banana-ui/react'; -import React from 'react'; export default function disableDrag() { const style = ` @@ -20,7 +19,7 @@ export default function disableDrag() { `; return ( -
+ <>
1
@@ -29,6 +28,6 @@ export default function disableDrag() {
4
5
 -
+ ); } diff --git a/docs/example/Carousel/demos/disableFill.tsx b/docs/example/Carousel/demos/disableFill.tsx index 77ac57a2..6b6181a4 100644 --- a/docs/example/Carousel/demos/disableFill.tsx +++ b/docs/example/Carousel/demos/disableFill.tsx @@ -4,7 +4,6 @@ */ import { Carousel, Divider } from '@banana-ui/react'; -import React from 'react'; export default function disableFill() { const style = ` @@ -20,7 +19,7 @@ export default function disableFill() { `; return ( -
+ <>
1
@@ -33,6 +32,6 @@ export default function disableFill() {
1
2
 -
+ ); } diff --git a/docs/example/Carousel/demos/gap.tsx b/docs/example/Carousel/demos/gap.tsx index ba04f05f..4a2100da 100644 --- a/docs/example/Carousel/demos/gap.tsx +++ b/docs/example/Carousel/demos/gap.tsx @@ -4,7 +4,6 @@ */ import { Carousel } from '@banana-ui/react'; -import React from 'react'; export default function gap() { const style = ` @@ -20,7 +19,7 @@ export default function gap() { `; return ( -
+ <>
1
@@ -29,6 +28,6 @@ export default function gap() {
4
5
 -
+ ); } diff --git a/docs/example/Carousel/demos/indicator.tsx b/docs/example/Carousel/demos/indicator.tsx index 23e34b97..0823f5b1 100644 --- a/docs/example/Carousel/demos/indicator.tsx +++ b/docs/example/Carousel/demos/indicator.tsx @@ -4,7 +4,6 @@ */ import { Carousel } from '@banana-ui/react'; -import React from 'react'; export default function Indicator() { const style = ` @@ -20,7 +19,7 @@ export default function Indicator() { `; return ( -
+ <>
1
@@ -29,6 +28,6 @@ export default function Indicator() {
4
5
 -
+ ); } diff --git a/docs/example/Carousel/demos/demo1.tsx b/docs/example/Carousel/demos/loop.tsx similarity index 88% rename from docs/example/Carousel/demos/demo1.tsx rename to docs/example/Carousel/demos/loop.tsx index d32a67b5..e6cef9be 100644 --- a/docs/example/Carousel/demos/demo1.tsx +++ b/docs/example/Carousel/demos/loop.tsx @@ -4,9 +4,8 @@ */ import { Carousel } from '@banana-ui/react'; -import React from 'react'; -export default function CarouselDemo1() { +export default function Loop() { const style = ` .demo-slide { height: 300px; @@ -20,7 +19,7 @@ export default function CarouselDemo1() { `; return ( -
+ <>
1
@@ -29,6 +28,6 @@ export default function CarouselDemo1() {
4
5
 -
+ ); } diff --git a/docs/example/Carousel/demos/navigation.tsx b/docs/example/Carousel/demos/navigation.tsx index 443b5a78..12737adc 100644 --- a/docs/example/Carousel/demos/navigation.tsx +++ b/docs/example/Carousel/demos/navigation.tsx @@ -4,7 +4,6 @@ */ import { Carousel } from '@banana-ui/react'; -import React from 'react'; export default function Navigation() { const style = ` @@ -20,7 +19,7 @@ export default function Navigation() { `; return ( -
+ <>
1
@@ -29,6 +28,6 @@ export default function Navigation() {
4
5
 -
+ ); } diff --git a/docs/example/Carousel/demos/demo2.tsx b/docs/example/Carousel/demos/slidesPerView.tsx similarity index 91% rename from docs/example/Carousel/demos/demo2.tsx rename to docs/example/Carousel/demos/slidesPerView.tsx index 08e9a557..20510890 100644 --- a/docs/example/Carousel/demos/demo2.tsx +++ b/docs/example/Carousel/demos/slidesPerView.tsx @@ -4,9 +4,8 @@ */ import { Carousel } from '@banana-ui/react'; -import React from 'react'; -export default function CarouselDemo2() { +export default function SlidesPerView() { const style = ` .demo-slide { height: 300px; diff --git a/docs/example/Carousel/demos/useRef.tsx b/docs/example/Carousel/demos/useRef.tsx index 197f21a0..d3e7e24f 100644 --- a/docs/example/Carousel/demos/useRef.tsx +++ b/docs/example/Carousel/demos/useRef.tsx @@ -1,12 +1,13 @@ -/* eslint-disable @typescript-eslint/no-unsafe-return */ -/* eslint-disable @typescript-eslint/no-unsafe-call */ /** * title: 使用useRef手动改变currentIndex * debug: true */ +/* eslint-disable @typescript-eslint/no-unsafe-return */ +/* eslint-disable @typescript-eslint/no-unsafe-call */ + import { Button, Carousel } from '@banana-ui/react'; -import React, { useRef } from 'react'; +import { useRef } from 'react'; export default function CarouselDemo0() { const carousel = useRef(null); @@ -24,7 +25,7 @@ export default function CarouselDemo0() { `; return ( -
+ <>
1
@@ -41,6 +42,6 @@ export default function CarouselDemo0() { -
+ ); } diff --git a/docs/example/Carousel/index.md b/docs/example/Carousel/index.md index 4ec8a374..9d8b79ff 100644 --- a/docs/example/Carousel/index.md +++ b/docs/example/Carousel/index.md @@ -14,9 +14,9 @@ group: 组件 ## 代码演示 - - - + + + @@ -26,3 +26,67 @@ group: 组件 + +## 属性 - Attributes & Properties + +| 属性 | 说明 | 类型 | 默认值 | +| ---------------------------------------------------- | --------------------------------------------------------------------------------------------- | --------- | ------ | +| loop | 是否循环 | `boolean` | false | +| slidesPerView
(slides-per-view) | 同时显示的轮播图数量 | `number` | 1 | +| autoplay | 是否自动播放 | `boolean` | false | +| autoplayDelay
(autoplay-delay) | 自动播放的间隔时间，单位为毫秒 | `number` | 3000 | +| noPauseOnMouseEnter
(no-pause-on-mouse-enter) | 默认情况下，鼠标移入后会暂停自动播放，传入此属性可以取消这个行为 | `boolean` | false | +| disableDrag
(disable-drag) | 是否禁用拖拽 | `boolean` | false | +| navigation | 是否显示前进后退按钮 | `boolean` | false | +| gap | 轮播图之间的间隔 | `number` | 0 | +| disableFill
(disable-fill) | 默认情况下，当你传入的轮播图个数小于 slidesPerView 时，会自动填充，传入此属性可以取消这个行为 | `boolean` | false | +| autoHeight | 是否自动调整高度 | `boolean` | false | +| indicator | 是否显示指示器（默认为小圆点） | `boolean` | false | + +## 方法 - Methods + +| 方法 | 说明 | 参数 | +| ------------------- | ------------------ | ------------------- | +| prev() | 切换到上一张轮播图 | - | +| next() | 切换到下一张轮播图 | - | +| goto(index: number) | 切换到指定的轮播图 | index: 轮播图的索引 | +| calcHeight() | 重新计算并修改高度 | - | + +## 事件 - Events + +| 事件 | 说明 | Event Detail | +| ------ | ---------------- | -------------------------- | +| change | 轮播图切换时触发 | `{ currentIndex: number }` | + +## 插槽 - Slots + +| 插槽 | 说明 | +| ----------- | --------------- | +| (default) | 轮播图的内容 | +| prev-button | 切换按钮-上一张 | +| next-button | 切换按钮-下一张 | + +## CSS Parts + +| Part | 说明 | +| ---------------------------- | -------------------- | +| base | 包裹组件的容器 | +| external-wrapper | 轮播图内容的外层容器 | +| slides-wrapper | 轮播图内容的容器 | +| slide | 轮播图内容的默认插槽 | +| indicators | 指示器的容器 | +| indicator | 指示器 | +| indicator--active | 激活状态的指示器 | +| navigation-buttons | 切换按钮 | +| navigation-buttons--disabled | 切换按钮-禁用状态 | +| navigation-button--previous | 切换按钮-上一张 | +| navigation-button--next | 切换按钮-下一张 | + +## 样式变量 + +| 变量 | 说明 | 默认值 | +| ------------------------------------- | ------------------------------------------------- | ---------------------------------- | +| --banana-carousel-transition-duration | 切换动画和调整高度时动画的持续时间 | 250ms | +| --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) | diff --git a/packages/banana/src/carousel/index.styles.ts b/packages/banana/src/carousel/index.styles.ts index a3e23e12..629c46bc 100644 --- a/packages/banana/src/carousel/index.styles.ts +++ b/packages/banana/src/carousel/index.styles.ts @@ -28,6 +28,8 @@ export default [ .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); } @@ -36,6 +38,8 @@ export default [ } .slides-wrapper ::slotted(*) { + /* This variable should not be used directly, use the slidesPerView property instead */ + /* DO NOT PUT IT IN THE DOCUMENTATION */ width: calc( (100% - (var(--banana-carousel-slidesPerView) - 1) * var(--banana-carousel-gap) * 1px) / var(--banana-carousel-slidesPerView) diff --git a/public/Carousel/autoHeight.html b/public/Carousel/autoHeight.html new file mode 100644 index 00000000..921b0c44 --- /dev/null +++ b/public/Carousel/autoHeight.html @@ -0,0 +1,26 @@ + + +
+ +
1
+
2
+
3
+
4
+
5
+ +
\ No newline at end of file diff --git a/public/Carousel/autoplay.html b/public/Carousel/autoplay.html new file mode 100644 index 00000000..62da610c --- /dev/null +++ b/public/Carousel/autoplay.html @@ -0,0 +1,19 @@ + + + +
1
+
2
+
3
+
4
+
5
+ \ No newline at end of file diff --git a/public/Carousel/basicUsage.html b/public/Carousel/basicUsage.html new file mode 100644 index 00000000..4f87a227 --- /dev/null +++ b/public/Carousel/basicUsage.html @@ -0,0 +1,19 @@ + + + +
1
+
2
+
3
+
4
+
5
+ \ No newline at end of file diff --git a/public/Carousel/disableDrag.html b/public/Carousel/disableDrag.html new file mode 100644 index 00000000..b04ddd27 --- /dev/null +++ b/public/Carousel/disableDrag.html @@ -0,0 +1,19 @@ + + + +
1
+
2
+
3
+
4
+
5
+ \ No newline at end of file diff --git a/public/Carousel/disableFill.html b/public/Carousel/disableFill.html new file mode 100644 index 00000000..3b83dd6d --- /dev/null +++ b/public/Carousel/disableFill.html @@ -0,0 +1,23 @@ + + + +
1
+
2
+ + + + + +
1
+
2
+ \ No newline at end of file diff --git a/public/Carousel/gap.html b/public/Carousel/gap.html new file mode 100644 index 00000000..f8ac5174 --- /dev/null +++ b/public/Carousel/gap.html @@ -0,0 +1,19 @@ + + + +
1
+
2
+
3
+
4
+
5
+ \ No newline at end of file diff --git a/public/Carousel/indicator.html b/public/Carousel/indicator.html new file mode 100644 index 00000000..b8a93cee --- /dev/null +++ b/public/Carousel/indicator.html @@ -0,0 +1,19 @@ + + + +
1
+
2
+
3
+
4
+
5
+ \ No newline at end of file diff --git a/public/Carousel/loop.html b/public/Carousel/loop.html new file mode 100644 index 00000000..af04ce83 --- /dev/null +++ b/public/Carousel/loop.html @@ -0,0 +1,19 @@ + + + +
1
+
2
+
3
+
4
+
5
+ \ No newline at end of file diff --git a/public/Carousel/navigation.html b/public/Carousel/navigation.html new file mode 100644 index 00000000..f659ef49 --- /dev/null +++ b/public/Carousel/navigation.html @@ -0,0 +1,19 @@ + + + +
1
+
2
+
3
+
4
+
5
+ \ No newline at end of file diff --git a/public/Carousel/slidesPerView.html b/public/Carousel/slidesPerView.html new file mode 100644 index 00000000..15f44cf6 --- /dev/null +++ b/public/Carousel/slidesPerView.html @@ -0,0 +1,19 @@ + + + +
1
+
2
+
3
+
4
+
5
+ \ No newline at end of file