2.0.6-alpha.0 • Published 6 years ago
@pile-ui/field v2.0.6-alpha.0
@pile-ui/field
focus on Form layout, better combination with InputField
Usage
import Field,{FieldSet} from '@pile-ui/field';
import InputFiled from '@pile-ui/inputfiled';
<FieldSet title="工作信息">
<InputFiled placeholder="请输入工卡号" value="D03240">工卡号:</InputFiled>
<Field arrow="right" value="企业级事业部" placeholder="请输入所在部门">所在部门:</Field>
</FieldSet>
<WhiteSpace />
<FieldSet title="其他">
<Field align="right" extraAfter={<Switch />}>同路人信息可见:</Field>
</FieldSet>
API
Field props
参数 | 类型 | 默认 | 说明 |
---|---|---|---|
prefixCls | string | 'pile-field' | 组件的css前缀 |
children | any | - | 表单两栏布局中,左边的label值 |
placeholder | string | React.Node | - | 类似inputField的placehodler |
value | string | React.Node | - | 类似inputField的value |
arrow | boolean | false | 展示右边的箭头,默认false |
align | 'left' | 'right' | left | value的水平对齐方式,默认left |
onClick | function | - | 点击整条Field的onClick事件。绑定了onClick事件,会有一个点击的效果 |
extraAfter | string | React.Node | - | 添加在后面的额外部分 |
labelEllipsis | boolean | false | label文字过多时,是否启用省略状态 |
valueEllipsis | boolean | true | value文字过多时,是否启用省略状态 |
FieldSet props
参数 | 类型 | 默认 | 说明 |
---|---|---|---|
prefixCls | string | 'pile-fieldset' | 组件的css前缀 |
children | string | React.Node | - | 展示的内容 |
title | string | React.Node | - | 展示的title |
2.0.6-alpha.0
6 years ago