-
-
Notifications
You must be signed in to change notification settings - Fork 115
/
9636.1d536532.chunk.js.map
1 lines (1 loc) · 4.54 KB
/
9636.1d536532.chunk.js.map
1
{"version":3,"file":"static/js/9636.1d536532.chunk.js","mappings":"gHAAA","sources":["../../packages/react-carousel/README.md"],"sourcesContent":["export default \"Carousel 走马灯\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-carousel/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-carousel)\\n[](https://npmjs.com/@uiw/react-carousel)\\n\\n滚动播放。在 v4.15.0+ 添加。\\n\\n```jsx\\nimport { Carousel } from 'uiw';\\n// or\\nimport Carousel from '@uiw/react-carousel';\\n```\\n\\n## 基础用法\\n\\n最简单的用法。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport { Carousel } from 'uiw';\\n\\nfunction Demo() {\\n return (\\n <Carousel>\\n <div style={{ height: '100%', background: '#1EABCD' }}>\\n <span>1</span>\\n </div>\\n <div style={{ height: '100%', background: '#393b46' }}>\\n <span>2</span>\\n </div>\\n <div style={{ height: '100%', background: '#008EF0' }}>\\n <span>3</span>\\n </div>\\n <div style={{ height: '100%', background: '#393E48' }}>\\n <span>4</span>\\n </div>\\n </Carousel>\\n );\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 控制播放频率\\n\\npalyTime设置每帧停留时间，scrollTime设置切换帧的速度\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport { Carousel } from 'uiw';\\n\\nfunction Demo() {\\n return (\\n <Carousel palyTime={1000} scrollTime={500}>\\n <div style={{ height: '100%', background: '#1EABCD' }}>\\n <span>1</span>\\n </div>\\n <div style={{ height: '100%', background: '#393b46' }}>\\n <span>2</span>\\n </div>\\n <div style={{ height: '100%', background: '#008EF0' }}>\\n <span>3</span>\\n </div>\\n <div style={{ height: '100%', background: '#393E48' }}>\\n <span>4</span>\\n </div>\\n </Carousel>\\n );\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 切换到指定帧\\n\\n手动切换到指定帧的位置\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport { Carousel } from 'uiw';\\n\\nfunction Demo() {\\n\\n const ref=React.useRef()\\n const [autoPlay,autoPlaySet]=React.useState(true)\\n\\n return (\\n <React.Fragment>\\n <Carousel\\n ref={ref}\\n position={2}\\n autoPlay={autoPlay}\\n afterChange={(current)=>console.log('after',current)}\\n beforeChange={(current)=>console.log('before',current)}\\n >\\n <div style={{ height: '100%', background: '#1EABCD' }}>\\n <span>1</span>\\n </div>\\n <div style={{ height: '100%', background: '#393b46' }}>\\n <span>2</span>\\n </div>\\n <div style={{ height: '100%', background: '#008EF0' }}>\\n <span>3</span>\\n </div>\\n <div style={{ height: '100%', background: '#393E48' }}>\\n <span>4</span>\\n </div>\\n </Carousel>\\n <button onClick={() => ref.current.gotoSlide(1)}>跳转</button>\\n <button onClick={() => ref.current.prevSlide()}>上一张</button>\\n <button onClick={() => ref.current.nextSlide()}>下一张</button>\\n <button onClick={() =>autoPlaySet(autoPlay?false:true)}>{autoPlay?'暂停':'开始'}</button>\\n </React.Fragment>\\n );\\n }\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n## API\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| width | 宽度 | number | 400 |\\n| height | 高度 | number | 200 |\\n| position | 设置初始帧位置 | number | 0 |\\n| palyTime | 每帧停留时间(ms) | number | 2000 |\\n| scrollTime | 滚动动画的速度(ms) | number | 200 |\\n| autoPlay | 是否自动播放 | boolean | true |\\n| afterChange | 切换面板前的回调 | (current) => void | - |\\n| beforeChange | 切换面板后的回调 | (current) => void | - |\\n\\n\\n### ref\\n\\n```ts\\n // 跳转到指定帧\\n gotoSlide: (slideNumber: number) => void;\\n // 上一针\\n prevSlide: () => void;\\n // 下一帧\\n nextSlide: () => void;\\n // 暂停播放\\n stopPlay: () => void;\\n```\\n\\n\\n\";"],"names":[],"sourceRoot":""}