README.md
1# Menu
2
3
4
5### Introduction
6
7This sample exemplifies how to use the **<menu\>** and **<option\>** components in JavaScript. The **<option\>** component can serve as a subcomponent of the **<menu\>** and **<select\>** components. You can define component attributes such as its position, style, and events to respond.
8
9You can also define the menu options that display when a component is clicked so that users can select them to perform respective operations.
10
11### Usage
12
131. Click **Menu option** to display the **Menu option** screen. On this screen, the **<option\>** sub-components of **<menu\>** show the **Dishes**, **Snack**, and **Drink** options. Click an option text box to bring up the respective menu and select an option. The selected options are displayed in menu details at the bottom. Click **Submit Order** to submit the order. A success message will be displayed, and the order details will be cleared. To clear the order details, click **Clear Order**.
14
152. Click **Select option** to display the **Select option** screen. On this screen, the **<option\>** sub-components of **<select\>** show the **Dishes**, **Snack**, and **Drink** options. Click an option text box to bring up the respective menu and select an option. The selected options are displayed in menu details at the bottom. Click **Submit Order** to submit the order. A success message will be displayed, and the order details will be cleared. To clear the order details, click **Clear Order**.
16
17### Constraints
18
19This sample can only be run on standard-system devices.
20
README_zh.md
1# 菜单
2
3### 简介
4
5本示例展示了JS中<menu\>和<option\>组件的使用，<option\>可作为<menu\>和<select\>的子组件。开发者可自行定义控件的位置、样式、响应事件等属性信息。
6
7在点击控件后会弹出相应的菜单，用户可以点击菜单选项进行选择。实现效果如下：
8
9
10
11### 相关概念
12
13option：当作为<menu\>和<select\>的子组件时用来展示弹出菜单的具体项目。
14
15menu：提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。
16
17select：下拉选择按钮，可让用户在多个选项之间选择。
18
19### 相关权限
20
21不涉及
22
23### 使用说明
24
251.点击**菜单选项**进入菜单选项界面，此界面使用<option\>作为<menu\>的子组件展示了主菜、小吃、饮料三个菜单，点击对应文本会弹出菜单，点击菜单选项可以进行选择，选择的内容会显示在底部选单详情中。点击**清除订单**可以清空选单详情中的内容，点击**提交订单**会弹出提交订单成功的提示并清除选单详情中的内容。
26
272.点击**选择选项**进入选择选项界面，此界面使用<option\>作为<select\>的子组件展示了主菜、小吃、饮料三个菜单，点击对应文本会弹出菜单，点击菜单选项可以进行选择，选择的内容会显示在底部选单详情中。点击**清除订单**可以清空选单详情中的内容，点击**提交订单**会弹出提交订单成功的提示并清除选单详情中的内容。
28
29### 约束与限制
30
311.本示例支持标准系统上运行。
32
332.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。
34
