Tabs
Examples#
Basic Example#
import flet as ft
def main(page: ft.Page):
page.add(
ft.Tabs(
selected_index=1,
length=3,
expand=True,
content=ft.Column(
expand=True,
controls=[
ft.TabBar(
tabs=[
ft.Tab(label="Tab 1"),
ft.Tab(label="Tab 2", icon=ft.Icons.SETTINGS),
ft.Tab(
label=ft.CircleAvatar(
foreground_image_src="https://avatars.githubusercontent.com/u/7119543?s=88&v=4"
),
),
]
),
ft.TabBarView(
expand=True,
controls=[
ft.Container(
content=ft.Text("This is Tab 1"),
alignment=ft.Alignment.CENTER,
),
ft.Container(
content=ft.Text("This is Tab 2"),
alignment=ft.Alignment.CENTER,
),
ft.Container(
content=ft.Text("This is Tab 3"),
alignment=ft.Alignment.CENTER,
),
],
),
],
),
)
)
ft.run(main)
Nesting tabs#
import flet as ft
def main(page: ft.Page):
page.add(
ft.Tabs(
length=2,
expand=True,
content=ft.Column(
expand=True,
controls=[
ft.TabBar(
tabs=[
ft.Tab(label=ft.Text("Main Tab 1")),
ft.Tab(label=ft.Text("Main Tab 2")),
],
),
ft.TabBarView(
expand=True,
controls=[
ft.Tabs(
length=2,
expand=True,
content=ft.Column(
expand=True,
controls=[
ft.TabBar(
secondary=True,
tabs=[
ft.Tab(label=ft.Text("SubTab 1")),
ft.Tab(label=ft.Text("SubTab 2")),
],
),
ft.TabBarView(
expand=True,
controls=[
ft.Text("Nested Tab 1 content"),
ft.Text("Nested Tab 2 content"),
],
),
],
),
),
ft.Text("Main Tab 1 content"),
],
),
],
),
)
)
ft.run(main)
Dynamic tab addition#
import flet as ft
class MyContainer(ft.Container):
def __init__(self, text):
super().__init__(
height=100,
bgcolor=ft.Colors.random(),
alignment=ft.Alignment.CENTER,
)
self.content = ft.Text(text)
def main(page: ft.Page):
def handle_new_tab(e: ft.Event[ft.CupertinoFilledButton]):
tab_count = len(tab_bar.tabs) + 1
tab_bar.tabs.append(ft.Tab(label=ft.Text(f"Tab {tab_count}")))
tab_view.controls.append(MyContainer(text=f"Tab {tab_count} content"))
tabs.length = len(tab_bar.tabs)
page.add(
tabs := ft.Tabs(
length=2,
expand=True,
content=ft.Column(
expand=True,
controls=[
tab_bar := ft.TabBar(
tab_alignment=ft.TabAlignment.CENTER,
tabs=[
ft.Tab(label=ft.Text("Tab 1")),
ft.Tab(label=ft.Text("Tab 2")),
],
),
ft.Row(
alignment=ft.MainAxisAlignment.CENTER,
controls=[
ft.CupertinoFilledButton(
content="Add New Tab",
icon=ft.Icons.ADD,
on_click=handle_new_tab,
),
],
),
tab_view := ft.TabBarView(
expand=True,
controls=[
MyContainer(text="Tab 1 content"),
MyContainer(text="Tab 2 content"),
],
),
],
),
)
)
ft.run(main)
Custom indicator#
import flet as ft
def main(page: ft.Page):
page.add(
ft.Tabs(
length=2,
expand=True,
content=ft.Column(
expand=True,
controls=[
ft.TabBar(
tab_alignment=ft.TabAlignment.START,
indicator_animation=ft.TabIndicatorAnimation.ELASTIC,
indicator_size=ft.TabBarIndicatorSize.LABEL,
indicator=ft.UnderlineTabIndicator(
border_side=ft.BorderSide(5, color=ft.Colors.RED),
border_radius=ft.BorderRadius.all(1),
insets=ft.Padding.only(bottom=5),
),
# indicator_thickness=5,
# indicator_color=ft.Colors.RED,
tabs=[
ft.Tab(label=ft.Text("Home")),
ft.Tab(label=ft.Text("My Account")),
],
),
ft.TabBarView(
expand=True,
controls=[
ft.Text("Home Tab Content"),
ft.Text("Profile Tab Content"),
],
),
],
),
)
)
ft.run(main)
Programmatical Tab switch#
import random
import flet as ft
def main(page: ft.Page):
def handle_move_to_random(e: ft.Event[ft.FloatingActionButton]):
# random index, excluding the current one
i = random.choice([i for i in range(tabs.length) if i != tabs.selected_index])
tabs.move_to(
index=i,
animation_curve=ft.AnimationCurve.FAST_OUT_SLOWIN,
animation_duration=ft.Duration(seconds=3),
)
page.floating_action_button = ft.FloatingActionButton(
icon=ft.Icons.MOVE_UP,
content="Move to a random tab",
on_click=handle_move_to_random,
)
page.add(
tabs := ft.Tabs(
length=6,
selected_index=5,
expand=True,
content=ft.Column(
expand=True,
controls=[
ft.TabBar(
tab_alignment=ft.TabAlignment.CENTER,
tabs=[
ft.Tab(label=ft.Text("Tab 1")),
ft.Tab(label=ft.Text("Tab 2")),
ft.Tab(label=ft.Text("Tab 3")),
ft.Tab(label=ft.Text("Tab 4")),
ft.Tab(label=ft.Text("Tab 5")),
ft.Tab(label=ft.Text("Tab 6")),
],
),
ft.TabBarView(
expand=True,
controls=[
ft.Container(
content=ft.Text("Tab 1 content"),
alignment=ft.Alignment.CENTER,
),
ft.Container(
content=ft.Text("Tab 2 content"),
alignment=ft.Alignment.CENTER,
),
ft.Container(
content=ft.Text("Tab 3 content"),
alignment=ft.Alignment.CENTER,
),
ft.Container(
content=ft.Text("Tab 4 content"),
alignment=ft.Alignment.CENTER,
),
ft.Container(
content=ft.Text("Tab 5 content"),
alignment=ft.Alignment.CENTER,
),
ft.Container(
content=ft.Text("Tab 6 content"),
alignment=ft.Alignment.CENTER,
),
],
),
],
),
)
)
ft.run(main)
Bases: ConstrainedControl, AdaptiveControl
Used for navigating frequently accessed, distinct content categories. Tabs allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.
| RAISES | DESCRIPTION |
|---|---|
ValueError
|
If |
IndexError
|
If |
adaptive: bool | None = None
Enables platform-specific rendering or inheritance of adaptiveness from parent controls.
animate_offset: AnimationValue | None = None
animate_opacity: AnimationValue | None = None
animate_position: AnimationValue | None = None
animate_rotation: AnimationValue | None = None
animate_scale: AnimationValue | None = None
animation_duration: DurationValue = field(
default_factory=lambda: Duration(milliseconds=250)
)
The duration of tab animations. For example, the animation that occurs when the selected tab changes.
bottom: Number | None = None
The distance that the child's bottom edge is inset from the bottom of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
col: ResponsiveNumber = 12
If a parent of this control is a ResponsiveRow,
this property is used to determine
how many virtual columns of a screen this control will span.
Can be a number or a dictionary configured to have a different value for specific
breakpoints, for example col={"sm": 6}.
This control spans the 12 virtual columns by default.
Dimensions
| Breakpoint | Dimension |
|---|---|
| xs | <576px |
| sm | ≥576px |
| md | ≥768px |
| lg | ≥992px |
| xl | ≥1200px |
| xxl | ≥1400px |
disabled: bool = False
Every control has disabled property which is False by default - control and all
its children are enabled.
Note
The value of this property will be propagated down to all children controls recursively.
expand_loose: bool = False
Allows the control to expand along the main axis if space is available, but does not require it to fill all available space.
More information here.
left: Number | None = None
The distance that the child's left edge is inset from the left of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
length: int
The total number of tabs.
Typically greater than one.
Note
Must match the length of both TabBar.tabs
and TabBarView.controls. Don't forget to update
it when adding/removing tabs.
offset: OffsetValue | None = None
Applies a translation transformation before painting the control.
The translation is expressed as an Offset scaled to the control's size.
So, Offset(x=0.25, y=0), for example, will result in a horizontal translation
of one quarter the width of this control.
Example
The following example displays container at 0, 0 top left corner of a stack as
transform applies -1 * 100, -1 * 100 (offset * control's size) horizontal and
vertical translations to the control:
on_animation_end: (
ControlEventHandler[ConstrainedControl] | None
) = None
Called when animation completes.
Can be used to chain multiple animations.
The data property of the event handler argument contains the name of the animation.
More information here.
on_change: ControlEventHandler[TabBar] | None = None
Called when selected_index changes.
The data property of the event handler argument
contains the index of the selected tab.
opacity: Number = 1.0
Defines the transparency of the control.
Value ranges from 0.0 (completely transparent) to 1.0 (completely opaque
without any transparency).
The page (of type Page or PageView) to which this control belongs to.
parent: BaseControl | None
The direct ancestor(parent) of this control.
It defaults to None and will only have a value when this control is mounted (added to the page tree).
The Page control (which is the root of the tree) is an exception - it always has parent=None.
right: Number | None = None
The distance that the child's right edge is inset from the right of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
rotate: RotateValue | None = None
Transforms this control using a rotation around its center.
The value of rotate property could be one of the following types:
number- a rotation in clockwise radians. Full circle360°ismath.pi * 2radians,90°ispi / 2,45°ispi / 4, etc.Rotate- allows to specify rotationangleas well asalignment- the location of rotation center.
scale: ScaleValue | None = None
Scales this control along the 2D plane. Default scale factor is 1.0, meaning no-scale.
Setting this property to 0.5, for example, makes this control twice smaller, while 2.0 makes it twice larger.
Different scale multipliers can be specified for x and y axis, by setting
Control.scale property to an instance of Scale class.
Either scale or scale_x and scale_y could be specified, but not all of them.
selected_index: int = 0
The index of the currently selected tab.
Supports Python-style negative indexing, where -1 represents the last tab,
-2 the second to last, and so on.
Note
- Must be in range
[-length, length - 1]. - Changing the value of this property will internally trigger
move_towithanimation_durationandCurve.EASEanimation curve. To specify a different animation curve or duration for this particular change, usemove_todirectly.
tooltip: TooltipValue | None = None
The tooltip ot show when this control is hovered over.
top: Number | None = None
The distance that the child's top edge is inset from the top of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
visible: bool = True
Every control has visible property which is True by default - control is
rendered on the page. Setting visible to False completely prevents control (and
all its children if any) from rendering on a page canvas. Hidden controls cannot be
focused or selected with a keyboard or mouse and they do not emit any events.
Called once during control initialization to define its child controls. self.page is available in this method.
move_to(
index: int,
animation_curve: AnimationCurve = EASE,
animation_duration: DurationValue | None = None,
)
Selects the tab at the given index.
Additionally, it triggers on_change event and updates
selected_index.
Note
If index is negative, it is interpreted as a Python-style negative index
(e.g., -1 refers to the last tab). If the resolved index is already the
currently selected tab, the method returns immediately and does nothing.
| PARAMETER | DESCRIPTION |
|---|---|
index
|
The index of the tab to select. Must be between in range
TYPE:
|
animation_curve
|
The curve to apply to the animation.
TYPE:
|
animation_duration
|
The duration of the animation. If
TYPE:
|
| RAISES | DESCRIPTION |
|---|---|
IndexError
|
If the |
move_to_async(
index: int,
animation_curve: AnimationCurve = EASE_IN,
animation_duration: DurationValue | None = None,
)
Selects the tab at the given index.
Additionally, it triggers on_change event and updates
selected_index.
Note
If index is negative, it is interpreted as a Python-style negative index
(e.g., -1 refers to the last tab). If the resolved index is already the
currently selected tab, the method returns immediately and does nothing.
| PARAMETER | DESCRIPTION |
|---|---|
index
|
The index of the tab to select. Must be between in range
TYPE:
|
animation_curve
|
The curve to apply to the animation.
TYPE:
|
animation_duration
|
The duration of the animation. If
TYPE:
|
| RAISES | DESCRIPTION |
|---|---|
IndexError
|
If the |