Skip to content

Commit 232dcac

Browse files
phodalphodal
committed
feat(actions): add new component types
- Added new component types Button, Checkbox, CheckboxGroup, Image, Menu, Text, TextArea, TextInput, Radio, Toggle, Web. - Each component type includes a description and an example of its usage. - These component types enhance the options for creating UI elements in the app.
1 parent d5c89cc commit 232dcac

File tree

2 files changed

+154
-17
lines changed

2 files changed

+154
-17
lines changed

‎exts/ext-harmonyos/src/main/kotlin/cc/unitmesh/harmonyos/actions/AndroidPageToArkUiAction.kt

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,3 @@ class AutoArkUi(project: Project, selectedText: @NlsSafe String, editor: Editor)
3939
// parse select text
4040
}
4141

42-
enum class ComponentType(description: String, example: String) {
43-
Button(
44-
"Button", "Button('Ok', { type: ButtonType.Normal, stateEffect: true }) \n" +
45-
" .borderRadius(8) \n" +
46-
" .backgroundColor(0x317aff) \n" +
47-
" .width(90)\n" +
48-
" .height(40)"
49-
),
50-
Radio(
51-
"Radio", " Radio({ value: 'Radio1', group: 'radioGroup' })\n" +
52-
" .onChange((isChecked: boolean) => {\n" +
53-
" if(isChecked) {\n" +
54-
" //需要执行的操作\n" +
55-
" }\n" +
56-
" })"
57-
)
58-
}

‎exts/ext-harmonyos/src/main/kotlin/cc/unitmesh/harmonyos/actions/ComponentType.kt

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
package cc.unitmesh.harmonyos.actions
2+
3+
enum class ComponentType(description: String, example: String) {
4+
Button(
5+
"可快速创建不同样式的按钮。", "Button('Ok', { type: ButtonType.Normal, stateEffect: true }) \n" +
6+
" .borderRadius(8) \n" +
7+
" .backgroundColor(0x317aff) \n" +
8+
" .width(90)\n" +
9+
" .height(40)"
10+
),
11+
Checkbox(
12+
"提供多选框组件，通常用于某选项的打开或关闭。",
13+
"Checkbox({name: 'checkbox1', group: 'checkboxGroup'})\n" +
14+
" .select(true)\n" +
15+
" .selectedColor(0xed6f21)\n" +
16+
" .onChange((value: boolean) => {\n" +
17+
" console.info('Checkbox1 change is'+ value)\n" +
18+
" })"
19+
),
20+
CheckboxGroup(
21+
"多选框群组，用于控制多选框全选或者不全选状态。",
22+
"CheckboxGroup({ group: 'checkboxGroup' })\n" +
23+
" .selectedColor('#007DFF')\n" +
24+
" .onChange((itemName: CheckboxGroupResult) => {\n" +
25+
" console.info(\"checkbox group content\" + JSON.stringify(itemName))\n" +
26+
" })"
27+
),
28+
Image(
29+
"Image为图片组件，常用于在应用中显示图片。Image支持加载string、PixelMap和Resource类型的数据源，支持png、jpg、bmp、svg和gif类型的图片格式。",
30+
"Image(this.src)\n" +
31+
" .width(120).height(120)\n" +
32+
" .onClick(() => {\n" +
33+
" if (this.src == this.on || this.src == this.off2on) {\n" +
34+
" this.src = this.on2off\n" +
35+
" } else {\n" +
36+
" this.src = this.off2on\n" +
37+
" }\n" +
38+
" })\n" +
39+
" .onFinish(() => {\n" +
40+
" if (this.src == this.off2on) {\n" +
41+
" this.src = this.on\n" +
42+
" } else {\n" +
43+
" this.src = this.off\n" +
44+
" }\n" +
45+
" })"
46+
47+
),
48+
Menu(
49+
"以垂直列表形式显示的菜单。",
50+
" MenuItemGroup({ header: '小标题' }) {\n" +
51+
" MenuItem({ content: \"菜单选项\" })\n" +
52+
" .selectIcon(true)\n" +
53+
" .selected(this.select)\n" +
54+
" .onChange((selected) => {\n" +
55+
" console.info(\"menuItem select\" + selected);\n" +
56+
" this.iconStr2 = \$r(\"app.media.icon\");\n" +
57+
" })\n" +
58+
" MenuItem({\n" +
59+
" startIcon: \$r(\"app.media.view_list_filled\"),\n" +
60+
" content: \"菜单选项\",\n" +
61+
" endIcon: \$r(\"app.media.arrow_right_filled\"),\n" +
62+
" builder: this.SubMenu.bind(this)\n" +
63+
" })\n" +
64+
" }"
65+
),
66+
Text(
67+
"显示一段文本的组件。。", "Text('TextAlign set to Center.')\n" +
68+
" .textAlign(TextAlign.Center)\n" +
69+
" .fontSize(12)\n" +
70+
" .border({ width: 1 })\n" +
71+
" .padding(10)\n" +
72+
" .width('100%')"
73+
),
74+
TextArea(
75+
"多行文本输入框。",
76+
"TextArea({\n" +
77+
" placeholder: 'The text area can hold an unlimited amount of text. input your word...',\n" +
78+
" controller: this.controller\n" +
79+
"})\n" +
80+
" .placeholderFont({ size: 16, weight: 400 })\n" +
81+
" .width(336)\n" +
82+
" .height(56)\n" +
83+
" .margin(20)\n" +
84+
" .fontSize(16)\n" +
85+
" .fontColor('#182431')\n" +
86+
" .backgroundColor('#FFFFFF')\n" +
87+
" .onChange((value: string) => {\n" +
88+
" this.text = value\n" +
89+
" })"
90+
),
91+
TextInput(
92+
"单行文本输入框组件。",
93+
"TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })\n" +
94+
" .placeholderColor(Color.Grey)\n" +
95+
" .placeholderFont({ size: 14, weight: 400 })\n" +
96+
" .caretColor(Color.Blue)\n" +
97+
" .width(400)\n" +
98+
" .height(40)\n" +
99+
" .margin(20)\n" +
100+
" .fontSize(14)\n" +
101+
" .fontColor(Color.Black)\n" +
102+
" .inputFilter('[a-z]', (e) => {\n" +
103+
" console.log(JSON.stringify(e))\n" +
104+
" })\n" +
105+
" .onChange((value: string) => {\n" +
106+
" this.text = value\n" +
107+
" })"
108+
),
109+
Radio(
110+
"提供相应的用户交互选择项。", " Radio({ value: 'Radio1', group: 'radioGroup' })\n" +
111+
" .onChange((isChecked: boolean) => {\n" +
112+
" if(isChecked) {\n" +
113+
" //需要执行的操作\n" +
114+
" }\n" +
115+
" })"
116+
),
117+
Toggle(
118+
"Toggle为开关组件，常用于在应用中进行开关操作。",
119+
"Toggle({ type: ToggleType.Switch, isOn: false })\n" +
120+
" .selectedColor('#007DFF')\n" +
121+
" .switchPointColor('#FFFFFF')\n" +
122+
" .onChange((isOn: boolean) => {\n" +
123+
" console.info('Component status:' + isOn)\n" +
124+
" })"
125+
),
126+
Web(
127+
"提供具有网页显示能力的Web组件，@ohos.web.webview提供web控制能力。",
128+
"Web({ src: \$rawfile(\"xxx.html\"), controller: this.controller })\n" +
129+
" .onBeforeUnload((event) => {\n" +
130+
" console.log(\"event.url:\" + event.url)\n" +
131+
" console.log(\"event.message:\" + event.message)\n" +
132+
" AlertDialog.show({\n" +
133+
" title: 'onBeforeUnload',\n" +
134+
" message: 'text',\n" +
135+
" primaryButton: {\n" +
136+
" value: 'cancel',\n" +
137+
" action: () => {\n" +
138+
" event.result.handleCancel()\n" +
139+
" }\n" +
140+
" },\n" +
141+
" secondaryButton: {\n" +
142+
" value: 'ok',\n" +
143+
" action: () => {\n" +
144+
" event.result.handleConfirm()\n" +
145+
" }\n" +
146+
" },\n" +
147+
" cancel: () => {\n" +
148+
" event.result.handleCancel()\n" +
149+
" }\n" +
150+
" })\n" +
151+
" return true\n" +
152+
" })"
153+
)
154+
}

0 commit comments

Comments
 (0)