update demo

This commit is contained in:
pengfei.zhou 2020-09-05 12:41:12 +08:00 committed by osborn
parent a5ca58c38a
commit fc6b465b92
3 changed files with 28 additions and 16 deletions

View File

@ -25,7 +25,7 @@ export class ModalDemo extends Panel {
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).toast('This is a toast.') modal(this.context).toast('This is a toast.')
} }
}), }),
label('toast on top'), label('toast on top'),
@ -37,7 +37,7 @@ export class ModalDemo extends Panel {
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).toast('This is a toast.', Gravity.Top) modal(this.context).toast('This is a toast.', Gravity.Top)
} }
}), }),
@ -50,7 +50,7 @@ export class ModalDemo extends Panel {
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).toast('This is a toast.', Gravity.Center) modal(this.context).toast('This is a toast.', Gravity.Center)
} }
} as Partial<Text>), } as Partial<Text>),
text({ text({
@ -70,12 +70,12 @@ export class ModalDemo extends Panel {
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).alert({ modal(this.context).alert({
msg: 'This is alert.', msg: 'This is alert.',
title: 'Alert title', title: 'Alert title',
okLabel: "OkLabel" okLabel: "OkLabel"
}).then(e => { }).then(e => {
modal(context).toast('Clicked OK.') modal(this.context).toast('Clicked OK.')
}) })
} }
}), }),
@ -96,17 +96,17 @@ export class ModalDemo extends Panel {
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).confirm({ modal(this.context).confirm({
msg: 'This is Confirm.', msg: 'This is Confirm.',
title: 'Confirm title', title: 'Confirm title',
okLabel: "OkLabel", okLabel: "OkLabel",
cancelLabel: 'CancelLabel', cancelLabel: 'CancelLabel',
}).then( }).then(
() => { () => {
modal(context).toast('Clicked OK.') modal(this.context).toast('Clicked OK.')
}, },
() => { () => {
modal(context).toast('Clicked Cancel.') modal(this.context).toast('Clicked Cancel.')
}) })
} }
}), }),
@ -127,17 +127,17 @@ export class ModalDemo extends Panel {
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).prompt({ modal(this.context).prompt({
msg: 'This is Prompt.', msg: 'This is Prompt.',
title: 'Prompt title', title: 'Prompt title',
okLabel: "OkLabel", okLabel: "OkLabel",
cancelLabel: 'CancelLabel', cancelLabel: 'CancelLabel',
}).then( }).then(
e => { e => {
modal(context).toast(`Clicked OK.Input:${e}`) modal(this.context).toast(`Clicked OK.Input:${e}`)
}, },
e => { e => {
modal(context).toast(`Clicked Cancel.Input:${e}`) modal(this.context).toast(`Clicked Cancel.Input:${e}`)
}) })
} }
}), }),

View File

@ -2,8 +2,9 @@ import { Group, Panel, navbar, text, gravity, Color, LayoutSpec, vlayout, Gravit
import { title, label, colors } from "./utils"; import { title, label, colors } from "./utils";
import { ModalDemo } from "./ModalDemo"; import { ModalDemo } from "./ModalDemo";
import { CounterPage } from './Counter' import { CounterPage } from './Counter'
import { PopoverDemo } from "./PopoverDemo";
@Entry(exports = [ModalDemo, CounterPage]) @Entry
class MultiPanelDemo extends Panel { class MultiPanelDemo extends Panel {
build(rootView: Group): void { build(rootView: Group): void {
scroller( scroller(
@ -32,6 +33,17 @@ class MultiPanelDemo extends Panel {
navigator(context).push(CounterPage) navigator(context).push(CounterPage)
} }
}), }),
label('Popover').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
navigator(context).push(PopoverDemo)
}
}),
label('Multi Panel').apply({ label('Multi Panel').apply({
width: 200, width: 200,
height: 50, height: 50,

View File

@ -17,7 +17,7 @@ import {
import { title, label, colors } from "./utils"; import { title, label, colors } from "./utils";
@Entry @Entry
class PopoverDemo extends Panel { export class PopoverDemo extends Panel {
build(rootView: Group): void { build(rootView: Group): void {
scroller( scroller(
vlayout([ vlayout([
@ -52,7 +52,7 @@ class PopoverDemo extends Panel {
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
popover(context).show( popover(this.context).show(
stack( stack(
[ [
text({ text({
@ -69,9 +69,9 @@ class PopoverDemo extends Panel {
v.onClick = () => { v.onClick = () => {
v.backgroundColor = colors[++idx % colors.length]; v.backgroundColor = colors[++idx % colors.length];
}; };
modal(context).toast("Dismissed after 3 seconds"); modal(this.context).toast("Dismissed after 3 seconds");
setTimeout(() => { setTimeout(() => {
popover(context).dismiss(); popover(this.context).dismiss();
}, 3000); }, 3000);
}), }),
], ],