• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# menu开发指导
2
3
4提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作，具体用法请参考[menu](../reference/arkui-js/js-components-basic-menu.md)。
5
6
7## 创建menu组件
8
9在pages/index目录下的hml文件中创建一个menu组件，添加target、type、title属性。
10
11
12```html
13<!-- xxx.hml-->
14<div class="container">
15  <text class="title-text" id="textId">show menu</text>
16  <menu target="textId" type="click" title="title">
17    <option value="Item 1">Item 1</option>
18    <option value="Item 2">Item 2</option>
19    <option value="Item 3">Item 3</option>
20  </menu>
21</div>
22```
23
24
25```css
26/* xxx.css */
27.container{
28  width: 100%;
29  height: 100%;
30  flex-direction: column;
31  background-color: #F1F3F5;
32  align-items: center;
33  justify-content: center;
34  width: 100%;
35}
36.title-text{
37  font-size: 35px;
38}
39```
40
41![zh-cn_image_0000001226815299](figures/zh-cn_image_0000001226815299.gif)
42
43> **说明：**
44> - menu仅支持[option](../reference/arkui-js/js-components-basic-option.md)子组件。
45>
46> - menu组件不支持focusable、disabled属性。
47
48
49## 设置样式
50
51为menu组件设置样式，例如字体颜色、大小、字符间距等。
52
53
54```html
55<!-- xxx.hml-->
56<div class="container">
57  <text class="title-text" id="textId">show menu</text>
58  <menu target="textId" type="click" title="title">
59    <option value="Item 1">Item 1</option>
60    <option value="Item 2">Item 2</option>
61    <option value="Item 3">Item 3</option>
62  </menu>
63</div>
64```
65
66
67```css
68/* xxx.css */
69.container{
70  width: 100%;
71  height: 100%;
72  flex-direction: column;
73  background-color: #F1F3F5;
74  align-items: center;
75  justify-content: center;
76  width: 100%;
77}
78.title-text{
79  font-size: 35px;
80  background-color: #5a5aee;
81  color: white;
82  width: 70%;
83  text-align: center;
84  height: 85px;
85  border-radius: 12px;
86}
87menu{
88  text-color: blue;
89  font-size: 35px;
90  letter-spacing: 2px;
91}
92option{
93  color: #6a6aef;
94  font-size: 30px;
95}
96```
97
98![zh-cn_image_0000001181337170](figures/zh-cn_image_0000001181337170.gif)
99
100
101## 绑定事件
102
103为menu组件绑定onselected事件（菜单中某个值被点击选中时触发）和oncancel事件（取消操作时触发），点击text组件调用show方法可设置menu组件的坐标。
104
105
106```html
107<!-- xxx.hml-->
108<div class="container">
109  <text  class="title-text" id="textId" onclick="textClick">show menu</text>
110  <menu  title="title" onselected="select" oncancel="cancel" id="menuId">
111    <option value="Item 1">Item 1</option>
112    <option value="Item 2">Item 2</option>
113    <option value="Item 3">Item 3</option>
114  </menu>
115</div>
116```
117
118
119```css
120/* xxx.css */
121.container{
122  width: 100%;
123  height: 100%;
124  flex-direction: column;
125  background-color: #F1F3F5;
126  width: 100%;
127}
128.title-text{
129  font-size: 35px;
130  background-color: #5a5aee;
131  color: white;
132  width: 70%;
133  text-align: center;
134  height: 85px;
135  border-radius: 12px;
136  margin-top: 500px;
137  margin-left: 15%;
138}
139menu{
140  text-color: blue;
141  font-size: 35px;
142  letter-spacing: 2px;
143}
144option{
145  color: #6a6aef;
146  font-size: 30px;
147}
148```
149
150
151```js
152// xxx.js
153import promptAction from '@ohos.promptAction';
154export default {
155  select(e) {
156    promptAction.showToast({
157      message: e.value
158    })
159  },
160  cancel(){
161    promptAction.showToast({
162      message: "cancel"
163    })
164  },
165  textClick() {
166    this.$element("menuId").show({x:175,y:590});
167  },
168}
169```
170
171![zh-cn_image_0000001181495744](figures/zh-cn_image_0000001181495744.gif)
172
173
174## 场景示例
175
176本场景中开发者可点击toggle组件修改文字颜色，选择menu组件修改渐变色块大小。
177
178
179```html
180<!-- xxx.hml-->
181<div class="container">
182    <div class="contentToggle">
183        <toggle class="toggle" for="{{item in togglesList}}" onclick="toggleClick({{$idx}})" checked="{{item.checked}}">{{item.name}}</toggle>
184    </div>
185    <text class="size" style="color: {{color}};">width:{{width}},height:{{height}}</text>
186    <div style="width: {{width}}px;height: {{height}}px; background-color: cornflowerblue;"></div>
187    <text id="menuId" class="text">change size</text>
188    <menu onselected="select" oncancel="cancel" target="menuId">
189        <option value="{{item.value}}" for="item in optionList">{{item.text}}</option>
190    </menu>
191</div>
192```
193
194
195```css
196/* xxx.css */
197.container{
198  flex-direction: column;
199  background-color: #F1F3F5;
200  width: 100%;
201  justify-content: center;
202  align-items: center;
203}
204.contentToggle{
205  width: 100%;
206  justify-content: space-around;
207}
208.toggle{
209  padding: 10px;
210  height:80px;
211  font-size: 35px;
212  width: 200px;
213  height: 85px;
214}
215.size{
216  width: 100%;
217  height: 200px;
218  text-align: center;
219  font-size: 40px;
220  text-align: center;
221}
222.text{
223  width: 300px;
224  height: 80px;
225  background-color: #615def;
226  color: white;
227  font-size: 35px;
228  text-align: center;
229  margin-top: 100px;
230}
231menu{
232  text-color: blue;
233  font-size: 35px;
234  letter-spacing: 2px;
235}
236option{
237  color: #6a6aef;
238  font-size: 30px;
239}
240```
241
242
243```js
244// xxx.js
245export default {
246  data:{
247    fresh: false,
248    width: 200,
249    height: 200,
250    color: '',
251    optionList:[
252      {text:'200 x 200',value:2},
253      {text:'300 x 300',value:3},
254      {text:'500 x 500',value:5},
255    ],
256    togglesList:[
257      {name:"red", checked:false},
258      {name:"blue", checked:false},
259      {name: "black", checked:false},
260    ],
261  },
262  toggleClick(index) {
263    for(let i=0;i<this.togglesList.length;i++) {
264      if (i == index) {
265      this.color = this.togglesList[index].name;
266      this.togglesList[i].checked = true;
267      }else {
268        this.togglesList[i].checked = false;
269      }
270    }
271  },
272  select(e) {
273    this.width = e.value * 100;
274    this.height = e.value * 100;
275  }
276}
277```
278
279![zh-cn_image_0000001226815403](figures/zh-cn_image_0000001226815403.gif)
280
281