js:change apis of declarable
This commit is contained in:
@@ -1,37 +1,40 @@
|
||||
import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, Draggable, modal, Gravity, stack} from "doric";
|
||||
import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, Draggable, modal, Gravity, stack, text } from "doric";
|
||||
import { title } from "./utils";
|
||||
@Entry
|
||||
class DraggableDemo extends Panel {
|
||||
build(root: Group) {
|
||||
let text = (new Text).also(it => {
|
||||
it.layoutConfig = layoutConfig().just().configAlignment(Gravity.Center)
|
||||
it.width = 100
|
||||
it.height = 30
|
||||
it.textColor = Color.parse('#ff0000')
|
||||
it.onClick = () => {
|
||||
modal(context).toast('Clicked')
|
||||
}
|
||||
})
|
||||
let drag: Draggable
|
||||
drag = draggable({
|
||||
onDrag: (x: number, y: number) => {
|
||||
text.text = "x: " + x.toFixed(0) + " y: " + y.toFixed(0)
|
||||
}
|
||||
}, [ text ]).apply({
|
||||
layoutConfig: layoutConfig().just(),
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: Color.WHITE
|
||||
})
|
||||
vlayout([
|
||||
title("Draggable Demo"),
|
||||
stack([
|
||||
drag,
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().most()
|
||||
let textView: Text
|
||||
let drag = draggable(
|
||||
textView = text({
|
||||
layoutConfig: layoutConfig().just().configAlignment(Gravity.Center),
|
||||
width: 100,
|
||||
height: 30,
|
||||
textColor: Color.RED,
|
||||
onClick: () => {
|
||||
modal(context).toast('Clicked')
|
||||
}
|
||||
}),
|
||||
{
|
||||
onDrag: (x: number, y: number) => {
|
||||
textView.text = "x: " + x.toFixed(0) + " y: " + y.toFixed(0)
|
||||
},
|
||||
layoutConfig: layoutConfig().just(),
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: Color.WHITE
|
||||
})
|
||||
])
|
||||
.apply({
|
||||
vlayout(
|
||||
[
|
||||
title("Draggable Demo"),
|
||||
stack(
|
||||
[
|
||||
drag,
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most()
|
||||
})
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
backgroundColor: Color.BLACK
|
||||
})
|
||||
|
@@ -99,66 +99,74 @@ class LayoutDemo extends Panel {
|
||||
it.gravity = gravity().center()
|
||||
}),
|
||||
label("Horizontal Layout(Weight)"),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
hlayout(
|
||||
[
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(2),
|
||||
box(4),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}),
|
||||
box(2),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
hlayout([
|
||||
box(3),
|
||||
boxStr('weight=1', 2).apply({
|
||||
hlayout(
|
||||
[
|
||||
box(3),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
hlayout([
|
||||
box(3),
|
||||
box(2),
|
||||
boxStr('weight=1', 4).apply({
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
box(3),
|
||||
box(2),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}
|
||||
),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
@@ -175,16 +183,18 @@ class LayoutDemo extends Panel {
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}
|
||||
),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
|
Reference in New Issue
Block a user