-
-
Notifications
You must be signed in to change notification settings - Fork 115
/
9188.636af533.chunk.js.map
1 lines (1 loc) · 6.19 KB
/
9188.636af533.chunk.js.map
1
{"version":3,"file":"static/js/9188.636af533.chunk.js","mappings":"gHAAA","sources":["../../packages/react-progress/README.md"],"sourcesContent":["export default \"Progress 进度条\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-progress/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-progress.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-progress)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-progress.svg?label=@uiw/react-progress)](https://npmjs.com/@uiw/react-progress)\\n\\n用于展示操作进度,告知用户当前状态和预期。\\n\\n```jsx\\nimport { Progress } from 'uiw';\\nconst { Line, Circle } = Progress;\\n// or\\nimport Progress from '@uiw/react-progress'; \\n```\\n\\n### 基本用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nconst { Line } = Progress;\\nconst sty = {marginBottom:10}\\nconst Demo = () => (\\n <div>\\n <Progress.Line style={sty} percent={30} />\\n <Line style={sty} percent={50} status=\\\"active\\\" />\\n <Line style={sty} percent={70} status=\\\"exception\\\" />\\n <Line style={sty} percent={100} />\\n <Line style={sty} percent={50} showText={false} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 进度条大小设置\\n\\n设置参数`strokeWidth`即可\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nconst { Line } = Progress;\\nconst sty = {marginBottom:10}\\nconst Demo = () => (\\n <div>\\n <Progress.Line style={sty} strokeWidth={6} percent={30} />\\n <Line style={sty} strokeWidth={14} percent={50} status=\\\"active\\\" />\\n <Line style={sty} strokeWidth={18} percent={70} status=\\\"exception\\\" />\\n <Line style={sty} strokeWidth={12} percent={100} />\\n <Line style={sty} strokeWidth={14} percent={50} showText={false} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 圆圈进度条\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nconst { Circle } = Progress;\\nconst sty = {marginBottom:10}\\nconst Demo = () => (\\n <div>\\n <Progress.Circle style={sty} percent={30} />\\n <Circle style={sty} percent={75} />\\n <Circle style={sty} percent={70} status=\\\"exception\\\" />\\n <Circle style={sty} percent={100} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 不同尺寸圆圈进度条\\n\\n通过`strokeWidth`设置圆圈进度宽带,通过`width`(`type=\\\"circle\\\"`有效)设置圆圈大小,\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nlet sty = {marginRight:15}\\nconst Demo = () => (\\n <div>\\n <Progress.Circle style={sty} width={80} strokeWidth={2} percent={30} />\\n <Progress.Circle style={sty} width={100} strokeWidth={10} percent={75} />\\n <Progress.Circle style={sty} percent={70} status=\\\"exception\\\" />\\n <Progress.Circle style={sty} width={100} strokeWidth={3} percent={75} />\\n </div>\\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 ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor(props){\\n super(props);\\n this.state = {\\n percent: 50,\\n }\\n }\\n increase(){\\n let percent = this.state.percent + 10;\\n if (percent > 100) {\\n percent = 100;\\n }\\n this.setState({ percent });\\n }\\n decline(){\\n let percent = this.state.percent - 10;\\n if (percent < 0) {\\n percent = 0;\\n }\\n this.setState({ percent });\\n }\\n render() {\\n let sty = {marginRight:15}\\n return (\\n <div style={{maxWidth:400}}>\\n <Progress.Line percent={this.state.percent} />\\n <Progress.Circle percent={this.state.percent} />\\n <div>\\n <button onClick={this.decline.bind(this)}>minus -</button>\\n <button onClick={this.increase.bind(this)}>plus +</button>\\n </div>\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自定义文字格式\\n\\n`format` 属性指定格式。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Progress } from 'uiw';\\n\\nconst sty = {marginRight:10}\\nclass Demo extends React.Component {\\n render() {\\n return (\\n <div>\\n <Progress.Circle style={sty} percent={80} type=\\\"circle\\\" format={percent => (\\n <span>\\n {`${percent} %`}\\n <div style={{padding:\\\"10px 0 0 0\\\",fontSize:21}}>已完成</div>\\n </span>\\n )}/>\\n <Progress.Circle style={sty} percent={70} status=\\\"exception\\\" type=\\\"circle\\\" format={percent => (\\n <span>\\n {`${percent} %`}\\n <div style={{padding:\\\"10px 0 0 0\\\",fontSize:21}}>已关闭</div>\\n </span>\\n )}/>\\n <Progress.Circle style={sty} percent={100} type=\\\"circle\\\" format={percent => `已完成`}/>\\n <Progress.Line style={sty} percent={70} format={percent => `${percent}℃`}/>\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n## API\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|------ |-------- |---------- |-------- |\\n| percent | 百分比 | Number | `0` |\\n| showText | 是否显示进度条文字内容 | Boolean | `true` |\\n| format | 内容的模板函数,自定义文字格式。 | Function | - |\\n| strokeWidth | 进度条线的宽度 | Number | `6` |\\n| width | 圆形进度条画布宽度,单位 px ,`type=\\\"circle\\\"`有效| Number | `126` |\\n| status | 状态,可选:`success` `exception` `active` | Enum{'`success`', '`exception`'} | - |\\n\";"],"names":[],"sourceRoot":""}