feat:Popover area do not over the root view's area

This commit is contained in:
pengfei.zhou
2020-09-04 15:04:55 +08:00
committed by osborn
parent a8cbdc0c1d
commit cf2b5b3fac
3 changed files with 127 additions and 43 deletions

View File

@@ -1,44 +1,97 @@
import { Group, Panel, popover, text, gravity, Color, LayoutSpec, vlayout, Gravity, scroller, layoutConfig, modal, } from "doric";
import {
stack,
Group,
Panel,
popover,
text,
gravity,
Color,
LayoutSpec,
vlayout,
Gravity,
scroller,
layoutConfig,
modal,
navbar,
} from "doric";
import { title, label, colors } from "./utils";
@Entry
class PopoverDemo extends Panel {
build(rootView: Group): void {
scroller(vlayout([
title("Popover Demo"),
label('Popover').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
popover(context).show(text({
width: 200,
height: 50,
backgroundColor: colors[0],
textColor: Color.WHITE,
layoutConfig: layoutConfig().just().configAlignment(Gravity.Center),
text: "This is PopOver Window",
}).also(v => {
let idx = 0
v.onClick = () => {
v.backgroundColor = colors[(++idx) % colors.length]
}
modal(context).toast('Dismissed after 3 seconds')
setTimeout(() => {
popover(context).dismiss()
}, 3000)
}))
build(rootView: Group): void {
scroller(
vlayout([
title("Popover Demo"),
label("show navbar").apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
navbar(context).setHidden(false);
},
}),
label("hide navbar").apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
navbar(context).setHidden(true);
},
}),
label("Popover").apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
onClick: () => {
popover(context).show(
stack(
[
text({
width: 200,
height: 50,
backgroundColor: colors[0],
textColor: Color.WHITE,
layoutConfig: layoutConfig()
.just()
.configAlignment(Gravity.Center),
text: "This is PopOver Window",
}).also((v) => {
let idx = 0;
v.onClick = () => {
v.backgroundColor = colors[++idx % colors.length];
};
modal(context).toast("Dismissed after 3 seconds");
setTimeout(() => {
popover(context).dismiss();
}, 3000);
}),
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.RED.alpha(1),
}
}),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(),
space: 10,
})).apply({
layoutConfig: layoutConfig().most(),
}).in(rootView)
}
}
)
);
},
}),
]).apply({
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(),
space: 10,
})
)
.apply({
layoutConfig: layoutConfig().most(),
})
.in(rootView);
}
}