amis/examples/components/Form/Tabs.jsx

203 lines
5.7 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: 'Tabs 示例',
body: [
{
type: 'form',
mode: 'horizontal',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: '',
actions: [
2019-04-30 11:11:25 +08:00
{
2019-11-07 10:41:14 +08:00
type: 'button',
actionType: 'dialog',
label: '弹框中的 Tabs',
level: 'info',
dialog: {
title: '',
// size: "md",
body: {
type: 'form',
mode: 'horizontal',
horizontal: {
leftFixed: 'xs'
},
api: '/api/mock2/form/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
2019-04-30 11:11:25 +08:00
}
2019-11-07 10:41:14 +08:00
],
body: [
2019-04-30 11:11:25 +08:00
{
2019-11-07 10:41:14 +08:00
type: 'tabs',
tabs: [
{
title: '基本信息',
body: [
2020-09-16 16:40:19 +08:00
{
type: 'group',
body: [
2020-09-16 16:40:19 +08:00
{
type: 'input-email',
2020-09-16 16:40:19 +08:00
name: 'email1',
placeholder: '请输入邮箱地址',
label: '邮箱'
},
{
type: 'input-password',
2020-09-16 16:40:19 +08:00
name: 'password',
placeholder: '密码',
label: false
}
]
},
2019-11-07 10:41:14 +08:00
{
type: 'divider'
},
2020-09-16 16:40:19 +08:00
{
type: 'group',
body: [
2020-09-16 16:40:19 +08:00
{
type: 'input-email',
2020-09-16 16:40:19 +08:00
name: 'email2',
placeholder: '请输入邮箱地址',
label: '邮箱'
},
{
type: 'checkbox',
name: 'rememberMe',
label: false,
option: '记住我'
}
]
}
2019-11-07 10:41:14 +08:00
]
},
{
title: '其他信息',
body: [
2019-11-07 10:41:14 +08:00
{
type: 'input-email',
2019-11-07 10:41:14 +08:00
name: 'email3',
placeholder: '请输入邮箱地址',
label: '邮箱'
},
2019-04-30 11:11:25 +08:00
{
2019-11-07 10:41:14 +08:00
type: 'divider'
2019-04-30 11:11:25 +08:00
},
{
2019-11-07 10:41:14 +08:00
type: 'checkbox',
name: 'rememberMe2',
option: '记住我'
2019-04-30 11:11:25 +08:00
}
2019-11-07 10:41:14 +08:00
]
}
]
}
]
}
}
},
{
type: 'submit',
label: '提交',
primary: true
}
],
body: [
2019-11-07 10:41:14 +08:00
{
type: 'tabs',
name: 'outertabs',
className: 'm-b',
2019-11-07 10:41:14 +08:00
tabs: [
{
title: '基本信息',
hash: 'tab1',
body: [
2020-09-16 16:40:19 +08:00
{
type: 'group',
body: [
2020-09-16 16:40:19 +08:00
{
type: 'input-email',
2020-09-16 16:40:19 +08:00
name: 'email',
placeholder: '请输入邮箱地址',
label: '邮箱'
},
{
type: 'input-password',
2020-09-16 16:40:19 +08:00
name: 'password',
placeholder: '密码',
label: false
}
]
},
2019-11-07 10:41:14 +08:00
{
type: 'divider'
},
2020-09-16 16:40:19 +08:00
{
type: 'group',
body: [
2020-09-16 16:40:19 +08:00
{
type: 'input-email',
2020-09-16 16:40:19 +08:00
name: 'email2',
placeholder: '请输入邮箱地址',
label: '邮箱'
},
{
type: 'checkbox',
name: 'rememberMe',
label: false,
option: '记住我'
}
]
}
2019-11-07 10:41:14 +08:00
]
},
{
title: '其他信息',
hash: 'tab2',
body: [
2019-11-07 10:41:14 +08:00
{
type: 'input-email',
2019-11-07 10:41:14 +08:00
name: 'email3',
placeholder: '请输入邮箱地址',
label: '邮箱'
},
{
type: 'divider'
},
{
type: 'checkbox',
name: 'rememberMe4',
label: '记住我'
2019-04-30 11:11:25 +08:00
}
2019-11-07 10:41:14 +08:00
]
}
]
},
{
type: 'radios',
name: 'outertabs',
label: 'Tabs值',
mode: 'normal',
description:
'如果 tabs 设置了 name 是可以跟表单值联动的,默认并不会开启此功能。',
options: [
{
label: '基本信息',
value: '基本信息'
},
{
label: '其他信息',
value: '其他信息'
}
]
2019-04-30 11:11:25 +08:00
}
2019-11-07 10:41:14 +08:00
]
}
]
2019-04-30 11:11:25 +08:00
};