support corners
This commit is contained in:
pengfei.zhou
parent
689e2713f0
commit
adf0077759
508
dist/Counter.js
vendored
508
dist/Counter.js
vendored
@ -14,12 +14,6 @@ const colors = [
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
].map(e => doric.Color.parse(e));
|
||||
function label(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
});
|
||||
}
|
||||
|
||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
@ -27,148 +21,372 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
let ModalDemo = class ModalDemo extends doric.Panel {
|
||||
function box(idx = 0) {
|
||||
return (new doric.Stack).also(it => {
|
||||
it.width = it.height = 20;
|
||||
it.backgroundColor = colors[idx || 0];
|
||||
});
|
||||
}
|
||||
function label(str) {
|
||||
return doric.text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
});
|
||||
}
|
||||
let EffectsDemo = class EffectsDemo extends doric.Panel {
|
||||
build(rootView) {
|
||||
doric.scroller(doric.vlayout([
|
||||
doric.text({
|
||||
text: "Modal",
|
||||
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: doric.Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('toast on bottom'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().just(),
|
||||
onClick: () => {
|
||||
doric.modal(context).toast('This is a toast.');
|
||||
}
|
||||
}),
|
||||
label('toast on top'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().just(),
|
||||
onClick: () => {
|
||||
doric.modal(context).toast('This is a toast.', doric.Gravity.Top);
|
||||
}
|
||||
}),
|
||||
label('toast on center'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().just(),
|
||||
onClick: () => {
|
||||
doric.modal(context).toast('This is a toast.', doric.Gravity.Center);
|
||||
}
|
||||
}),
|
||||
doric.text({
|
||||
text: "Alert",
|
||||
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[2],
|
||||
textAlignment: doric.Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().just(),
|
||||
onClick: () => {
|
||||
doric.modal(context).alert({
|
||||
msg: 'This is alert.',
|
||||
title: 'Alert title',
|
||||
okLabel: "OkLabel"
|
||||
}).then(e => {
|
||||
doric.modal(context).toast('Clicked OK.');
|
||||
});
|
||||
}
|
||||
}),
|
||||
doric.text({
|
||||
text: "Confirm",
|
||||
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[3],
|
||||
textAlignment: doric.Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().just(),
|
||||
onClick: () => {
|
||||
doric.modal(context).confirm({
|
||||
msg: 'This is Confirm.',
|
||||
title: 'Confirm title',
|
||||
okLabel: "OkLabel",
|
||||
cancelLabel: 'CancelLabel',
|
||||
}).then(() => {
|
||||
doric.modal(context).toast('Clicked OK.');
|
||||
}, () => {
|
||||
doric.modal(context).toast('Clicked Cancel.');
|
||||
});
|
||||
}
|
||||
}),
|
||||
doric.text({
|
||||
text: "Prompt",
|
||||
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
backgroundColor: colors[4],
|
||||
textAlignment: doric.Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: doric.Color.WHITE,
|
||||
layoutConfig: doric.layoutConfig().just(),
|
||||
onClick: () => {
|
||||
doric.modal(context).prompt({
|
||||
msg: 'This is Prompt.',
|
||||
title: 'Prompt title',
|
||||
okLabel: "OkLabel",
|
||||
cancelLabel: 'CancelLabel',
|
||||
}).then(e => {
|
||||
doric.modal(context).toast(`Clicked OK.Input:${e}`);
|
||||
}, e => {
|
||||
doric.modal(context).toast(`Clicked Cancel.Input:${e}`);
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: doric.layoutConfig().most().configHeight(doric.LayoutSpec.FIT),
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
})).apply({
|
||||
layoutConfig: doric.layoutConfig().most(),
|
||||
doric.hlayout([
|
||||
doric.vlayout([
|
||||
label("Origin view"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Border"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 10,
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
]).apply({ space: 20 }),
|
||||
doric.hlayout([
|
||||
doric.vlayout([
|
||||
label("Border,Corner"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
corners: 10,
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Border,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 10,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Border,Corner,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
corners: 10,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
]).apply({ space: 20 }),
|
||||
doric.hlayout([
|
||||
doric.vlayout([
|
||||
label("Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
radius: 10,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Shadow,offset"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Shadow,opacity"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 0.5,
|
||||
color: colors[1],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Shadow,color"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[2],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
]).apply({ space: 20 }),
|
||||
doric.hlayout([
|
||||
doric.vlayout([
|
||||
label("Corner round"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner left top"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
leftTop: 50,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner right top"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
rightTop: 50,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner left bottom"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
leftBottom: 50,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
doric.vlayout([
|
||||
label("Corner right bottom"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
rightBottom: 50,
|
||||
},
|
||||
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
]).apply({
|
||||
gravity: doric.Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
]).apply({ space: 20 }),
|
||||
]).also(it => {
|
||||
it.space = 20;
|
||||
})).also(it => {
|
||||
it.layoutConfig = doric.layoutConfig().most();
|
||||
}).in(rootView);
|
||||
}
|
||||
};
|
||||
ModalDemo = __decorate([
|
||||
EffectsDemo = __decorate([
|
||||
Entry
|
||||
], ModalDemo);
|
||||
//# sourceMappingURL=ModalDemo.js.map
|
||||
], EffectsDemo);
|
||||
//# sourceMappingURL=EffectsDemo.js.map
|
||||
|
||||
11
dist/index.js
vendored
11
dist/index.js
vendored
@ -3845,6 +3845,17 @@ return __module.exports;
|
||||
this.callJSResponse(prop);
|
||||
};
|
||||
break;
|
||||
case 'corners':
|
||||
if (typeof prop === 'object') {
|
||||
this.view.style.borderTopLeftRadius = toPixelString(prop.leftTop);
|
||||
this.view.style.borderTopRightRadius = toPixelString(prop.rightTop);
|
||||
this.view.style.borderBottomRightRadius = toPixelString(prop.rightBottom);
|
||||
this.view.style.borderBottomLeftRadius = toPixelString(prop.leftBottom);
|
||||
}
|
||||
else {
|
||||
this.view.style.borderRadius = toPixelString(prop);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
set backgroundColor(v) {
|
||||
|
||||
2
dist/index.js.map
vendored
2
dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
@ -249,6 +249,16 @@ export abstract class DoricViewNode {
|
||||
this.callJSResponse(prop as string)
|
||||
}
|
||||
break
|
||||
case 'corners':
|
||||
if (typeof prop === 'object') {
|
||||
this.view.style.borderTopLeftRadius = toPixelString(prop.leftTop)
|
||||
this.view.style.borderTopRightRadius = toPixelString(prop.rightTop)
|
||||
this.view.style.borderBottomRightRadius = toPixelString(prop.rightBottom)
|
||||
this.view.style.borderBottomLeftRadius = toPixelString(prop.leftBottom)
|
||||
} else {
|
||||
this.view.style.borderRadius = toPixelString(prop)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user