update component demo
This commit is contained in:
parent
57643c5990
commit
b56af71c6f
@ -1,14 +1,16 @@
|
||||
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"
|
||||
|
||||
@Entry
|
||||
class ComponentDemo extends Panel {
|
||||
build(root: Root) {
|
||||
let richTitle: RichTitleView
|
||||
scroller(
|
||||
vlayout(
|
||||
[
|
||||
richTitleView().applyChild({
|
||||
richTitle = richTitleView().applyChild({
|
||||
title: {
|
||||
text: "This is title"
|
||||
},
|
||||
@ -19,7 +21,39 @@ class ComponentDemo extends Panel {
|
||||
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: {
|
||||
|
@ -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
|
||||
export class PreferenceView extends HLayout {
|
||||
|
||||
title: Text
|
||||
subTitle: Text
|
||||
switch: Switch
|
||||
constructor() {
|
||||
super()
|
||||
hlayout(
|
||||
[],
|
||||
[
|
||||
vlayout(
|
||||
[
|
||||
this.title = text({
|
||||
textSize: 20,
|
||||
}),
|
||||
this.subTitle = text({
|
||||
textSize: 12,
|
||||
}),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig(),
|
||||
layoutConfig: layoutConfig().fit().configWeight(1),
|
||||
space: 2,
|
||||
}),
|
||||
this.switch = switchView({
|
||||
state: true,
|
||||
}),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().mostWidth().fitHeight(),
|
||||
gravity: Gravity.Center,
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 10,
|
||||
bottom: 10,
|
||||
}
|
||||
}).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
|
||||
}
|
Reference in New Issue
Block a user