libs/m5ui: Add LVGL Menu widget docs and example.

Signed-off-by: tinyu <[email protected]>

Author: TinyuZhao

docs/en/m5ui/index.rst

@@ -73,6 +73,7 @@ Classes
     led.rst
     line.rst
     list.rst
+    menu.rst
     msgbox.rst
     roller.rst
     scale.rst

docs/en/m5ui/menu.rst

@@ -0,0 +1,125 @@
+.. currentmodule:: m5ui
+
+M5Menu
+========
+
+.. include:: ../refs/m5ui.menu.ref
+
+M5Menu is a widget that can be used to create multi-level menus in the user interface.
+
+UiFlow2 Example
+---------------
+
+menu event
+^^^^^^^^^^^^^^
+
+Open the |menu_core2_example.m5f2| project in UiFlow2.
+
+This example creates a multi-level menus.
+
+UiFlow2 Code Block:
+
+    |menu_core2_example.png|
+
+Example output:
+
+    None
+
+MicroPython Example
+-------------------
+
+menu event
+^^^^^^^^^^^^^^
+
+This example creates a multi-level menus.
+
+MicroPython Code Block:
+
+    .. literalinclude:: ../../../examples/m5ui/menu/menu_core2_example.py
+        :language: python
+        :linenos:
+
+Example output:
+
+    None
+
+
+**API**
+-------
+M5Menu
+^^^^^^^^
+
+.. autoclass:: m5ui.menu.M5Menu
+    :members:
+
+    .. py:method:: set_page(page)
+
+        Set main page for the menu.
+
+        :param lv.obj page: The main page object.
+
+        UiFlow2 Code Block:
+
+            |set_page.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                menu0.set_page(menu0.main_page)
+
+    .. py:method:: set_mode_header(mode)
+
+        Set the mode header for the menu.
+
+        :param int mode: The mode header text.
+
+            Options:
+
+                - ``lv.menu.HEADER.TOP_FIXED``
+                - ``lv.menu.HEADER.TOP_UNFIXED``
+                - ``lv.menu.HEADER.BOTTOM_FIXED``
+
+        UiFlow2 Code Block:
+
+            |set_mode_header.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                menu0.set_mode_header(lv.menu.HEADER.TOP_FIXED)
+
+    .. py:method:: set_pos(x, y)
+
+        Set the position of the menu.
+
+        :param int x: The x-coordinate of the menu.
+        :param int y: The y-coordinate of the menu.
+
+        UiFlow2 Code Block:
+
+            |set_pos.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                menu0.set_pos(100, 100)
+
+    .. py:method:: set_size(width, height)
+
+        Set the size of the menu.
+
+        :param int width: The width of the menu.
+        :param int height: The height of the menu.
+
+        UiFlow2 Code Block:
+
+            |set_size.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                menu0.set_size(100, 50)

docs/en/m5ui/switch.rst

@@ -1,4 +1,5 @@
 .. currentmodule:: m5ui
+.. _m5ui.M5Switch:
 
 M5Switch
 ========

docs/en/refs/m5ui.menu.ref

@@ -0,0 +1,20 @@
+.. |set_page.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/menu/set_page.png
+.. |set_mode_header.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/menu/set_mode_header.png
+.. |set_pos.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/menu/set_pos.png
+.. |set_size.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/menu/set_size.png
+.. |add_label.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/menu/add_label.png
+.. |add_label2.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/menu/add_label2.png
+.. |add_switch.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/menu/add_switch.png
+.. |add_switch2.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/menu/add_switch2.png
+
+
+.. |menu_core2_example.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/menu/example.png
+
+.. |menu_core2_example.m5f2| raw:: html
+
+    <a
+        href="https://uiflow2.m5stack.com/?example=https://raw.githubusercontent.com/m5stack/uiflow-micropython/develop/examples/m5ui/menu/menu_core2_example.m5f2"
+        target="_blank"
+    >
+        menu_core2_example.m5f2
+    </a>