Pagelet
Implements the basic Material Design visual layout structure.
Use it for projects that require a "page within a page" layouts with its own
AppBar
, BottomAppBar
, NavigationDrawer
,
such as demos and galleries.
Inherits: LayoutControl
, AdaptiveControl
Properties
-
appbar
(AppBar | CupertinoAppBar | None
) –An
AppBar
control to display at the top -
bgcolor
(ColorValue | None
) –Background color of the Pagelet.
-
bottom_appbar
(BottomAppBar | None
) –A
BottomAppBar
control to display at -
bottom_sheet
(Control | None
) –The persistent bottom sheet to show information that supplements the primary
-
content
(Control
) –A child Control contained by the Pagelet.
-
drawer
(NavigationDrawer | None
) –A
NavigationDrawer
control to -
end_drawer
(NavigationDrawer | None
) –A
NavigationDrawer
control to -
floating_action_button
(Control | None
) – -
floating_action_button_location
(FloatingActionButtonLocation | OffsetValue | None
) –Defines a position for the
FloatingActionButton
. -
navigation_bar
(NavigationBar | CupertinoNavigationBar | None
) –A navigation bar (
NavigationBar
or
Methods
Examples#
Pagelet example#
import flet as ft
def main(page: ft.Page):
def handle_show_drawer(e: ft.Event[ft.FloatingActionButton]):
pagelet.show_drawer(drawer)
drawer = ft.NavigationDrawer(
controls=[
ft.NavigationDrawerDestination(
icon=ft.Icons.ADD_TO_HOME_SCREEN_SHARP,
label="Item 1",
),
ft.NavigationDrawerDestination(
icon=ft.Icons.ADD_COMMENT,
label="Item 2",
),
],
)
page.add(
pagelet := ft.Pagelet(
width=400,
height=400,
appbar=ft.AppBar(
title=ft.Text("Pagelet AppBar Title"),
bgcolor=ft.Colors.AMBER_ACCENT,
),
content=ft.Container(ft.Text("Pagelet Body"), padding=ft.Padding.all(16)),
bgcolor=ft.Colors.AMBER_100,
bottom_appbar=ft.BottomAppBar(
bgcolor=ft.Colors.BLUE,
shape=ft.CircularRectangleNotchShape(),
content=ft.Row(
controls=[
ft.IconButton(icon=ft.Icons.MENU, icon_color=ft.Colors.WHITE),
ft.Container(expand=True),
ft.IconButton(icon=ft.Icons.SEARCH, icon_color=ft.Colors.WHITE),
ft.IconButton(
icon=ft.Icons.FAVORITE, icon_color=ft.Colors.WHITE
),
]
),
),
end_drawer=drawer,
floating_action_button=ft.FloatingActionButton(
content="Open",
shape=ft.CircleBorder(),
on_click=handle_show_drawer,
),
floating_action_button_location=ft.FloatingActionButtonLocation.CENTER_DOCKED,
)
)
ft.run(main)
Properties#
appbar
#
appbar: AppBar | CupertinoAppBar | None = None
An AppBar
control to display at the top
of the Pagelet.
bottom_appbar
#
bottom_appbar: BottomAppBar | None = None
A BottomAppBar
control to display at
the bottom of the Pagelet
.
Note
If both the bottom_appbar
and navigation_bar
properties are specified, bottom_appbar
takes precedence and will
be displayed.
bottom_sheet
#
bottom_sheet: Control | None = None
The persistent bottom sheet to show information that supplements the primary content of the Pagelet.
content
#
content: Control
A child Control contained by the Pagelet.
The control in the content of the Pagelet is positioned at the top-left of the available space between the app bar and the bottom of the Pagelet.
Raises:
-
ValueError
–If
content
is not visible.
drawer
#
drawer: NavigationDrawer | None = None
A NavigationDrawer
control to
display as a panel sliding from the start edge of the page.
end_drawer
#
end_drawer: NavigationDrawer | None = None
A NavigationDrawer
control to
display as a panel sliding from the end edge of the page.
floating_action_button
#
floating_action_button: Control | None = None
A FloatingActionButton
control to display on top of Pagelet content.
floating_action_button_location
#
floating_action_button_location: (
FloatingActionButtonLocation | OffsetValue | None
) = END_FLOAT
Defines a position for the FloatingActionButton
.
navigation_bar
#
navigation_bar: (
NavigationBar | CupertinoNavigationBar | None
) = None
A navigation bar (NavigationBar
or
CupertinoNavigationBar
) control to display
at the bottom of the Pagelet
.
Note
If both the navigation_bar
and bottom_appbar
properties are specified, navigation_bar
takes precedence and will
be displayed.