plain-design 1.0.0-beta.4 → 1.0.0-beta.6

package/src/pages/index/components/normal/DemoCard.tsx

@@ -1,176 +1,176 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, Card, Dropdown, DropdownOption, Icon, Tooltip} from "../../../../packages";
-
-export default designPage(() => {
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <Card title={'桃花庵歌'}>
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              <div>桃花坞里桃花庵</div>
-              <div>桃花庵里桃花仙</div>
-              <div>桃花仙人种桃树</div>
-              <div>又摘桃花换酒钱</div>
-            </>
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title={'小型卡片'}>
-        <Card title={'桃花庵歌'} mini width="225">
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              <div>桃花坞里桃花庵</div>
-              <div>桃花庵里桃花仙</div>
-              <div>桃花仙人种桃树</div>
-              <div>又摘桃花换酒钱</div>
-            </>
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title={'卡片阴影'}>
-        <Card title={'shadow=null'} shadow={null as any}>
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              无阴影
-            </>
-          }}
-        </Card>
-        <Card title={'shadow=normal'} shadow={'normal'}>
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              一直显示阴影
-            </>
-          }}
-        </Card>
-        <Card title={'shadow=hover'} shadow={'hover'}>
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              鼠标炫富显示阴影
-            </>
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title={'标题描述'}>
-        <Card title={'桃花庵歌'}>
-          {{
-            desc: () => '标题下面的描述',
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              <div>桃花坞里桃花庵</div>
-              <div>桃花庵里桃花仙</div>
-              <div>桃花仙人种桃树</div>
-              <div>又摘桃花换酒钱</div>
-            </>
-          }}
-        </Card>
-        <Card>
-          {{
-            head: () => <span>桃花庵歌 <Icon icon="pi-info-circle-fill"/></span>,
-            desc: () => <span>标题下面的描述 <Icon icon="pi-info-circle-fill"/></span>,
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              <div>桃花坞里桃花庵</div>
-              <div>桃花庵里桃花仙</div>
-              <div>桃花仙人种桃树</div>
-              <div>又摘桃花换酒钱</div>
-            </>
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title={'取消内边距'}>
-        <Card title={'桃花庵歌'} noPadding>
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              <div>桃花坞里桃花庵</div>
-              <div>桃花庵里桃花仙</div>
-              <div>桃花仙人种桃树</div>
-              <div>又摘桃花换酒钱</div>
-            </>
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title={'海报图'}>
-        <Card title={'圣诞之夜'} shadow={"hover"}>
-          {{
-            poster: () => <img src="https://img.zcool.cn/community/01acd9554beac2000001bf72509649.jpg@1280w_1l_2o_100sh.jpg" style={{ width: '100%', height: 'auto' }}/>,
-            desc: () => <>
-              <div>1. 有奖竞猜活动</div>
-              <div>2. 大转盘抽奖</div>
-              <div>3. 海量红包大礼</div>
-            </>,
-            operator: () => (
-              <Dropdown placement={'right'}>
-                {{
-                  reference: ({ open }: { open?: boolean | undefined | null }) => (
-                    <Button mode={'text'}>
-                      <span>更多</span>
-                      <Icon icon={open ? 'pi-up' : 'pi-down'}/>
-                    </Button>
-                  ),
-                  popper: () => <>
-                    <DropdownOption label={'分享'} icon={'pi-share-alt'} onClick={() => $message("分享")}/>
-                    <DropdownOption label={'收藏'} icon={'pi-star'} onClick={() => $message("收藏")}/>
-                    <DropdownOption label={'点赞'} icon={'pi-thumb-up'} onClick={() => $message("点赞")}/>
-                  </>
-                }}
-              </Dropdown>
-            )
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title="底部操作栏">
-        <Card title={'圣诞之夜'} shadow={'normal'}>
-          {{
-            default: () => <>
-              <div>1、有奖竞猜活动</div>
-              <div>2、大转盘抽奖</div>
-              <div>3、海量红包大礼</div>
-            </>,
-            operator: () => <>
-              <Dropdown placement={'right'}>
-                {{
-                  reference: ({ open }: { open?: boolean | undefined | null }) => (
-                    <Button mode={'text'}>
-                      <span>更多</span>
-                      <Icon icon={open ? 'pi-up' : 'pi-down'}/>
-                    </Button>
-                  ),
-                  popper: () => <>
-                    <DropdownOption label={'分享'} icon={'pi-share-alt'} onClick={() => $message("分享")}/>
-                    <DropdownOption label={'收藏'} icon={'pi-star'} onClick={() => $message("收藏")}/>
-                    <DropdownOption label={'点赞'} icon={'pi-thumb-up'} onClick={() => $message("点赞")}/>
-                  </>
-                }}
-              </Dropdown>
-            </>,
-            foot: () => <>
-              <Tooltip message={'分享'}>
-                <div className={'card-foot-button'}>
-                  <Icon icon={'pi-share-alt'}/>
-                </div>
-              </Tooltip>
-              <Tooltip message={'收藏'}>
-                <div className={'card-foot-button'}>
-                  <Icon icon={'pi-star'}/>
-                </div>
-              </Tooltip>
-              <Tooltip message={'点赞'}>
-                <div className={'card-foot-button'}>
-                  <Icon icon={'pi-thumb-up'}/>
-                </div>
-              </Tooltip>
-            </>
-          }}
-        </Card>
-      </DemoRow>
-    </div>
-  );
-});
+import {designPage} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {$message, Button, Card, Dropdown, DropdownOption, Icon, Tooltip} from "../../../../packages";
+
+export default designPage(() => {
+  return () => (
+    <div>
+      <DemoRow title={'基本用法'}>
+        <Card title={'桃花庵歌'}>
+          {{
+            operator: () => <Button label={'更多'} mode={'text'}/>,
+            default: () => <>
+              <div>桃花坞里桃花庵</div>
+              <div>桃花庵里桃花仙</div>
+              <div>桃花仙人种桃树</div>
+              <div>又摘桃花换酒钱</div>
+            </>
+          }}
+        </Card>
+      </DemoRow>
+      <DemoRow title={'小型卡片'}>
+        <Card title={'桃花庵歌'} mini width="225">
+          {{
+            operator: () => <Button label={'更多'} mode={'text'}/>,
+            default: () => <>
+              <div>桃花坞里桃花庵</div>
+              <div>桃花庵里桃花仙</div>
+              <div>桃花仙人种桃树</div>
+              <div>又摘桃花换酒钱</div>
+            </>
+          }}
+        </Card>
+      </DemoRow>
+      <DemoRow title={'卡片阴影'}>
+        <Card title={'shadow=null'} shadow={null as any}>
+          {{
+            operator: () => <Button label={'更多'} mode={'text'}/>,
+            default: () => <>
+              无阴影
+            </>
+          }}
+        </Card>
+        <Card title={'shadow=normal'} shadow={'normal'}>
+          {{
+            operator: () => <Button label={'更多'} mode={'text'}/>,
+            default: () => <>
+              一直显示阴影
+            </>
+          }}
+        </Card>
+        <Card title={'shadow=hover'} shadow={'hover'}>
+          {{
+            operator: () => <Button label={'更多'} mode={'text'}/>,
+            default: () => <>
+              鼠标炫富显示阴影
+            </>
+          }}
+        </Card>
+      </DemoRow>
+      <DemoRow title={'标题描述'}>
+        <Card title={'桃花庵歌'}>
+          {{
+            desc: () => '标题下面的描述',
+            operator: () => <Button label={'更多'} mode={'text'}/>,
+            default: () => <>
+              <div>桃花坞里桃花庵</div>
+              <div>桃花庵里桃花仙</div>
+              <div>桃花仙人种桃树</div>
+              <div>又摘桃花换酒钱</div>
+            </>
+          }}
+        </Card>
+        <Card>
+          {{
+            head: () => <span>桃花庵歌 <Icon icon="pi-info-circle-fill"/></span>,
+            desc: () => <span>标题下面的描述 <Icon icon="pi-info-circle-fill"/></span>,
+            operator: () => <Button label={'更多'} mode={'text'}/>,
+            default: () => <>
+              <div>桃花坞里桃花庵</div>
+              <div>桃花庵里桃花仙</div>
+              <div>桃花仙人种桃树</div>
+              <div>又摘桃花换酒钱</div>
+            </>
+          }}
+        </Card>
+      </DemoRow>
+      <DemoRow title={'取消内边距'}>
+        <Card title={'桃花庵歌'} noPadding>
+          {{
+            operator: () => <Button label={'更多'} mode={'text'}/>,
+            default: () => <>
+              <div>桃花坞里桃花庵</div>
+              <div>桃花庵里桃花仙</div>
+              <div>桃花仙人种桃树</div>
+              <div>又摘桃花换酒钱</div>
+            </>
+          }}
+        </Card>
+      </DemoRow>
+      <DemoRow title={'海报图'}>
+        <Card title={'圣诞之夜'} shadow={"hover"}>
+          {{
+            poster: () => <img src="https://img.zcool.cn/community/01acd9554beac2000001bf72509649.jpg@1280w_1l_2o_100sh.jpg" style={{ width: '100%', height: 'auto' }}/>,
+            desc: () => <>
+              <div>1. 有奖竞猜活动</div>
+              <div>2. 大转盘抽奖</div>
+              <div>3. 海量红包大礼</div>
+            </>,
+            operator: () => (
+              <Dropdown placement={'right'}>
+                {{
+                  reference: ({ open }: { open?: boolean | undefined | null }) => (
+                    <Button mode={'text'}>
+                      <span>更多</span>
+                      <Icon icon={open ? 'pi-up' : 'pi-down'}/>
+                    </Button>
+                  ),
+                  popper: () => <>
+                    <DropdownOption label={'分享'} icon={'pi-share-alt'} onClick={() => $message("分享")}/>
+                    <DropdownOption label={'收藏'} icon={'pi-star'} onClick={() => $message("收藏")}/>
+                    <DropdownOption label={'点赞'} icon={'pi-thumb-up'} onClick={() => $message("点赞")}/>
+                  </>
+                }}
+              </Dropdown>
+            )
+          }}
+        </Card>
+      </DemoRow>
+      <DemoRow title="底部操作栏">
+        <Card title={'圣诞之夜'} shadow={'normal'}>
+          {{
+            default: () => <>
+              <div>1、有奖竞猜活动</div>
+              <div>2、大转盘抽奖</div>
+              <div>3、海量红包大礼</div>
+            </>,
+            operator: () => <>
+              <Dropdown placement={'right'}>
+                {{
+                  reference: ({ open }: { open?: boolean | undefined | null }) => (
+                    <Button mode={'text'}>
+                      <span>更多</span>
+                      <Icon icon={open ? 'pi-up' : 'pi-down'}/>
+                    </Button>
+                  ),
+                  popper: () => <>
+                    <DropdownOption label={'分享'} icon={'pi-share-alt'} onClick={() => $message("分享")}/>
+                    <DropdownOption label={'收藏'} icon={'pi-star'} onClick={() => $message("收藏")}/>
+                    <DropdownOption label={'点赞'} icon={'pi-thumb-up'} onClick={() => $message("点赞")}/>
+                  </>
+                }}
+              </Dropdown>
+            </>,
+            foot: () => <>
+              <Tooltip message={'分享'}>
+                <div className={'card-foot-button'}>
+                  <Icon icon={'pi-share-alt'}/>
+                </div>
+              </Tooltip>
+              <Tooltip message={'收藏'}>
+                <div className={'card-foot-button'}>
+                  <Icon icon={'pi-star'}/>
+                </div>
+              </Tooltip>
+              <Tooltip message={'点赞'}>
+                <div className={'card-foot-button'}>
+                  <Icon icon={'pi-thumb-up'}/>
+                </div>
+              </Tooltip>
+            </>
+          }}
+        </Card>
+      </DemoRow>
+    </div>
+  );
+});

package/src/pages/index/components/normal/DemoCarousel.tsx

@@ -1,125 +1,125 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Carousel, CarouselGroup} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export default designPage(() => {
-
-  const publicItemStyles = {
-    color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px'
-  };
-
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <CarouselGroup>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-        </CarouselGroup>
-      </DemoRow>
-      <DemoRow title={'两个元素，三个元素'}>
-        <CarouselGroup style={{ width: '400px', display: 'inline-flex' }}>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-        </CarouselGroup>
-        <CarouselGroup style={{ width: '400px', display: 'inline-flex' }}>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-        </CarouselGroup>
-      </DemoRow>
-      <DemoRow title={'禁用前后按钮'}>
-        <CarouselGroup disabledOperator>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-        </CarouselGroup>
-      </DemoRow>
-      <DemoRow title={'指示器'}>
-        <DemoLine title={'禁用指示器'}>
-          <CarouselGroup disabledIndicator style={{ width: '400px' }}>
-            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-          </CarouselGroup>
-        </DemoLine>
-        <DemoLine title={'鼠标悬浮激活指示器'}>
-          <CarouselGroup style={{ width: '400px' }} indicatorTrigger={'hover'}>
-            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-          </CarouselGroup>
-        </DemoLine>
-        <DemoLine title={'自定义指示器'}>
-          <CarouselGroup style={{ width: '400px' }} indicatorTrigger={'hover'} v-slots={{
-            default: () => <>
-              <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-              <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-              <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-              <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-            </>,
-            indicator: ({ active, index }) => (
-              <div key={index} style={{ marginRight: '8px', height: '5px', width: '5px', backgroundColor: `rgba(255,255,255,${active ? '1' : '0.5'})` }}/>
-            )
-          }}/>
-        </DemoLine>
-      </DemoRow>
-      <DemoRow title={'cover覆盖内容'}>
-        <CarouselGroup v-slots={{
-          default: () => <>
-            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-          </>,
-          cover: () => (
-            <div style={{ pointerEvents: 'none', textAlign: 'center', padding: '20px', color: 'white', boxSizing: 'border-box' }}>
-              this is cover content
-            </div>
-          )
-        }}/>
-      </DemoRow>
-
-      <DemoRow title={'自动播放'}>
-        <DemoLine title={'禁用自动播放'}>
-          <CarouselGroup autoplay={0} style={{ width: '400px' }}>
-            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-          </CarouselGroup>
-        </DemoLine>
-        <DemoLine title={'时间间隔为6s'}>
-          <CarouselGroup autoplay={6000} style={{ width: '400px' }}>
-            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-          </CarouselGroup>
-        </DemoLine>
-      </DemoRow>
-
-      <DemoRow title={'纵向切换'}>
-        <CarouselGroup vertical>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-        </CarouselGroup>
-      </DemoRow>
-      <DemoRow title={'卡片形式切换'}>
-        <CarouselGroup card autoplay={0} style={{ width: '500px' }}>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-        </CarouselGroup>
-      </DemoRow>
-    </div>
-  );
-});
+import {designPage} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {Carousel, CarouselGroup} from "../../../../packages";
+import {DemoLine} from "../../Demo/DemoLine";
+
+export default designPage(() => {
+
+  const publicItemStyles = {
+    color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px'
+  };
+
+  return () => (
+    <div>
+      <DemoRow title={'基本用法'}>
+        <CarouselGroup>
+          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
+        </CarouselGroup>
+      </DemoRow>
+      <DemoRow title={'两个元素，三个元素'}>
+        <CarouselGroup style={{ width: '400px', display: 'inline-flex' }}>
+          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+        </CarouselGroup>
+        <CarouselGroup style={{ width: '400px', display: 'inline-flex' }}>
+          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+        </CarouselGroup>
+      </DemoRow>
+      <DemoRow title={'禁用前后按钮'}>
+        <CarouselGroup disabledOperator>
+          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
+        </CarouselGroup>
+      </DemoRow>
+      <DemoRow title={'指示器'}>
+        <DemoLine title={'禁用指示器'}>
+          <CarouselGroup disabledIndicator style={{ width: '400px' }}>
+            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
+          </CarouselGroup>
+        </DemoLine>
+        <DemoLine title={'鼠标悬浮激活指示器'}>
+          <CarouselGroup style={{ width: '400px' }} indicatorTrigger={'hover'}>
+            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
+          </CarouselGroup>
+        </DemoLine>
+        <DemoLine title={'自定义指示器'}>
+          <CarouselGroup style={{ width: '400px' }} indicatorTrigger={'hover'} v-slots={{
+            default: () => <>
+              <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+              <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+              <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+              <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
+            </>,
+            indicator: ({ active, index }) => (
+              <div key={index} style={{ marginRight: '8px', height: '5px', width: '5px', backgroundColor: `rgba(255,255,255,${active ? '1' : '0.5'})` }}/>
+            )
+          }}/>
+        </DemoLine>
+      </DemoRow>
+      <DemoRow title={'cover覆盖内容'}>
+        <CarouselGroup v-slots={{
+          default: () => <>
+            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
+          </>,
+          cover: () => (
+            <div style={{ pointerEvents: 'none', textAlign: 'center', padding: '20px', color: 'white', boxSizing: 'border-box' }}>
+              this is cover content
+            </div>
+          )
+        }}/>
+      </DemoRow>
+
+      <DemoRow title={'自动播放'}>
+        <DemoLine title={'禁用自动播放'}>
+          <CarouselGroup autoplay={0} style={{ width: '400px' }}>
+            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
+          </CarouselGroup>
+        </DemoLine>
+        <DemoLine title={'时间间隔为6s'}>
+          <CarouselGroup autoplay={6000} style={{ width: '400px' }}>
+            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
+          </CarouselGroup>
+        </DemoLine>
+      </DemoRow>
+
+      <DemoRow title={'纵向切换'}>
+        <CarouselGroup vertical>
+          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
+        </CarouselGroup>
+      </DemoRow>
+      <DemoRow title={'卡片形式切换'}>
+        <CarouselGroup card autoplay={0} style={{ width: '500px' }}>
+          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
+          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
+          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
+          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
+        </CarouselGroup>
+      </DemoRow>
+    </div>
+  );
+});