update demo
This commit is contained in:
parent
a5ca58c38a
commit
fc6b465b92
@ -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}`)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
@ -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,
|
||||||
|
@ -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);
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
|
Reference in New Issue
Block a user