amis/examples/components/Form/Mode.jsx
2020-09-16 21:44:01 +08:00

558 lines
13 KiB
JavaScript

export default {
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
title: '表单各种展示模式汇总',
remark: '展示各种模式的 Form',
body: [
{
type: 'grid',
columns: [
{
type: 'form',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: '常规模式',
mode: 'normal',
controls: [
{
type: 'email',
name: 'email',
required: true,
placeholder: '请输入邮箱',
label: '邮箱',
size: 'full'
},
{
type: 'password',
name: 'password',
label: '密码',
required: true,
placeholder: '请输入密码',
size: 'full'
},
{
type: 'checkbox',
name: 'rememberMe',
label: '记住登录'
},
{
type: 'submit',
label: '登录'
}
]
},
{
type: 'form',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: '常规模式 input md 尺寸',
mode: 'normal',
controls: [
{
type: 'email',
name: 'email',
required: true,
placeholder: '请输入邮箱',
label: '邮箱',
size: 'md',
remark: 'xxxx',
hint: 'bla bla bla'
},
{
type: 'password',
name: 'password',
label: '密码',
required: true,
placeholder: '请输入密码',
size: 'md'
},
{
type: 'checkbox',
name: 'rememberMe',
label: '记住登录'
},
{
type: 'submit',
label: '登录'
}
]
}
]
},
{
type: 'grid',
columns: [
{
type: 'form',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: '水平模式,左右摆放 左右比率分配 ',
mode: 'horizontal',
autoFocus: false,
horizontal: {
left: 'col-sm-2',
right: 'col-sm-10',
offset: 'col-sm-offset-2'
},
controls: [
{
type: 'email',
name: 'email',
placeholder: '请输入邮箱地址',
label: '邮箱',
required: true,
desc: '表单描述文字'
},
{
type: 'password',
name: 'password',
label: '密码',
placeholder: '输入密码'
},
{
type: 'checkbox',
name: 'rememberMe',
label: '记住登录'
}
]
},
{
type: 'form',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: '水平模式,左右摆放 左侧固定宽度 input md 尺寸',
mode: 'horizontal',
autoFocus: false,
horizontal: {
leftFixed: 'xs'
},
controls: [
{
type: 'email',
name: 'email',
placeholder: '请输入邮箱地址',
label: '邮箱',
required: true,
desc: '表单描述文字',
size: 'md',
remark: 'xxxx',
hint: 'bla bla bla'
},
{
type: 'password',
name: 'password',
label: '密码',
placeholder: '输入密码',
size: 'md'
},
{
type: 'checkbox',
name: 'rememberMe',
label: '记住登录'
}
]
}
]
},
{
type: 'form',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: '内联模式',
mode: 'inline',
autoFocus: false,
controls: [
{
type: 'email',
name: 'email',
placeholder: 'Enter Email',
label: '邮箱',
size: 'auto'
},
{
type: 'password',
name: 'password',
placeholder: '密码',
size: 'auto',
remark: 'Bla bla bla'
},
{
type: 'checkbox',
name: 'rememberMe',
label: '记住登录',
size: 'auto'
},
{
type: 'submit',
label: '登录'
},
{
type: 'button',
label: '导出',
url: 'http://www.baidu.com/',
level: 'success'
}
]
},
{
type: 'form',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: '常规模式下用数组包起来还能控制一行显示多个',
mode: 'normal',
autoFocus: false,
controls: [
{
type: 'text',
name: 'name',
placeholder: '请输入...',
label: '名字',
size: 'full'
},
{
type: 'divider'
},
{
type: 'group',
controls: [
{
type: 'email',
name: 'email',
placeholder: '输入邮箱',
label: '邮箱',
size: 'full'
},
{
type: 'password',
name: 'password',
label: '密码',
placeholder: '请输入密码',
size: 'full'
}
]
},
{
type: 'divider'
},
{
type: 'group',
controls: [
{
type: 'email',
name: 'email2',
mode: 'inline',
placeholder: '请输入邮箱地址',
label: '邮箱',
size: 'full'
},
{
type: 'password',
name: 'password2',
label: '密码',
mode: 'inline',
placeholder: '请输入密码',
size: 'full'
}
]
},
{
type: 'divider'
},
{
type: 'group',
controls: [
{
type: 'email',
name: 'email3',
mode: 'inline',
placeholder: '请输入邮箱地址',
label: '邮箱',
size: 'full',
columnClassName: 'v-bottom'
},
{
type: 'password',
name: 'password3',
label: '密码',
placeholder: '请输入密码',
size: 'full'
}
]
},
{
type: 'divider'
},
{
type: 'group',
controls: [
{
type: 'email',
name: 'email4',
placeholder: '请输入邮箱地址',
label: '邮箱',
size: 'full'
},
{
type: 'password',
name: 'password4',
label: '密码',
placeholder: '请输入密码',
mode: 'inline',
size: 'full',
columnClassName: 'v-bottom'
}
]
},
{
type: 'divider'
},
{
type: 'checkbox',
name: 'rememberMe',
label: '记住我'
},
{
type: 'submit',
label: '提交'
}
]
},
{
type: 'form',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: '水平模式用数组包起来也能控制一行显示多个',
mode: 'horizontal',
autoFocus: false,
controls: [
{
type: 'email',
name: 'email',
placeholder: '请输入邮箱地址',
label: '邮箱',
size: 'full'
},
{
type: 'divider'
},
{
type: 'group',
controls: [
{
type: 'email',
name: 'email2',
placeholder: '请输入邮箱地址',
label: '邮箱',
size: 'full'
},
{
type: 'password',
name: 'password2',
label: '密码',
placeholder: '请输入密码',
size: 'full'
}
]
},
{
type: 'divider'
},
{
type: 'group',
controls: [
{
type: 'email',
name: 'email3',
placeholder: '请输入邮箱地址',
label: '邮箱',
size: 'full'
},
{
type: 'password',
name: 'password3',
label: '密码',
placeholder: '请输入密码',
size: 'full'
},
{
type: 'password',
name: 'password3',
label: '密码',
placeholder: '请输入密码',
size: 'full'
}
]
},
{
type: 'divider'
},
{
type: 'group',
controls: [
{
type: 'email',
name: 'email4',
placeholder: '请输入邮箱地址',
label: '邮箱',
size: 'full',
columnClassName: 'col-sm-6',
horizontal: {
left: 'col-sm-4',
right: 'col-sm-8'
}
},
{
type: 'password',
name: 'password4',
label: '密码',
placeholder: '请输入密码',
mode: 'inline',
size: 'full'
}
]
},
{
type: 'divider'
},
{
type: 'group',
label: '邮箱',
gap: 'xs',
controls: [
{
label: false,
type: 'email',
name: 'email5',
placeholder: '请输入邮箱地址',
size: 'full'
},
{
type: 'password',
name: 'password5',
label: '密码',
placeholder: '请输入密码',
mode: 'inline',
size: 'full'
}
]
},
{
type: 'divider'
},
{
type: 'group',
label: '邮箱',
description: 'bla bla',
gap: 'xs',
controls: [
{
type: 'email',
name: 'email6',
placeholder: '请输入邮箱地址',
mode: 'inline'
},
{
type: 'password',
name: 'password6',
// label: "密码",
placeholder: '请输入密码',
labelClassName: 'w-auto p-r-none',
mode: 'inline'
}
]
},
{
type: 'divider'
},
{
type: 'group',
label: '邮箱',
description: 'bla bla',
direction: 'vertical',
controls: [
{
type: 'email',
name: 'email9',
mode: 'normal',
placeholder: '请输入邮箱地址',
inline: true,
description: 'Bla blamfejkf fdjk'
},
{
type: 'password',
name: 'password9',
mode: 'normal',
placeholder: '请输入密码',
labelClassName: 'w-auto p-r-none'
}
]
},
{
type: 'divider'
},
{
type: 'checkbox',
name: 'rememberMe',
label: '记住我'
},
{
type: 'submit',
label: 'Submit'
}
]
},
{
type: 'form',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: 'Inline form 用数组包起来还能控制一行显示多个',
mode: 'inline',
submitText: null,
autoFocus: false,
controls: [
[
{
type: 'email',
name: 'email',
placeholder: 'Enter Email',
label: '邮箱',
size: 'full'
},
{
type: 'password',
name: 'password',
placeholder: 'Password',
size: 'full'
}
],
{
type: 'divider'
},
[
{
type: 'email',
name: 'email',
placeholder: 'Enter Email',
label: '邮箱',
size: 'full'
},
{
type: 'checkbox',
name: 'rememberMe',
label: '记住我',
size: 'full'
},
{
type: 'button-toolbar',
buttons: [
{
type: 'submit',
label: '登录'
},
{
type: 'button',
label: '导出',
url: 'http://www.baidu.com/',
level: 'success'
}
]
}
]
]
}
]
};