2.0.6-alpha.0 • Published 6 years ago

@pile-ui/field v2.0.6-alpha.0

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

@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

参数类型默认说明
prefixClsstring'pile-field'组件的css前缀
childrenany-表单两栏布局中,左边的label值
placeholderstring | React.Node-类似inputField的placehodler
valuestring | React.Node-类似inputField的value
arrowbooleanfalse展示右边的箭头,默认false
align'left' | 'right'leftvalue的水平对齐方式,默认left
onClickfunction-点击整条Field的onClick事件。绑定了onClick事件,会有一个点击的效果
extraAfterstring | React.Node-添加在后面的额外部分
labelEllipsisbooleanfalselabel文字过多时,是否启用省略状态
valueEllipsisbooleantruevalue文字过多时,是否启用省略状态

FieldSet props

参数类型默认说明
prefixClsstring'pile-fieldset'组件的css前缀
childrenstring | React.Node-展示的内容
titlestring | React.Node-展示的title