156 lines
6.6 KiB
TypeScript
156 lines
6.6 KiB
TypeScript
import { Group, Panel, text, Color, LayoutSpec, vlayout, Gravity, scroller, layoutConfig, modal, Text } from "doric";
|
|
import { colors, label } from "./utils";
|
|
|
|
@Entry
|
|
export class ModalDemo extends Panel {
|
|
build(rootView: Group): void {
|
|
scroller(
|
|
vlayout(
|
|
[
|
|
text({
|
|
text: "Modal",
|
|
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
backgroundColor: colors[1],
|
|
textAlignment: Gravity.Center,
|
|
height: 50,
|
|
}),
|
|
label('toast on bottom'),
|
|
label('Click me').apply({
|
|
width: 200,
|
|
height: 50,
|
|
backgroundColor: colors[0],
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
layoutConfig: layoutConfig().just(),
|
|
onClick: () => {
|
|
modal(this.context).toast('This is a toast.')
|
|
}
|
|
}),
|
|
label('toast on top'),
|
|
label('Click me').apply({
|
|
width: 200,
|
|
height: 50,
|
|
backgroundColor: colors[0],
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
layoutConfig: layoutConfig().just(),
|
|
onClick: () => {
|
|
modal(this.context).toast('This is a toast.', Gravity.Top)
|
|
}
|
|
}),
|
|
|
|
label('toast on center'),
|
|
label('Click me').apply({
|
|
width: 200,
|
|
height: 50,
|
|
backgroundColor: colors[0],
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
layoutConfig: layoutConfig().just(),
|
|
onClick: () => {
|
|
modal(this.context).toast('This is a toast.', Gravity.Center)
|
|
}
|
|
} as Partial<Text>),
|
|
text({
|
|
text: "Alert",
|
|
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
backgroundColor: colors[2],
|
|
textAlignment: Gravity.Center,
|
|
height: 50,
|
|
}),
|
|
label('Click me').apply({
|
|
width: 200,
|
|
height: 50,
|
|
backgroundColor: colors[0],
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
layoutConfig: layoutConfig().just(),
|
|
onClick: () => {
|
|
modal(this.context).alert({
|
|
msg: 'This is alert.',
|
|
title: 'Alert title',
|
|
okLabel: "OkLabel"
|
|
}).then(e => {
|
|
modal(this.context).toast('Clicked OK.')
|
|
})
|
|
}
|
|
}),
|
|
text({
|
|
text: "Confirm",
|
|
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
backgroundColor: colors[3],
|
|
textAlignment: Gravity.Center,
|
|
height: 50,
|
|
}),
|
|
label('Click me').apply({
|
|
width: 200,
|
|
height: 50,
|
|
backgroundColor: colors[0],
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
layoutConfig: layoutConfig().just(),
|
|
onClick: () => {
|
|
modal(this.context).confirm({
|
|
msg: 'This is Confirm.',
|
|
title: 'Confirm title',
|
|
okLabel: "OkLabel",
|
|
cancelLabel: 'CancelLabel',
|
|
}).then(
|
|
() => {
|
|
modal(this.context).toast('Clicked OK.')
|
|
},
|
|
() => {
|
|
modal(this.context).toast('Clicked Cancel.')
|
|
})
|
|
}
|
|
}),
|
|
text({
|
|
text: "Prompt",
|
|
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
backgroundColor: colors[4],
|
|
textAlignment: Gravity.Center,
|
|
height: 50,
|
|
}),
|
|
label('Click me').apply({
|
|
width: 200,
|
|
height: 50,
|
|
backgroundColor: colors[0],
|
|
textSize: 30,
|
|
textColor: Color.WHITE,
|
|
layoutConfig: layoutConfig().just(),
|
|
onClick: () => {
|
|
modal(this.context).prompt({
|
|
msg: 'This is Prompt.',
|
|
title: 'Prompt title',
|
|
okLabel: "OkLabel",
|
|
cancelLabel: 'CancelLabel',
|
|
}).then(
|
|
e => {
|
|
modal(this.context).toast(`Clicked OK.Input:${e}`)
|
|
},
|
|
e => {
|
|
modal(this.context).toast(`Clicked Cancel.Input:${e}`)
|
|
})
|
|
}
|
|
}),
|
|
],
|
|
{
|
|
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
|
|
gravity: Gravity.Center,
|
|
space: 10,
|
|
}
|
|
),
|
|
{
|
|
layoutConfig: layoutConfig().most(),
|
|
}
|
|
).in(rootView)
|
|
}
|
|
} |