【鸿蒙实战开发】菜单组件（menu）开发指导

提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作，具体用法请参考menu。

创建menu组件

在pages/index目录下的hml文件中创建一个menu组件，添加target、type、title属性。

<!-- xxx.hml-->
<div class="container">
  <text class="title-text" id="textId">show menu</text>
  <menu target="textId" type="click" title="title">
    <option value="Item 1">Item 1</option>
    <option value="Item 2">Item 2</option>
    <option value="Item 3">Item 3</option>
  </menu>
</div>

/* xxx.css */
.container{
  width: 100%;
  height: 100%; 
  flex-direction: column;
  background-color: #F1F3F5;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.title-text{
  font-size: 35px;
}

说明

• menu仅支持option子组件。

• menu组件不支持focusable、disabled属性。

设置样式

为menu组件设置样式，例如字体颜色、大小、字符间距等。

<!-- xxx.hml-->
<div class="container">
  <text class="title-text" id="textId">show menu</text>
  <menu target="textId" type="click" title="title">
    <option value="Item 1">Item 1</option>
    <option value="Item 2">Item 2</option>
    <option value="Item 3">Item 3</option>
  </menu>
</div>

/* xxx.css */
.container{
  width: 100%;
  height: 100%; 
  flex-direction: column;
  bac