@pile-ui/field

@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