omega-ui
Version:
一套基于React实现的企业级响应式UI设计方案
346 lines (342 loc) • 17.1 kB
JSX
/**
*
* @Demo: Progress
* @User: Longjun.Qu
* @Date: 2018-06-25
* @Time: 19:44
*
*/
import React, {Component, Fragment} from 'react';
import {Content, Div, Portlet, Section, Text, Code, Progress, Space, Separator,SubHeader} from 'omega';
export default class Progresses extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Fragment>
<SubHeader {...{
header: {
show: true,
name: '进度条',
separator: true
},
breadcrumbs: {
items: [
{
icon: {
show: true,
name: 'la la-home'
}
}, {
text: {
value: '基础组件',
href: 'javascript:;'
}
}, {
text: {
value: '进度条',
href: 'javascript:;'
}
}
],
separator: {
show: true,
text: {
value: '-'
}
}
}
}}/>
<Content>
<Div _includeClass="row">
<Div _includeClass="col-xl-6">
<Portlet {...{
header: '基础进度条'
}} >
<Section
describe={<Text>可以通过使用 <Code>Progress</Code> 组件快速构建一个通用进度条，只需设置
<Code>items</Code> 属性。</Text>}>
<Progress {...{
items: {
now: 0
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 25
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 50
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 100
}
}}/>
</Section>
</Portlet>
<Portlet {...{
header: '尺寸'
}} >
<Section title="细尺寸"
describe={<Text>可以通过设置 <Code>size</Code> 属性为<Code>sm</Code>，控制进度条以较细的样式显示：
</Text>}>
<Progress {...{
size: 'sm',
items: {
now: 25,
_bgColor: 'primary'
}
}}/>
<Space size={10}/>
<Progress {...{
size: 'sm',
items: {
now: 50,
_bgColor: 'accent'
}
}}/>
<Space size={10}/>
<Progress {...{
size: 'sm',
items: {
now: 75,
_bgColor: 'warning'
}
}}/>
<Space size={10}/>
<Progress {...{
size: 'sm',
items: {
now: 100,
_bgColor: 'danger'
}
}}/>
<div className="m-separator m-separator--dashed"/>
</Section>
<Section title="粗尺寸"
describe={<Text>可以通过设置 <Code>size</Code>
属性为<Code>lg</Code>，控制进度条以较粗的样式显示：</Text>}>
<Progress {...{
size: 'lg',
items: {
now: 25,
_bgColor: 'primary'
}
}}/>
<Space size={10}/>
<Progress {...{
size: 'lg',
items: {
now: 50,
_bgColor: 'accent'
}
}}/>
<Space size={10}/>
<Progress {...{
size: 'lg',
items: {
now: 75,
_bgColor: 'warning'
}
}}/>
<Space size={10}/>
<Progress {...{
size: 'lg',
items: {
now: 100,
_bgColor: 'danger'
}
}}/>
<Separator/>
</Section>
<Section title="自定义高度"
describe={<Text>如果对预设进度条粗细样式不满意，可以通过设置 <Code>style</Code> 属性的
<Code>height</Code> 参数自定义进度条高度。
</Text>}>
<Progress {...{
height: '1px',
items: {
now: 25,
_bgColor: 'primary'
}
}}/>
<Space size={10}/>
<Progress {...{
height: '5px',
items: {
now: 50,
_bgColor: 'accent'
}
}}/>
<Space size={10}/>
<Progress {...{
height: '10px',
items: {
now: 75,
_bgColor: 'warning'
}
}}/>
<Space size={10}/>
<Progress {...{
height: '15px',
items: {
now: 100,
_bgColor: 'danger'
}
}}/>
<Separator/>
</Section>
</Portlet>
</Div>
<Div _includeClass="col-xl-6">
<Portlet {...{
header: '进度条状态'
}} >
<Section title="背景颜色"
describe={<Text>通过设置 <Code>items</Code> 属性的 <Code>_bgColor</Code>
参数可以修改进度条状态。</Text>}>
<Progress {...{
items: {
now: 25,
_bgColor: 'success'
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 50,
_bgColor: 'info'
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 75,
_bgColor: 'warning'
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 100,
_bgColor: 'danger'
}
}}/>
</Section>
<Section title="复合进度条"
describe={<Text>通过设置多个 <Code>items</Code> 对象元素可以创建多个进度条。</Text>}>
<Progress {...{
items: [{
now: 15
}, {
now: 30,
_bgColor: 'success'
}, {
now: 20,
_bgColor: 'info'
}]
}}/>
<Space size={10}/>
<Progress {...{
items: [{
now: 35
}, {
now: 10,
_bgColor: 'warning'
}, {
now: 40,
_bgColor: 'danger'
}]
}}/>
</Section>
</Portlet>
<Portlet {...{
header: '条纹'
}} >
<Section
describe={<Text>通过设置 <Code>items</Code> 属性的 <Code>pattern</Code> 参数为
<Code>striped</Code>
可以显示条纹样式。</Text>}>
<Progress {...{
items: {
now: 10,
pattern: 'striped'
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 25,
_bgColor: 'success',
pattern: 'striped'
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 50,
_bgColor: 'info',
pattern: 'striped'
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 75,
_bgColor: 'warning',
pattern: 'striped'
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 100,
_bgColor: 'danger',
pattern: 'striped'
}
}}/>
</Section>
<Section
describe={<Text>条纹样式也可以是动画形式，只需修改 <Code>itemss</Code> 属性中 <Code>pattern</Code>
参数为
<Code>animated</Code> 。</Text>}>
<Progress {...{
items: {
now: 75,
_bgColor: 'success',
pattern: ['animated', 'striped']
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 35,
_bgColor: 'warning',
pattern: ['animated', 'striped']
}
}}/>
<Space size={10}/>
<Progress {...{
items: {
now: 65,
_bgColor: 'danger',
pattern: ['animated', 'striped']
}
}}/>
</Section>
</Portlet>
</Div>
</Div>
</Content>
</Fragment>
);
}
}