menu¶
Shows a left-side menu.
This control is represented by a unique left-anchor and foldable vertical menu.
Properties¶
Name | Type | Default | Description |
---|---|---|---|
(★) |
dynamic(str|list[str|Icon|any]) | The list of menu option values. |
|
adapter |
Function | `"lambda x: str(x)"` | The function that transforms an element of lov into a tuple(id:str, label:str|Icon). |
type |
str | Type of the first lov element | Must be specified if lov contains a non specific type of data (ex: dict). |
label |
str | The title of the menu. |
|
width |
str | "15vw" | The width, in CSS units, of the menu when unfolded. |
width[mobile] |
str | "85vw" | The width, in CSS units, of the menu when unfolded, on a mobile device. |
on_action |
Callback | The name of the function that is triggered when a menu option is selected.
|
|
active |
dynamic(bool) | True | Indicates if this component is active. |
(★)lov
is the default property for this visual element.
Styling¶
All the menu controls are generated with the "taipy-menu" CSS class. You can use this class name to select the menu controls on your page and apply style.
Usage¶
Defining a simple static menu¶
Page content
<|menu|lov=menu 1;menu 2|>
<taipy:menu lov="menu 1;menu 2"></taipy:menu>
Calling a user-defined function¶
To have the selection of a menu item call a user-defined function, you must set the on_action property to a function that you define:
You page can define a menu control like:
Page content
<|menu|lov=menu 1;menu 2|on_action=my_menu_action>
<taipy:menu lov="menu 1;menu 2" on_action="my_menu_action"></taipy:menu>
Your Python script must define the my_menu_action function:
def my_menu_action(state, ...):
...
Disabling menu options¶
The property inactive_ids can be set to dynamically disable any specific menu options.
Page content
<|menu|lov=menu 1;menu 2;menu 3|inactive_ids=menu 2;menu 3|>
html
<taipy:menu lov="menu 1;menu 2" inactive_ids="menu 2;menu 3"></taipy:menu>
Adjusting presentation¶
The property label defines the text associated with the main Icon. The properties width and width[mobile] specify the requested width of the menu when expanded.
Page content
<|menu|lov=menu 1;menu 2;menu 3|label=Menu title|width=15vw|width[mobile]=80vw|>
html
<taipy:menu lov="menu 1;menu 2" label="Menu title" width="15vw" width[mobile]="80vw"></taipy:menu>
Menu icons¶
As for every control that deals with lov, each menu option can display an image (see Icon^) and/or some text.
Page content
<|menu|lov={[("id1", Icon("/images/icon.png", "Menu option 1")), ("id2", "Menu option 2")]}|>
html
<taipy:menu>{[("id1", Icon("/images/icon.png", "Menu option 1")), ("id2", "Menu option 2")]}</taipy:menu>