update component demo

This commit is contained in:
pengfei.zhou 2021-05-14 19:55:32 +08:00 committed by osborn
parent 57643c5990
commit b56af71c6f
2 changed files with 95 additions and 7 deletions

View File

@ -1,14 +1,16 @@
import { layoutConfig, LayoutSpec, Panel, Root, scroller, vlayout } from "doric"; import { layoutConfig, LayoutSpec, Panel, Root, scroller, vlayout } from "doric";
import { richTitleView, } from "./components/RichTitleView"; import { preferenceView } from "./components/PreferenceView";
import { RichTitleView, richTitleView } from "./components/RichTitleView";
import logo from "./images/logo_w.png" import logo from "./images/logo_w.png"
@Entry @Entry
class ComponentDemo extends Panel { class ComponentDemo extends Panel {
build(root: Root) { build(root: Root) {
let richTitle: RichTitleView
scroller( scroller(
vlayout( vlayout(
[ [
richTitleView().applyChild({ richTitle = richTitleView().applyChild({
title: { title: {
text: "This is title" text: "This is title"
}, },
@ -19,7 +21,39 @@ class ComponentDemo extends Panel {
imageBase64: logo, imageBase64: logo,
} }
}), }),
preferenceView().applyChild({
title: {
text: "Show Icon"
},
switch: {
state: true,
onSwitch: (ret) => {
richTitle.icon.hidden = !ret
}
}
}),
preferenceView().applyChild({
title: {
text: "Show Title"
},
switch: {
state: true,
onSwitch: (ret) => {
richTitle.title.hidden = !ret
}
}
}),
preferenceView().applyChild({
title: {
text: "Show Subtitle"
},
switch: {
state: true,
onSwitch: (ret) => {
richTitle.subTitle.hidden = !ret
}
}
}),
], ],
{ {
layoutConfig: { layoutConfig: {

View File

@ -1,14 +1,68 @@
import { hlayout, HLayout, layoutConfig, ViewComponent } from "doric"; import { Switch, Gravity, hlayout, HLayout, layoutConfig, switchView, Text, text, ViewComponent, vlayout } from "doric";
@ViewComponent @ViewComponent
export class PreferenceView extends HLayout { export class PreferenceView extends HLayout {
title: Text
subTitle: Text
switch: Switch
constructor() { constructor() {
super() super()
hlayout( hlayout(
[], [
vlayout(
[
this.title = text({
textSize: 20,
}),
this.subTitle = text({
textSize: 12,
}),
],
{
layoutConfig: layoutConfig().fit().configWeight(1),
space: 2,
}),
this.switch = switchView({
state: true,
}),
],
{ {
layoutConfig: layoutConfig(), layoutConfig: layoutConfig().mostWidth().fitHeight(),
gravity: Gravity.Center,
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
}
}).in(this) }).in(this)
this.layoutConfig = layoutConfig().mostWidth().fitHeight()
} }
applyChild(config: {
title?: Partial<Text>,
subTitle?: Partial<Text>,
switch?: Partial<Switch>,
}) {
this.title.hidden = !!!config.title?.text
this.subTitle.hidden = !!!config.subTitle?.text
if (config.title) {
this.title.apply(config.title)
}
if (config.subTitle) {
this.subTitle.apply(config.subTitle)
}
if (config.switch) {
this.switch.apply(config.switch)
}
return this
}
}
export function preferenceView(config?: Partial<PreferenceView>) {
const ret = new PreferenceView
if (config) {
ret.apply(config)
}
return ret
} }