plain-design 1.0.0-beta.34 → 1.0.0-beta.37

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

@@ -1,230 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Carousel, CarouselItem} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export default designPage(() => {
-
-  const publicItemStyles = {
-    color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px'
-  };
-
-  const state = reactive({
-    currentItem: undefined as any,
-    currentItem2: undefined as any
-  });
-
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <p>Carousel有子元素自动撑开高度，支持无限轮播</p>
-        <Carousel largeSwitchButton autoPlay={0}>
-          <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-        </Carousel>
-      </DemoRow>
-      <DemoRow title={'两个元素，三个元素'}>
-        <Carousel style={{ width: '400px', display: 'inline-flex' }} autoPlay={0}>
-          <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-        </Carousel>
-        <Carousel style={{ width: '400px', display: 'inline-flex' }} autoPlay={0}>
-          <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-        </Carousel>
-      </DemoRow>
-      <DemoRow title={'禁用前后按钮'}>
-        <Carousel switchButton={false}>
-          <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-        </Carousel>
-      </DemoRow>
-      <DemoRow title={'禁用拂动'}>
-        <p>只可以通过指示器或者切换按钮切换内容，但是此时可以选择页面中的文本</p>
-        <Carousel disableSwiper>
-          <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-        </Carousel>
-      </DemoRow>
-      <DemoRow title={'指示器'}>
-        <DemoLine title={'禁用指示器'}>
-          <Carousel noIndicator style={{ width: '400px' }}>
-            <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-          </Carousel>
-        </DemoLine>
-        <DemoLine title={'鼠标悬浮激活指示器'}>
-          <Carousel style={{ width: '400px' }} indicatorTrigger={'hover'}>
-            <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-          </Carousel>
-        </DemoLine>
-        <DemoLine title={'圆点指示器'}>
-          <Carousel style={{ width: '400px' }} indicatorStyle="dot">
-            <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-          </Carousel>
-        </DemoLine>
-        <DemoLine title={'文字指示器'}>
-          <Carousel style={{ width: '400px' }} indicatorStyle="text">
-            <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-          </Carousel>
-        </DemoLine>
-        <DemoLine title={'自定义指示器'}>
-          <Carousel style={{ width: '400px' }} indicatorTrigger={'hover'} v-slots={{
-            default: () => <>
-              <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-              <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-              <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-              <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-            </>,
-            indicator: ({ activeIndex }) => (
-              <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: '3', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: '16px' }}>
-                {new Array(4).fill(1).map((_, index) => (
-                  <div key={index} style={{ marginRight: '8px', height: '5px', width: '5px', backgroundColor: `rgba(255,255,255,${activeIndex === index ? '1' : '0.5'})` }}/>
-                ))}
-              </div>
-            )
-          }}/>
-        </DemoLine>
-      </DemoRow>
-      <DemoRow title={'cover覆盖内容'}>
-        <Carousel v-slots={{
-          default: () => <>
-            <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-          </>,
-          cover: () => (
-            <div style={{ pointerEvents: 'none', textAlign: 'center', padding: '20px', color: 'white', boxSizing: 'border-box' }}>
-              this is cover content
-            </div>
-          )
-        }}/>
-      </DemoRow>
-      <DemoRow title={'自动播放'}>
-        <DemoLine title={'禁用自动播放'}>
-          <Carousel autoPlay={0} style={{ width: '400px' }}>
-            <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-          </Carousel>
-        </DemoLine>
-        <DemoLine title={'时间间隔为6s'}>
-          <Carousel autoPlay={6000} style={{ width: '400px' }}>
-            <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-            <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-          </Carousel>
-        </DemoLine>
-      </DemoRow>
-      <DemoRow title={'纵向切换'}>
-        <p>纵向切换的时候需要设置固定高度</p>
-        <Carousel vertical height={300} style={{ marginBottom: '16px' }} autoPlay={0}>
-          <CarouselItem>
-            <div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '100%' }}>panel1</div>
-          </CarouselItem>
-          <CarouselItem>
-            <div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '100%' }}>panel2</div>
-          </CarouselItem>
-          <CarouselItem>
-            <div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '100%' }}>panel3</div>
-          </CarouselItem>
-        </Carousel>
-
-        <Carousel vertical height={300} autoPlay={0}>
-          <CarouselItem>
-            <div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '100%' }}>panel1</div>
-          </CarouselItem>
-          <CarouselItem>
-            <div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '100%' }}>panel2</div>
-          </CarouselItem>
-        </Carousel>
-      </DemoRow>
-      <DemoRow title={'双向绑定 Item.val'}>
-        <p>state.currentItem:{String(state.currentItem)}</p>
-        <Carousel v-model={state.currentItem} style={{ marginBottom: "16px" }} autoPlay={0}>
-          <CarouselItem val="panel1"><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-          <CarouselItem val="panel2"><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-          <CarouselItem val="panel3"><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-          <CarouselItem val="panel4"><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-        </Carousel>
-        <Carousel vertical height={300} autoPlay={0} v-model={state.currentItem}>
-          <CarouselItem val="panel1">
-            <div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '100%' }}>panel1</div>
-          </CarouselItem>
-          <CarouselItem val="panel2">
-            <div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '100%' }}>panel2</div>
-          </CarouselItem>
-          <CarouselItem val="panel3">
-            <div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '100%' }}>panel3</div>
-          </CarouselItem>
-          <CarouselItem val="panel4">
-            <div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100%' }}>panel4</div>
-          </CarouselItem>
-        </Carousel>
-      </DemoRow>
-      <DemoRow title={'双向绑定 Item.index'}>
-        <p>state.currentItem:{String(state.currentItem2)}</p>
-        <Carousel v-model={state.currentItem2} style={{ marginBottom: "16px" }} autoPlay={0}>
-          <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
-          <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
-        </Carousel>
-        <Carousel vertical height={300} autoPlay={0} v-model={state.currentItem2}>
-          <CarouselItem>
-            <div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '100%' }}>panel1</div>
-          </CarouselItem>
-          <CarouselItem>
-            <div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '100%' }}>panel2</div>
-          </CarouselItem>
-          <CarouselItem>
-            <div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '100%' }}>panel3</div>
-          </CarouselItem>
-          <CarouselItem>
-            <div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100%' }}>panel4</div>
-          </CarouselItem>
-        </Carousel>
-      </DemoRow>
-      <DemoRow title={'卡片形式切换'}>
-        <p>建议用组件StackCard</p>
-        <div style={{ display: 'flex', justifyContent: 'center', overflow: 'hidden' }}>
-          <Carousel card autoPlay={0} style={{ width: '40%' }}>
-            <CarouselItem>
-              <div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '300px' }}>panel1</div>
-            </CarouselItem>
-            <CarouselItem>
-              <div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '300px' }}>panel2</div>
-            </CarouselItem>
-            <CarouselItem>
-              <div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '300px' }}>panel3</div>
-            </CarouselItem>
-            <CarouselItem>
-              <div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '300px' }}>panel4</div>
-            </CarouselItem>
-          </Carousel>
-        </div>
-      </DemoRow>
-    </div>
-  );
-});