omega-ui
Version:
一套基于React实现的企业级响应式UI设计方案
840 lines (808 loc) • 44 kB
JSX
/**
*
* @Demo: Inputs
* @User: Longjun.Qu
* @Date: 2018-07-01
* @Time: 10:35
*
*/
import React, {Component, Fragment} from 'react';
import {
Content,
Div,
Portlet,
Section,
Demo,
ButtonDropdown,
Text,
Code,
Separator,
Space,
Paragraph,
Form,
FormGroup,
Select,
FormStatic,
Textarea,
FileInput,
Input,
Alert,
Button,
SubHeader
} from 'omega';
export default class Inputs 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:;'
}
}, {
text: {
value: '基础表单',
href: 'javascript:;'
}
}
],
separator: {
show: true,
text: {
value: '-'
}
}
}
}}/>
<Content>
<Div _includeClass="row">
<Div _includeClass="col-xl-6">
<Portlet {...{
header: '基础输入',
footer: (
<Fragment>
<Div _includeClass="m-form">
<Div _includeClass="m-form__actions">
<Button {...{
value: 'submit',
btnColor: 'primary',
_includeStyle: {
marginRight: '5px'
}
}}/>
<Button {...{
value: 'cancel',
btnColor: 'secondary'
}}/>
</Div>
</Div>
</Fragment>
)
}} >
<Form>
<FormGroup>
<Alert {...{
message: (
<Text>以下是一些简单的文本输入组件，可以通过 <Code>input</Code>
组件实现如下效果。</Text>),
_includeClass: 'm-alert--default'
}}/>
</FormGroup>
<FormGroup label="示例文本框">
<Input {...{
input: {
type: 'email',
placeholder: 'Enter email',
solid: false,
value: ''
},
helper: 'We\'ll never share your email with anyone else.\n'
}} />
</FormGroup>
<FormGroup label="示例密码框">
<Input {...{
input: {
type: 'password',
placeholder: 'Password',
value: ''
}
}} />
</FormGroup>
<FormGroup label="示例静态文字">
<FormStatic>email@example.com</FormStatic>
</FormGroup>
<FormGroup label="示例单选框">
<Select {...{
select: {
items: [1, 2, 3, 4, 5]
}
}}/>
</FormGroup>
<FormGroup label="示例多选框">
<Select {...{
select: {
items: [1, 2, 3, 4, 5],
multiple: true
}
}}/>
</FormGroup>
<FormGroup label="示例富文本框">
<Textarea {...{
textarea: {
_includeAttribute: {
row: 3
}
}
}} />
</FormGroup>
</Form>
</Portlet>
<Portlet {...{
header: 'HTML5 文本输入',
footer: (
<Fragment>
<Div _includeClass="m-form">
<Div _includeClass="m-form__actions">
<Button {...{
value: 'submit',
btnColor: 'primary',
_includeStyle: {
marginRight: '5px'
}
}}/>
<Button {...{
value: 'cancel',
btnColor: 'secondary'
}}/>
</Div>
</Div>
</Fragment>
)
}} >
<Form>
<FormGroup>
<Alert {...{
message: (
<Text>除了常见的文本输入，<Code>input</Code> 组件也支持 HTML5
中所有类型。</Text>),
_includeClass: 'm-alert--default'
}}/>
</FormGroup>
<FormGroup label="Text">
<Input {...{
input: {
type: 'text',
value: 'This is omega ui',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Search">
<Input {...{
input: {
type: 'search',
value: 'What\'s the weather?',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Email">
<Input {...{
input: {
type: 'email',
value: 'omega_ui@163.com',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="URL">
<Input {...{
input: {
type: 'url',
value: 'https://omega.qulongjun.com',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Tel">
<Input {...{
input: {
type: 'tel',
value: '1-(555)-555-555',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Password">
<Input {...{
input: {
type: 'password',
value: '123456',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Number">
<Input {...{
input: {
type: 'number',
value: '22',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Date & Time">
<Input {...{
input: {
type: 'datetime-local',
value: '2018-07-01T13:45:00',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Date">
<Input {...{
input: {
type: 'date',
value: '2018-07-01',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Month">
<Input {...{
input: {
type: 'month',
value: '2018-07',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Week">
<Input {...{
input: {
type: 'week',
value: '2018-W33',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Time">
<Input {...{
input: {
type: 'time',
value: '13:45:00',
},
display: [2]
}} />
</FormGroup>
<FormGroup label="Color">
<Input {...{
input: {
type: 'color',
value: '#563d7c',
},
display: [2]
}} />
</FormGroup>
</Form>
</Portlet>
<Portlet {...{
header: '阴影特效',
footer: (
<Fragment>
<Div _includeClass="m-form">
<Div _includeClass="m-form__actions">
<Button {...{
value: 'submit',
btnColor: 'primary',
_includeStyle: {
marginRight: '5px'
}
}}/>
<Button {...{
value: 'cancel',
btnColor: 'secondary'
}}/>
</Div>
</Div>
</Fragment>
)
}} >
<Form>
<FormGroup>
<Alert {...{
message: (
<Text>可以通过设置 <Code>style</Code> 属性实现阴影效果。</Text>),
_includeClass: 'm-alert--default'
}}/>
</FormGroup>
<FormGroup label="示例文本框">
<Input {...{
input: {
type: 'email',
placeholder: 'Enter email',
solid: false,
value: '',
style: 'air',
},
helper: 'We\'ll never share your email with anyone else.\n'
}} />
</FormGroup>
<FormGroup label="示例密码框">
<Input {...{
input: {
style: 'air',
type: 'password',
placeholder: 'Password',
value: ''
}
}} />
</FormGroup>
<FormGroup label="示例单选框">
<Select {...{
select: {
style: 'air',
items: [1, 2, 3, 4, 5]
}
}}/>
</FormGroup>
<FormGroup label="示例多选框">
<Select {...{
select: {
style: 'air',
items: [1, 2, 3, 4, 5],
multiple: true
}
}}/>
</FormGroup>
<FormGroup label="示例富文本框">
<Textarea {...{
textarea: {
style: 'air',
_includeAttribute: {
row: 3
}
}
}} />
</FormGroup>
</Form>
</Portlet>
<Portlet {...{
header: '椭圆样式'
}} >
<Form>
<FormGroup>
<Alert {...{
message: (
<Text>可以通过设置 <Code>style</Code> 属性实现椭圆效果。</Text>),
_includeClass: 'm-alert--default'
}}/>
</FormGroup>
<FormGroup label="示例文本框">
<Input {...{
input: {
type: 'email',
placeholder: 'Enter email',
solid: false,
value: '',
style: 'pill',
},
helper: 'We\'ll never share your email with anyone else.\n'
}} />
</FormGroup>
<FormGroup label="示例密码框">
<Input {...{
input: {
style: 'pill',
type: 'password',
placeholder: 'Password',
value: ''
}
}} />
</FormGroup>
<FormGroup label="示例单选框">
<Select {...{
select: {
style: 'pill',
items: [1, 2, 3, 4, 5]
}
}}/>
</FormGroup>
<FormGroup label="示例多选框">
<Select {...{
select: {
style: 'pill',
items: [1, 2, 3, 4, 5],
multiple: true
}
}}/>
</FormGroup>
<FormGroup label="示例富文本框">
<Textarea {...{
textarea: {
style: 'pill',
_includeAttribute: {
row: 3
}
}
}} />
</FormGroup>
</Form>
</Portlet>
</Div>
<Div _includeClass="col-xl-6">
<Portlet {...{
header: '直角样式'
}} >
<Form>
<FormGroup>
<Alert {...{
message: (
<Text>可以通过设置 <Code>style</Code> 属性实现椭圆效果。</Text>),
_includeClass: 'm-alert--default'
}}/>
</FormGroup>
<FormGroup label="示例文本框">
<Input {...{
input: {
type: 'email',
placeholder: 'Enter email',
solid: false,
value: '',
style: 'square',
},
helper: 'We\'ll never share your email with anyone else.\n'
}} />
</FormGroup>
<FormGroup label="示例密码框">
<Input {...{
input: {
style: 'square',
type: 'password',
placeholder: 'Password',
value: ''
}
}} />
</FormGroup>
<FormGroup label="示例单选框">
<Select {...{
select: {
style: 'square',
items: [1, 2, 3, 4, 5]
}
}}/>
</FormGroup>
<FormGroup label="示例多选框">
<Select {...{
select: {
style: 'square',
items: [1, 2, 3, 4, 5],
multiple: true
}
}}/>
</FormGroup>
<FormGroup label="示例富文本框">
<Textarea {...{
textarea: {
style: 'square',
_includeAttribute: {
row: 3
}
}
}} />
</FormGroup>
</Form>
</Portlet>
<Portlet {...{
header: '直角样式&反色'
}} >
<Form>
<FormGroup>
<Alert {...{
message: (
<Text>可以通过设置 <Code>solid</Code>
属性实现反色效果（灰色背景色，透明边框）。</Text>),
_includeClass: 'm-alert--default'
}}/>
</FormGroup>
<FormGroup label="示例文本框">
<Input {...{
input: {
type: 'email',
placeholder: 'Enter email',
solid: true,
value: '',
style: 'square',
},
helper: 'We\'ll never share your email with anyone else.\n'
}} />
</FormGroup>
<FormGroup label="示例密码框">
<Input {...{
input: {
style: 'square',
solid: true,
type: 'password',
placeholder: 'Password',
value: ''
}
}} />
</FormGroup>
<FormGroup label="示例单选框">
<Select {...{
select: {
style: 'square',
solid: true,
items: [1, 2, 3, 4, 5]
}
}}/>
</FormGroup>
<FormGroup label="示例多选框">
<Select {...{
select: {
style: 'square',
solid: true,
items: [1, 2, 3, 4, 5],
multiple: true
}
}}/>
</FormGroup>
<FormGroup label="示例富文本框">
<Textarea {...{
textarea: {
style: 'square',
solid: true,
_includeAttribute: {
row: 3
}
}
}} />
</FormGroup>
</Form>
</Portlet>
<Portlet {...{
header: '禁用 & 只读'
}} >
<Form>
<FormGroup>
<Alert {...{
message: (
<Text>将 <Code>disabled</Code> 属性设置为 <Code>true</Code>
将禁用该组件,将 <Code>readOnly</Code> 属性设置为
<Code>true</Code> 将以只读的方式显示该组件。</Text>),
_includeClass: 'm-alert--default'
}}/>
</FormGroup>
<FormGroup label="示例文本框">
<Input {...{
input: {
type: 'email',
placeholder: 'Enter email',
value: '',
disabled: true,
style: 'square',
},
helper: 'We\'ll never share your email with anyone else.\n'
}} />
</FormGroup>
<FormGroup label="示例密码框">
<Input {...{
input: {
style: 'square',
type: 'password',
readOnly: true,
placeholder: 'Password',
value: '123456'
}
}} />
</FormGroup>
<FormGroup label="示例单选框">
<Select {...{
select: {
style: 'square',
disabled: true,
items: [1, 2, 3, 4, 5]
}
}}/>
</FormGroup>
<FormGroup label="示例多选框">
<Select {...{
select: {
style: 'square',
items: [1, 2, 3, 4, 5],
multiple: true,
disabled: true
}
}}/>
</FormGroup>
<FormGroup label="示例富文本框">
<Textarea {...{
textarea: {
style: 'square',
readOnly: true,
value: 'This is a readOnly Text',
_includeAttribute: {
row: 3
}
}
}} />
</FormGroup>
</Form>
</Portlet>
<Portlet {...{
header: '组件尺寸'
}} >
<Form {...{
items: [(
<Input {...{
input: {
type: 'text',
placeholder: 'Large Text',
solid: false,
value: ''
},
size: 'lg',
label: 'Large Text',
}} />
), (
<Input {...{
input: {
type: 'text',
placeholder: 'Default Text',
solid: false,
value: ''
},
label: 'Default Text',
}} />
), (
<Input {...{
input: {
type: 'text',
placeholder: 'Small Text',
solid: false,
value: ''
},
size: 'sm',
label: 'Small Text',
}} />
), (
<Input {...{
type: 'select',
select: {
items: [1, 2, 3, 4, 5]
},
size: 'lg',
label: 'Large Select'
}} />
), (
<Input {...{
type: 'select',
select: {
items: [1, 2, 3, 4, 5]
},
label: 'Default Select'
}} />
), (
<Input {...{
type: 'select',
select: {
items: [1, 2, 3, 4, 5]
},
size: 'sm',
label: 'Small Select'
}} />
)]
}}>
<FormGroup>
<Alert {...{
message: (
<Text>使用 <Code>size</Code> 属性可以设置组件的显示尺寸，支持的参数有
<Code>lg</Code> ， <Code>sm</Code> 或 <Code>normal</Code>
。</Text>),
_includeClass: 'm-alert--default'
}}/>
</FormGroup>
<FormGroup label="Large Text">
<Input {...{
input: {
type: 'text',
placeholder: 'Large Text',
value: '',
size: 'lg'
}
}} />
</FormGroup>
<FormGroup label="Default Text">
<Input {...{
input: {
type: 'text',
placeholder: 'Default Text',
value: ''
}
}} />
</FormGroup>
<FormGroup label="Small Text">
<Input {...{
input: {
type: 'text',
placeholder: 'Small Text',
value: '',
size: 'sm'
},
}} />
</FormGroup>
<FormGroup label="Large Select">
<Select {...{
select: {
size: 'lg',
items: [1, 2, 3, 4, 5]
}
}}/>
</FormGroup>
<FormGroup label="Default Select">
<Select {...{
select: {
items: [1, 2, 3, 4, 5]
}
}}/>
</FormGroup>
<FormGroup label="Small Select">
<Select {...{
select: {
size: 'sm',
items: [1, 2, 3, 4, 5]
}
}}/>
</FormGroup>
</Form>
</Portlet>
<Portlet {...{
header: '特殊组件'
}} >
<Form>
<FormGroup>
<Alert {...{
message: (
<Text>我们针对部分组件也进行了个性化的定制，例如文件选择组件
<Code>file</Code>。</Text>),
_includeClass: 'm-alert--default'
}}/>
</FormGroup>
<FormGroup label="上传文件">
<FileInput {...{
file: {
placeholder: '选择文件'
}
}}/>
</FormGroup>
</Form>
</Portlet>
</Div>
</Div>
</Content>
</Fragment>
);
}
}