Skip to main content

ResizablePanelGroup

A Shadcn group of panels with draggable dividers between them.

The group fills the space it is given, so give it a width and height, or let it expand.

Example:

shad.ResizablePanelGroup(
    width=500,
    height=200,
    panels=[
        shad.ResizablePanel(default_size=0.5, content=ft.Text("One")),
        shad.ResizablePanel(default_size=0.5, content=ft.Text("Two")),
    ],
)
ResizablePanelGroup
ResizablePanelGroup

Inherits: LayoutControl

Properties

  • divider_color - The color of the dividers.
  • panels - The panels, in order along the group's axis.
  • show_handle - Whether to show a grip on each divider.
  • vertical - Whether the panels are stacked top to bottom instead of left to right.

Example​

Shadcn ResizablePanelGroup​

play_arrowTry Online
import flet_shadcn_ui as shad

import flet as ft


def panel(text: str) -> ft.Container:
    return ft.Container(
        alignment=ft.Alignment.CENTER,
        content=ft.Text(text, weight=ft.FontWeight.W_600),
    )


def main(page: ft.Page):
    page.title = "Shadcn Resizable"

    page.add(
        ft.SafeArea(
            content=ft.Container(
                border=ft.Border.all(1, ft.Colors.OUTLINE_VARIANT),
                border_radius=8,
                clip_behavior=ft.ClipBehavior.ANTI_ALIAS,
                content=shad.ResizablePanelGroup(
                    width=480,
                    height=220,
                    show_handle=True,
                    panels=[
                        shad.ResizablePanel(
                            default_size=0.5,
                            min_size=0.2,
                            content=panel("One"),
                        ),
                        shad.ResizablePanel(
                            default_size=0.5,
                            min_size=0.2,
                            content=shad.ResizablePanelGroup(
                                vertical=True,
                                panels=[
                                    shad.ResizablePanel(
                                        default_size=0.3, content=panel("Two")
                                    ),
                                    shad.ResizablePanel(
                                        default_size=0.7, content=panel("Three")
                                    ),
                                ],
                            ),
                        ),
                    ],
                ),
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
resizable
Dragging the handle to the left

Properties​

divider_colorclass-attributeinstance-attribute​

divider_color: ColorValue | None = None

The color of the dividers.

If None, the border color of the theme is used.

panelsclass-attributeinstance-attribute​

panels: list[ResizablePanel] = field(default_factory=list)

The panels, in order along the group's axis.

Raises:

  • ValueError - If the default_size of all panels does not add up to 1.

show_handleclass-attributeinstance-attribute​

show_handle: bool = False

Whether to show a grip on each divider.

verticalclass-attributeinstance-attribute​

vertical: bool = False

Whether the panels are stacked top to bottom instead of left to right.