1# menu开发指导 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @Armstrong15--> 5<!--Designer: @zhanghaibo0--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9 10提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作，具体用法请参考[menu](../reference/apis-arkui/arkui-js/js-components-basic-menu.md)。 11 12 13## 创建menu组件 14 15在pages/index目录下的hml文件中创建一个menu组件，添加target、type、title属性。 16 17 18```html 19<!-- xxx.hml--> 20<div class="container"> 21 <text class="title-text" id="textId">show menu</text> 22 <menu target="textId" type="click" title="title"> 23 <option value="Item 1">Item 1</option> 24 <option value="Item 2">Item 2</option> 25 <option value="Item 3">Item 3</option> 26 </menu> 27</div> 28``` 29 30 31```css 32/* xxx.css */ 33.container{ 34 width: 100%; 35 height: 100%; 36 flex-direction: column; 37 background-color: #F1F3F5; 38 align-items: center; 39 justify-content: center; 40 width: 100%; 41} 42.title-text{ 43 font-size: 35px; 44} 45``` 46 47 48 49> **说明：** 50> - menu仅支持[option](../reference/apis-arkui/arkui-js/js-components-basic-option.md)子组件。 51> 52> - menu组件不支持focusable、disabled属性。 53 54 55## 设置样式 56 57为menu组件设置样式，例如字体颜色、大小、字符间距等。 58 59 60```html 61<!-- xxx.hml--> 62<div class="container"> 63 <text class="title-text" id="textId">show menu</text> 64 <menu target="textId" type="click" title="title"> 65 <option value="Item 1">Item 1</option> 66 <option value="Item 2">Item 2</option> 67 <option value="Item 3">Item 3</option> 68 </menu> 69</div> 70``` 71 72 73```css 74/* xxx.css */ 75.container{ 76 width: 100%; 77 height: 100%; 78 flex-direction: column; 79 background-color: #F1F3F5; 80 align-items: center; 81 justify-content: center; 82 width: 100%; 83} 84.title-text{ 85 font-size: 35px; 86 background-color: #5a5aee; 87 color: white; 88 width: 70%; 89 text-align: center; 90 height: 85px; 91 border-radius: 12px; 92} 93.menu{ 94 text-color: blue; 95 font-size: 35px; 96 letter-spacing: 2px; 97} 98option{ 99 color: #6a6aef; 100 font-size: 30px; 101} 102``` 103 104 105 106 107## 绑定事件 108 109为menu组件绑定oncancel事件（取消操作时触发）。 110 111 112```html 113<!-- xxx.hml--> 114<div class="container"> 115 <text class="title-text" id="textId" onclick="textClick">show menu</text> 116 <menu title="title" oncancel="cancel" id="menuId"> 117 <option value="Item 1">Item 1</option> 118 <option value="Item 2">Item 2</option> 119 <option value="Item 3">Item 3</option> 120 </menu> 121</div> 122``` 123 124 125```css 126/* xxx.css */ 127.container{ 128 width: 100%; 129 height: 100%; 130 flex-direction: column; 131 background-color: #F1F3F5; 132 width: 100%; 133} 134.title-text{ 135 font-size: 35px; 136 background-color: #5a5aee; 137 color: white; 138 width: 70%; 139 text-align: center; 140 height: 85px; 141 border-radius: 12px; 142 margin-top: 500px; 143 margin-left: 15%; 144} 145menu{ 146 text-color: blue; 147 font-size: 35px; 148 letter-spacing: 2px; 149} 150option{ 151 color: #6a6aef; 152 font-size: 30px; 153} 154``` 155 156 157```js 158// xxx.js 159import promptAction from '@ohos.promptAction'; 160export default { 161 cancel() { 162 promptAction.showToast({ 163 message: "cancel" 164 }) 165 }, 166 textClick() { 167 this.$element("menuId").show({ x: 175,y: 590 }); 168 } 169} 170``` 171 172 173
