SubmenuButton
A menu button that displays a cascading menu.
Typically used in a MenuBar control.
ft.SubmenuButton(
content=ft.Text("Choose text style"),
key="smbutton",
expand=True,
menu_style=ft.MenuStyle(
alignment=ft.Alignment.BOTTOM_LEFT, side=ft.BorderSide(1)
),
controls=[
ft.MenuItemButton(
content=ft.Text("Underlined"),
on_click=lambda e: print(f"{e.control.content.value}.on_click")
),
ft.MenuItemButton(...),
...
]
)
Activated submenu button
Inherits: LayoutControl
Properties
-
alignment_offset(OffsetValue | None) –The offset of the menu relative to the alignment origin determined by
-
clip_behavior(ClipBehavior) –Whether to clip the content of this control or not.
-
content(StrOrControl | None) –The child control to be displayed in the middle portion of this button.
-
controls(list[Control]) –A list of controls that appear in the menu when it is opened.
-
leading(Control | None) –An optional control to display before the
content. -
menu_style(MenuStyle | None) –Customizes this menu's appearance.
-
style(ButtonStyle | None) –Customizes this button's appearance.
-
trailing(Control | None) –An optional control to display after the
content.
Events
-
on_blur(ControlEventHandler[SubmenuButton] | None) –Called when this button loses focus.
-
on_close(ControlEventHandler[SubmenuButton] | None) –Called when the menu is closed.
-
on_focus(ControlEventHandler[SubmenuButton] | None) –Called when the button receives focus.
-
on_hover(ControlEventHandler[SubmenuButton] | None) –Called when the button is hovered.
-
on_open(ControlEventHandler[SubmenuButton] | None) –Called when the menu is opened.
Examples#
Basic Example#
import flet as ft
def main(page: ft.Page):
page.padding = 0
page.spacing = 0
def handle_color_click(e: ft.Event[ft.MenuItemButton]):
color = e.control.content.value
background_container.content.value = f"{color} background color"
background_container.bgcolor = color.lower()
page.update()
def handle_alignment_click(e: ft.Event[ft.MenuItemButton]):
print(
f"bg_container.alignment: {background_container.alignment}, bg_container.content: {background_container.content}"
)
background_container.alignment = e.control.data
print(
f"e.control.content.value: {e.control.content.value}, e.control.data: {e.control.data}"
)
page.update()
def handle_on_hover(e: ft.Event[ft.MenuItemButton]):
print(f"{e.control.content.value}.on_hover")
menubar = ft.MenuBar(
expand=True,
controls=[
ft.SubmenuButton(
content=ft.Text("Change Body"),
key="submenubutton",
controls=[
ft.SubmenuButton(
content=ft.Text("BG Color"),
leading=ft.Icon(ft.Icons.COLORIZE),
controls=[
ft.MenuItemButton(
content=ft.Text("Blue"),
on_click=handle_color_click,
on_hover=handle_on_hover,
style=ft.ButtonStyle(
bgcolor={ft.ControlState.HOVERED: ft.Colors.BLUE}
),
),
ft.MenuItemButton(
content=ft.Text("Green"),
on_click=handle_color_click,
on_hover=handle_on_hover,
style=ft.ButtonStyle(
bgcolor={ft.ControlState.HOVERED: ft.Colors.GREEN}
),
),
ft.MenuItemButton(
content=ft.Text("Red"),
on_click=handle_color_click,
on_hover=handle_on_hover,
style=ft.ButtonStyle(
bgcolor={ft.ControlState.HOVERED: ft.Colors.RED}
),
),
],
),
ft.SubmenuButton(
content=ft.Text("Text alignment"),
leading=ft.Icon(ft.Icons.LOCATION_PIN),
controls=[
ft.MenuItemButton(
content=ft.Text("bottom_center"),
data=ft.Alignment.BOTTOM_CENTER,
on_click=handle_alignment_click,
style=ft.ButtonStyle(
bgcolor={
ft.ControlState.HOVERED: ft.Colors.GREY_100
}
),
),
ft.MenuItemButton(
content=ft.Text("bottom_left"),
data=ft.Alignment.BOTTOM_LEFT,
on_click=handle_alignment_click,
style=ft.ButtonStyle(
bgcolor={
ft.ControlState.HOVERED: ft.Colors.GREY_100
}
),
),
ft.MenuItemButton(
content=ft.Text("top_center"),
data=ft.Alignment.TOP_CENTER,
on_click=handle_alignment_click,
style=ft.ButtonStyle(
bgcolor={
ft.ControlState.HOVERED: ft.Colors.GREY_100
}
),
),
ft.MenuItemButton(
content=ft.Text("center_left"),
data=ft.Alignment.CENTER_LEFT,
on_click=handle_alignment_click,
style=ft.ButtonStyle(
bgcolor={
ft.ControlState.HOVERED: ft.Colors.GREY_100
}
),
),
ft.MenuItemButton(
content=ft.Text("center_right"),
data=ft.Alignment.CENTER_RIGHT,
on_click=handle_alignment_click,
style=ft.ButtonStyle(
bgcolor={
ft.ControlState.HOVERED: ft.Colors.GREY_100
}
),
),
],
),
],
)
],
)
page.add(
ft.Row(controls=[menubar]),
background_container := ft.Container(
expand=True,
bgcolor=ft.Colors.SURFACE_TINT,
alignment=ft.Alignment.CENTER,
content=ft.Text(
value="Choose a bgcolor from the menu",
style=ft.TextStyle(size=24, weight=ft.FontWeight.BOLD),
),
),
)
if __name__ == "__main__":
ft.run(main)
Properties#
alignment_offset: OffsetValue | None = None
The offset of the menu relative to the alignment origin determined by
MenuStyle.alignment on the
style attribute.
clip_behavior: ClipBehavior = HARD_EDGE
Whether to clip the content of this control or not.
content: StrOrControl | None = None
The child control to be displayed in the middle portion of this button.
Typically this is the button's label, using a Text control.
A list of controls that appear in the menu when it is opened.
Typically either MenuItemButton or
SubMenuButton controls.
If this list is empty, then the button for this menu item will be disabled.
Events#
on_blur: ControlEventHandler[SubmenuButton] | None = None
Called when this button loses focus.
on_close: ControlEventHandler[SubmenuButton] | None = None
Called when the menu is closed.
on_focus: ControlEventHandler[SubmenuButton] | None = None
Called when the button receives focus.
on_hover: ControlEventHandler[SubmenuButton] | None = None
Called when the button is hovered.