amis2/examples/components/Form/FieldSet.jsx

148 lines
3.2 KiB
React
Raw Normal View History

2019-04-30 11:11:25 +08:00
export default {
2019-11-07 10:41:14 +08:00
title: 'FieldSet 示例',
body: [
{
type: 'form',
mode: 'horizontal',
api: '/api/mock2/saveForm?waitSeconds=2',
actions: [
2019-04-30 11:11:25 +08:00
{
2019-11-07 10:41:14 +08:00
type: 'submit',
label: '提交',
primary: true
}
],
collapsable: true,
title: 'fieldSet 可以对表单元素做个分组',
body: [
2019-04-30 11:11:25 +08:00
{
2019-11-07 10:41:14 +08:00
type: 'fieldSet',
title: '基本信息',
collapsable: true,
body: [
2019-11-07 10:41:14 +08:00
{
type: 'group',
body: [
2019-04-30 11:11:25 +08:00
{
type: 'input-email',
2019-11-07 10:41:14 +08:00
name: 'email',
placeholder: '请输入邮箱地址',
label: '邮箱'
2019-04-30 11:11:25 +08:00
},
{
type: 'input-password',
2019-11-07 10:41:14 +08:00
name: 'password',
label: false,
placeholder: 'Password'
}
]
},
{
type: 'divider'
},
{
type: 'group',
body: [
2019-04-30 11:11:25 +08:00
{
type: 'input-email',
2019-11-07 10:41:14 +08:00
name: 'email',
placeholder: '请输入邮箱地址',
label: '邮箱'
2019-04-30 11:11:25 +08:00
},
{
2019-11-07 10:41:14 +08:00
type: 'checkbox',
name: 'rememberMe',
label: false,
option: 'Remember me'
2019-04-30 11:11:25 +08:00
}
2019-11-07 10:41:14 +08:00
]
}
]
},
{
title: '其他信息',
type: 'fieldSet',
body: [
2019-11-07 10:41:14 +08:00
{
type: 'input-email',
2019-11-07 10:41:14 +08:00
name: 'email',
placeholder: '请输入邮箱地址',
label: '邮箱'
},
{
type: 'divider'
},
{
type: 'checkbox',
name: 'rememberMe',
option: '记住我'
}
]
}
]
},
{
title: 'FieldSet 样式集',
type: 'form',
body: [
2019-11-07 10:41:14 +08:00
{
title: '超级小',
type: 'fieldSet',
className: 'fieldset-xs',
body: [
2019-11-07 10:41:14 +08:00
{
type: 'plain',
text: '文本 ...'
}
]
},
{
title: '小尺寸',
type: 'fieldSet',
className: 'fieldset-sm',
body: [
2019-11-07 10:41:14 +08:00
{
type: 'plain',
text: '文本 ...'
}
]
},
{
title: '正常尺寸',
type: 'fieldSet',
className: 'fieldset',
body: [
2019-11-07 10:41:14 +08:00
{
type: 'plain',
text: '文本 ...'
}
]
},
{
title: '中大尺寸',
type: 'fieldSet',
className: 'fieldset-md',
body: [
2019-11-07 10:41:14 +08:00
{
type: 'plain',
text: '文本 ...'
}
]
},
{
title: '超大尺寸',
type: 'fieldSet',
className: 'fieldset-lg',
body: [
2019-11-07 10:41:14 +08:00
{
type: 'plain',
text: '文本 ...'
}
]
2019-04-30 11:11:25 +08:00
}
2019-11-07 10:41:14 +08:00
]
}
]
2019-04-30 11:11:25 +08:00
};