Rectangle¶

Rectangle

A rectangular shape with configurable corner radii. Rectangle can have sharp corners (default), uniform rounded corners via a single float, or per-corner control using CornerRadius.

When corner_radius is provided, Rectangle behaves as a rounded rectangle. For full per-corner control, pass a CornerRadius instance.

Constructor¶

nib.Rectangle(
    fill=None,
    corner_radius=None,
    stroke_color=None,
    stroke_width=None,
    **modifiers,
)

Parameters¶

Parameter	Type	Default	Description
`fill`	`str \| Color`	`None`	Fill color for the rectangle interior. Accepts hex strings (`"#FF5733"`), named colors (`"red"`), or `Color` instances.
`corner_radius`	`float \| CornerRadius`	`None`	Corner rounding. A float applies a uniform radius to all corners. A `CornerRadius` instance provides per-corner control. `None` produces sharp corners.
`stroke_color`	`str \| Color`	`None`	Outline colour, drawn along the rectangle's edge.
`stroke_width`	`float`	`None`	Width of the stroke in points.
`**modifiers`			Common view modifiers: `width`, `height`, `padding`, `opacity`, `animation`, etc.

CornerRadius¶

For per-corner control, use nib.CornerRadius:

nib.CornerRadius(
    top_left=0,
    top_right=0,
    bottom_left=0,
    bottom_right=0,
)

Factory methods:

Method	Description
`CornerRadius.all(radius)`	Uniform radius for all corners.
`CornerRadius.vertical(top, bottom)`	Same radius for top corners and bottom corners.
`CornerRadius.only(**corners)`	Set only specific corners, others default to 0.

Examples¶

Basic shapes¶

rectangle_basic_shapes

import nib


def main(app: nib.App):
    app.title = "Rectangles"
    app.icon = nib.SFSymbol("rectangle")

    def labelled(shape, caption):
        return nib.VStack(
            controls=[
                shape,
                nib.Text(
                    caption, font=nib.Font.CAPTION, foreground_color=nib.Color.SECONDARY
                ),
            ],
            spacing=6,
        )

    app.build(
        nib.HStack(
            controls=[
                labelled(
                    nib.Rectangle(fill=nib.Color.BLUE, width=80, height=80), "fill"
                ),
                labelled(
                    nib.Rectangle(
                        fill=nib.Color.GREEN, corner_radius=14, width=80, height=80
                    ),
                    "corner_radius",
                ),
                labelled(
                    nib.Rectangle(
                        fill="#3a3a3c",
                        corner_radius=8,
                        stroke_color=nib.Color.ORANGE,
                        stroke_width=3,
                        width=80,
                        height=80,
                    ),
                    "stroke",
                ),
            ],
            spacing=16,
            padding=20,
        )
    )


nib.run(main)

Per-corner radius¶

Round only the top corners to create a card header shape.

rectangle_per_corner_radius

import nib


def main(app: nib.App):
    app.title = "Weather card"
    app.icon = nib.SFSymbol("cloud.sun")

    app.build(
        nib.VStack(
            controls=[
                nib.ZStack(
                    controls=[
                        nib.Rectangle(
                            fill="#0a84ff",
                            corner_radius=nib.CornerRadius(
                                top_left=16, top_right=16, bottom_left=0, bottom_right=0
                            ),
                        ),
                        nib.HStack(
                            controls=[
                                nib.SFSymbol(
                                    "sun.max.fill", foreground_color=nib.Color.YELLOW
                                ),
                                nib.Text("Sunny", foreground_color=nib.Color.WHITE),
                            ],
                            spacing=6,
                        ),
                    ],
                    width=220,
                    height=56,
                ),
                nib.ZStack(
                    controls=[
                        nib.Rectangle(
                            fill="#1e293b",
                            corner_radius=nib.CornerRadius.vertical(top=0, bottom=16),
                        ),
                        nib.Text(
                            "24°",
                            font=nib.Font.LARGE_TITLE,
                            foreground_color=nib.Color.WHITE,
                        ),
                    ],
                    width=220,
                    height=90,
                ),
            ],
            spacing=0,
            padding=20,
        )
    )


nib.run(main)