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

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

@@ -1,128 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Checkbox, Slider} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const demo1 = designPage(() => {
-  const state = reactive({
-    val: 20,
-  });
-  return () => (
-    <DemoRow title={'基本用法'}>
-      <Slider v-model={state.val}/>
-      {state.val}
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-  const state = reactive({
-    val: 20,
-  });
-  return () => (
-    <DemoRow title={'横向纵向，以及对齐方式'}>
-      <Slider vertical v-model={state.val} style={{ margin: '0 20px' }}/>
-      <Slider vertical alignEnd v-model={state.val} onChange={(val: any) => console.log('change', val)} style={{ margin: '0 20px' }}/>
-      <Slider v-model={state.val} style={{ margin: '0 20px' }}/>
-      <Slider v-model={state.val} alignEnd style={{ margin: '0 20px' }}/>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-  const state = reactive({
-    val: 20,
-  });
-  return () => (
-    <DemoRow title={'状态'}>
-      <Slider v-model={state.val} status={'primary'}/>
-      <Slider v-model={state.val} status={'success'}/>
-      <Slider v-model={state.val} status={'warn'}/>
-      <Slider v-model={state.val} status={'error'}/>
-      <Slider v-model={state.val} status={'secondary'}/>
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-  const state = reactive({
-    val: 20,
-  });
-  return () => (
-    <DemoRow title={'设置总数'}>
-      <Slider v-model={state.val} total={1000}/>
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-  const state = reactive({
-    val: 20,
-  });
-  return () => (
-    <DemoRow title={'设置宽度'}>
-      <Slider v-model={state.val} width={'100px'}/>
-      <Slider v-model={state.val} width={'200px'}/>
-      <Slider v-model={state.val} width={'300px'}/>
-      <Slider v-model={state.val} full/>
-    </DemoRow>
-  );
-});
-
-export const demo6 = designPage(() => {
-  const state = reactive({
-    start: 20,
-    end: 80,
-  });
-  return () => (
-    <DemoRow title={'范围选择'}>
-      <Slider range v-model:start={state.start} v-model:end={state.end} total={200} width={'300px'}/>
-      <Button>start:{state.start}</Button>
-      <Button>end:{state.end}</Button>
-    </DemoRow>
-  );
-});
-export const demo7 = designPage(() => {
-  return () => (
-    <DemoRow title={'禁用tooltip'}>
-      <Slider tooltip={false}/>
-    </DemoRow>
-  );
-});
-export const demo8 = designPage(() => {
-  return () => (
-    <DemoRow title={'格式化tooltip'}>
-      <Slider tooltipFormatter={val => `${val}%`}/>
-    </DemoRow>
-  );
-});
-export const demo9 = designPage(() => {
-  return () => (
-    <DemoRow title={'设置最大最小值'}>
-      <Slider modelValue={50} max={80} min={20}/>
-      <Slider range max={150} min={50} start={60} end={120} total={200}/>
-    </DemoRow>
-  );
-});
-export const demo10 = designPage(() => {
-  return () => (
-    <DemoRow title={'步骤分块'}>
-      <Slider modelValue={50} step={10}/>
-      <Slider range start={60} end={120} total={200} step={10}/>
-    </DemoRow>
-  );
-});
-export const demo11 = designPage(() => {
-  const state = reactive({
-    val: true,
-  });
-  return () => (
-    <DemoRow title={'禁用与只读'}>
-      <DemoLine><Checkbox label={'禁用/只读'} v-model={state.val}/></DemoLine>
-      <DemoLine>
-        <Slider modelValue={50} disabled={state.val}/>
-        <Slider modelValue={50} readonly={state.val}/>
-      </DemoLine>
-    </DemoRow>
-  );
-});

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

@@ -1,70 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {SortList} from "../../../../packages";
-
-export const DemoSortList = designPage(() => {
-
-  const state = reactive({
-    list: ["#CC6666", "#CC9966", "#CCCC66", "#99CC66", "#66CC66", "#66CC99", "#66CCCC", "#6699CC", "#6666CC", "#9966CC", "#CC66CC", "#CC6699", "#B83D3D", "#8A2E2E", "#3DB8B8", "#2E8A8A"] as string[],
-  });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <div style={{ width: '240px' }}>
-        <SortList
-          v-model={state.list}
-          col={4}
-          space={1}
-          v-slots={{
-            default: ({ index, item }) => (<div style={{ height: '80px', backgroundColor: item, cursor: 'move' }}/>)
-          }}
-        />
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const DemoSortList2 = designPage(() => {
-
-  const state = reactive({
-    list: ["#CC6666", "#CC9966", "#CCCC66", "#99CC66", "#66CC66", "#66CC99", "#66CCCC", "#6699CC", "#6666CC", "#9966CC", "#CC66CC", "#CC6699", "#B83D3D", "#8A2E2E", "#3DB8B8", "#2E8A8A"] as string[],
-  });
-
-  return () => (
-    <DemoRow title="单列纵向">
-      <div style={{ width: '240px' }}>
-        <SortList
-          v-model={state.list}
-          col={2}
-          space={0}
-          v-slots={{
-            default: ({ index, item }) => (<div style={{ height: '80px', backgroundColor: item, cursor: 'move' }}/>)
-          }}
-        />
-      </div>
-    </DemoRow>
-  );
-});
-
-export const DemoSortListVertical = designPage(() => {
-
-  const state = reactive({
-    list: ["#CC6666", "#CC9966", "#CCCC66", "#99CC66", "#66CC66", "#66CC99", "#66CCCC", "#6699CC", "#6666CC", "#9966CC", "#CC66CC", "#CC6699", "#B83D3D", "#8A2E2E", "#3DB8B8", "#2E8A8A"] as string[],
-  });
-
-  return () => (
-    <DemoRow title="单列纵向">
-      <div style={{ width: '240px' }}>
-        <SortList
-          v-model={state.list}
-          col={1}
-          space={1}
-          v-slots={{
-            default: ({ index, item }) => (<div style={{ height: '80px', backgroundColor: item, cursor: 'move' }}/>)
-          }}
-        />
-      </div>
-    </DemoRow>
-  );
-});

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

@@ -1,356 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Select, SelectOption, StackCard, StackCardItem} from "../../../../packages";
-import {getDeviceInfo} from "../../../../packages/utils/getDeviceInfo";
-
-
-export const demoRight3 = designPage(() => {
-  const images = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-  ];
-
-  return () => (
-    <DemoRow title="只有右侧2个">
-      <p>StackCard会根据内容自动撑开高度，但是为了保险起见，建议每个元素的宽高一致</p>
-      <div style={{ width: '300px' }}>
-        <StackCard leftBufferCount={0} rightBufferCount={3}>
-          {images.map(url => (
-            <StackCardItem key={url}>
-              <img src={url} style={{ display: 'block' }}/>
-            </StackCardItem>
-          ))}
-        </StackCard>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoVerticalOffset = designPage(() => {
-  const images = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-  ];
-
-  return () => (
-    <DemoRow title="纵向一并偏移">
-      <div style={{ width: '300px' }}>
-        <StackCard leftBufferCount={0} rightBufferCount={4} stackItemHeight={4} stackItemWidth={12} verticalOffset verticalAlign="bottom">
-          {images.map(url => (
-            <StackCardItem key={url}>
-              <img src={url} style={{ display: 'block' }}/>
-            </StackCardItem>
-          ))}
-        </StackCard>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoLeftRight3 = designPage(() => {
-
-  const state = reactive({
-    currentIndex: undefined as any
-  });
-
-  const isMobile = getDeviceInfo().deviceType === 'mobile';
-
-  const images = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-  ];
-
-  return () => (
-    <DemoRow title="左右各3个">
-      <div style={{ marginBottom: '16px' }}>
-        <Select v-model={state.currentIndex} width={200}>
-          {images.map((_, index) => (<SelectOption label={`index_${index}`} val={index} key={index}/>))}
-        </Select>
-      </div>
-      <div style={{ width: '300px' }}>
-        <StackCard v-model={state.currentIndex} leftBufferCount={3} rightBufferCount={4}>
-          {images.map(url => (
-            <StackCardItem key={url}>
-              <img src={url} style={{ display: 'block', maxWidth: isMobile ? '33.33vw' : undefined }}/>
-            </StackCardItem>
-          ))}
-        </StackCard>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoAll = designPage(() => {
-
-  const isMobile = getDeviceInfo().deviceType === 'mobile';
-
-  const images = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-  ];
-
-  return () => (
-    <DemoRow title="全部展示">
-      <div style={{ width: '600px' }}>
-        <StackCard>
-          {images.map(url => (
-            <StackCardItem key={url}>
-              <img src={url} style={{ display: 'block', maxWidth: isMobile ? '33.33vw' : undefined }}/>
-            </StackCardItem>
-          ))}
-        </StackCard>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoAlignBottom = designPage(() => {
-
-  const isMobile = getDeviceInfo().deviceType === 'mobile';
-
-  const images = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-  ];
-
-  return () => (
-    <DemoRow title="底部对齐">
-      <div style={{ width: '600px' }}>
-        <StackCard verticalAlign="bottom">
-          {images.map(url => (
-            <StackCardItem key={url}>
-              <img src={url}/>
-            </StackCardItem>
-          ))}
-        </StackCard>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoRightAll = designPage(() => {
-
-  const isMobile = getDeviceInfo().deviceType === 'mobile';
-
-  const images = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-  ];
-
-  return () => (
-    <DemoRow title="全部展示在右边">
-      <div style={{ width: '600px' }}>
-        <StackCard leftBufferCount={0} rightBufferCount={images.length}>
-          {images.map(url => (
-            <StackCardItem key={url}>
-              <img src={url} style={{ display: 'block', maxWidth: isMobile ? '33.33vw' : undefined }}/>
-            </StackCardItem>
-          ))}
-        </StackCard>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoOffsetRate = designPage(() => {
-
-  const isMobile = getDeviceInfo().deviceType === 'mobile';
-
-  const images = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-  ];
-
-  return () => (
-    <DemoRow title="设置偏移距离stackItemWidth">
-      <p>stackItemWidth默认为24，就是每一张卡片偏移24个px；这里设置为80</p>
-      <div style={{ width: '600px' }}>
-        <StackCard leftBufferCount={3} rightBufferCount={4} stackItemWidth={80}>
-          {images.map(url => (
-            <StackCardItem key={url}>
-              <img src={url} style={{ display: 'block', maxWidth: isMobile ? '33.33vw' : undefined }}/>
-            </StackCardItem>
-          ))}
-        </StackCard>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoScaleRate = designPage(() => {
-
-  const isMobile = getDeviceInfo().deviceType === 'mobile';
-
-  const images = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-  ];
-
-  return () => (
-    <DemoRow title="设置缩放比例scaleRate">
-      <p>scaleRate默认为0.1，就是每一张图片缩小10%，这里调整为0.25，也就是4张图之后的图片就小的看不见了</p>
-      <div style={{ width: '600px' }}>
-        <StackCard leftBufferCount={3} rightBufferCount={4} stackItemWidth={80} scaleRate={0.25}>
-          {images.map(url => (
-            <StackCardItem key={url}>
-              <img src={url} style={{ display: 'block', maxWidth: isMobile ? '33.33vw' : undefined }}/>
-            </StackCardItem>
-          ))}
-        </StackCard>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoBinding = designPage(() => {
-  const images = [
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
-  ];
-
-  const state = reactive({
-    current: 0
-  });
-
-  return () => (
-    <DemoRow title="双向绑定">
-      <div style={{ width: '300px', float: 'left' }}>
-        <StackCard leftBufferCount={0} rightBufferCount={3} v-model={state.current}>
-          {images.map(url => (
-            <StackCardItem key={url}>
-              <img src={url} style={{ display: 'block' }}/>
-            </StackCardItem>
-          ))}
-        </StackCard>
-      </div>
-      <div style={{ width: '300px', float: 'left' }}>
-        <StackCard leftBufferCount={0} rightBufferCount={3} v-model={state.current}>
-          {images.map(url => (
-            <StackCardItem key={url}>
-              <img src={url} style={{ display: 'block' }}/>
-            </StackCardItem>
-          ))}
-        </StackCard>
-      </div>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/normal/DemoStep.scss

@@ -1,18 +0,0 @@
-.demo-step {
-  width: 1060px;
-
-  .demo-line {
-    display: flex;
-
-    .demo-line-content {
-      flex: 1;
-    }
-  }
-
-  .custom-content-slot {
-    @include prefix(icon) {
-      margin-right: 6px;
-      font-size: 1.2em;
-    }
-  }
-}