@pile-ui/field
2.0.6-alpha.0 • Public • Published
@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 |
Package Sidebar
Install
Weekly Downloads