amis/examples/components/Dialog/Simple.jsx

296 lines
7.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

export default {
type: 'page',
title: 'Dialog',
body: [
{
type: 'button-toolbar',
className: 'm-b',
buttons: [
{
type: 'button',
label: '打开弹框',
actionType: 'dialog',
dialog: {
title: '提示',
closeOnEsc: true,
body: '这是个简单的弹框'
}
},
{
type: 'button',
label: '多级弹框',
actionType: 'dialog',
dialog: {
title: '提示',
closeOnEsc: true,
body: '这是个简单的弹框',
actions: [
{
type: 'button',
actionType: 'confirm',
label: '确认',
primary: true
},
{
type: 'button',
actionType: 'dialog',
label: '再弹一个',
dialog: {
title: '弹框中的弹框',
closeOnEsc: true,
body: '如果你想,可以无限弹下去',
actions: [
{
type: 'button',
actionType: 'close',
label: '算了'
},
{
type: 'button',
actionType: 'dialog',
label: '来吧',
level: 'info',
dialog: {
title: '弹框中的弹框',
closeOnEsc: true,
body: [
{
type: 'tpl',
tpl: '如果你想,可以无限弹下去',
inline: false
},
{
type: 'button',
actionType: 'submit',
label: '算了,不弹了',
close: true
}
],
actions: [
{
type: 'button',
actionType: 'confirm',
label: '不弹了',
primary: true
}
]
}
}
]
}
}
]
}
},
{
type: 'button',
label: '弹个表单',
actionType: 'dialog',
dialog: {
size: 'lg',
title: '在弹框中的表单',
closeOnEsc: true,
actions: [
{
label: '取消',
actionType: 'close',
type: 'button'
},
{
label: '确认',
actionType: 'confirm',
type: 'button',
level: 'primary'
},
{
label: '提交不关闭',
actionType: 'submit',
close: false,
type: 'button',
api: '/api/mock2/form/saveForm?waitSeconds=2',
level: 'primary'
},
{
label: '保存不关闭',
actionType: 'ajax',
type: 'button',
api: '/api/mock2/form/saveForm?waitSeconds=4',
level: 'info'
},
{
type: 'button',
label: 'Feedback',
close: true,
actionType: 'ajax',
api: '/api/mock2/form/initData?waitSeconds=2',
tooltip: '点击我后会发送一个请求,请求回来后,弹出一个框。',
feedback: {
title: '操作成功',
body: 'xxx 已操作成功'
}
}
],
body: {
type: 'form',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: '常规模式',
mode: 'normal',
body: [
{
type: 'input-email',
name: 'email',
required: true,
placeholder: '请输入邮箱',
label: '邮箱'
},
{
type: 'input-password',
name: 'password',
label: '密码',
required: true,
placeholder: '请输入密码'
},
{
type: 'checkbox',
name: 'rememberMe',
label: '记住登录'
}
]
}
}
},
{
type: 'button',
label: '再弹个表单',
actionType: 'dialog',
dialog: {
title: '在弹框中的表单',
actions: [
{
label: '取消',
actionType: 'close',
type: 'button'
},
{
label: '确认',
actionType: 'confirm',
type: 'button',
level: 'primary',
disabledOn: '!data.rememberMe'
}
],
body: {
type: 'form',
api: '/api/mock2/form/saveForm?waitSeconds=2',
title: '常规模式',
mode: 'normal',
body: [
{
type: 'checkbox',
name: 'rememberMe',
label: '勾上我才可以确认'
}
]
}
}
},
{
type: 'button',
label: 'Feedback',
actionType: 'ajax',
api: '/api/mock2/form/initData?waitSeconds=2',
tooltip: '点击我后会发送一个请求,请求回来后,弹出一个框。',
feedback: {
title: '操作成功',
closeOnEsc: true,
body: 'xxx 已操作成功'
}
},
{
type: 'button',
label: 'Feedback2',
actionType: 'ajax',
api: '/api/mock2/form/initData?waitSeconds=2',
tooltip: '可以根据条件弹出比如这个例子看当前时间戳是否可以整除3',
feedback: {
visibleOn: '!(this.date % 3)',
title: '操作成功',
body: '当前时间戳: <code>${date}</code>'
}
}
]
},
{
type: 'button-toolbar',
className: 'm-l-none',
buttons: [
{
type: 'button',
label: 'sm 弹框',
actionType: 'dialog',
dialog: {
size: 'sm',
title: '提示',
body: '这是个简单的弹框'
}
},
{
type: 'button',
label: '标准 弹框',
actionType: 'dialog',
dialog: {
title: '提示',
body: '这是个简单的弹框'
}
},
{
type: 'button',
label: 'lg 弹框',
actionType: 'dialog',
dialog: {
size: 'lg',
title: '提示',
body: '这是个简单的弹框'
}
},
{
type: 'button',
label: 'xl 弹框',
actionType: 'dialog',
dialog: {
size: 'xl',
title: '提示',
body: '这是个简单的弹框'
}
},
{
type: 'button',
label: 'full 弹框',
actionType: 'dialog',
dialog: {
size: 'full',
title: '全屏弹框',
body: '弹框尽可能占满,内容部分滚动。'
}
}
]
}
]
};