• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# <menu> Development
2
3
4The <menu> component serves as a temporary pop-up window to display operations that users can perform. For details, see [menu](../reference/arkui-js/js-components-basic-menu.md).
5
6
7## Creating a <menu> Component
8
9Create a **<menu>** component in the .hml file under **pages/index** and add the **target**, **type**, and **title** attributes.
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![en-us_image_0000001232162284](figures/en-us_image_0000001232162284.gif)
42
43> **NOTE**
44> - The **&lt;menu&gt;** component supports only the [option](../reference/arkui-js/js-components-basic-option.md) child component.
45>
46> - The **&lt;menu&gt;** component does not support the **focusable** and **disabled** attributes.
47
48
49## Setting Styles
50
51Set the style for the **&lt;menu&gt;** component, such as the font color, size, and character spacing.
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![en-us_image_0000001275803137](figures/en-us_image_0000001275803137.gif)
99
100
101## Binding Events
102
103Bind the **&lt;menu&gt;** component with the **onselected** event (triggered when a value in the menu is selected) and the **oncancel** event (triggered when an operation is canceled). Click the **&lt;text&gt;** component to call the **show** method to set the coordinates of the **&lt;menu&gt;** component.
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![en-us_image_0000001276162713](figures/en-us_image_0000001276162713.gif)
172
173
174## Example Scenario
175
176Click the **&lt;toggle&gt;** component to change the text color and select the **&lt;menu&gt;** component to change the size of the gradient color block.
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:linear-gradient(to right,#FF0000,#0000FF);"></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
245import promptAction from '@ohos.promptAction';
246export default {
247  data:{
248    fresh: false,
249    width: 200,
250    height: 200,
251    color: '',
252    optionList:[
253      {text:'200 x 200',value:2},
254      {text:'300 x 300',value:3},
255      {text:'500 x 500',value:5},
256    ],
257    togglesList:[
258      {name:"red", checked:false},
259      {name:"blue", checked:false},
260      {name: "black", checked:false},
261    ],
262  },
263  toggleClick(index) {
264    for(let i=0;i<this.togglesList.length;i++) {
265      if (i == index) {
266      this.color = this.togglesList[index].name;
267      this.togglesList[i].checked = true;
268      }else {
269        this.togglesList[i].checked = false;
270      }
271    }
272  },
273  select(e) {
274    this.width = e.value * 100;
275    this.height = e.value * 100;
276  }
277}
278```
279
280![en-us_image_0000001276003485](figures/en-us_image_0000001276003485.gif)
281