Skip to main content

Separator

A Shadcn separator: a thin line that divides content.

A horizontal separator fills the width of its parent. A vertical one, for example inside a Row, fills the height of its parent, so give the row a fixed height or set its intrinsic_height to True.

Example:

ft.Column([ft.Text("Account"), shad.Separator(), ft.Text("Billing")])
Separator
Separator

Inherits: LayoutControl

Properties

  • color - The color of the line.
  • margin - The space around the line.
  • thickness - The thickness of the line.
  • vertical - Whether this separator is a vertical line instead of a horizontal one.

Example​

Shadcn Separator​

play_arrowTry Online
import flet_shadcn_ui as shad

import flet as ft


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

    page.add(
        ft.SafeArea(
            content=ft.Column(
                width=320,
                spacing=0,
                controls=[
                    ft.Text("Radix Primitives", weight=ft.FontWeight.W_500),
                    ft.Text(
                        "An open-source UI component library.",
                        color=ft.Colors.ON_SURFACE_VARIANT,
                    ),
                    shad.Separator(),
                    ft.Row(
                        height=20,
                        controls=[
                            ft.Text("Blog"),
                            shad.Separator(vertical=True),
                            ft.Text("Docs"),
                            shad.Separator(vertical=True),
                            ft.Text("Source"),
                        ],
                    ),
                ],
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
separator

Properties​

colorclass-attributeinstance-attribute​

color: ColorValue | None = None

The color of the line.

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

marginclass-attributeinstance-attribute​

margin: MarginValue | None = None

The space around the line.

If None, defaults to 16 above and below a horizontal separator and 16 on each side of a vertical one.

thicknessclass-attributeinstance-attribute​

thickness: Number | None = None

The thickness of the line.

If None, defaults to 1.

verticalclass-attributeinstance-attribute​

vertical: bool = False

Whether this separator is a vertical line instead of a horizontal one.