RoundedRectangle

Previous Next

RoundedRectangle

Rectangle with corner_radius as a required first argument. Same parameters otherwise, including CornerRadius for per-corner values. Typical use: background= and clip_shape=.

Constructor

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

Parameters

Parameter Type Default Description
corner_radius float | CornerRadius required Corner rounding. A float applies a uniform radius; a CornerRadius instance sets each corner.
fill str | Color None Fill color for the interior. Accepts hex strings ("#FF5733"), named colors ("red"), or Color instances.
stroke_color str | Color None Outline colour, drawn along the edge.
stroke_width float None Width of the stroke in points.
**modifiers Common view modifiers: width, height, padding, opacity, animation, etc.

Examples

Card background

rounded_rectangle_card_background

import nib


def main(app: nib.App):
    app.title = "Tip"
    app.icon = nib.SFSymbol("lightbulb")

    app.build(
        nib.HStack(
            controls=[
                nib.SFSymbol(
                    "lightbulb.fill",
                    foreground_color=nib.Color.YELLOW,
                    font=nib.Font.system(24),
                ),
                nib.VStack(
                    controls=[
                        nib.Text("Tip", font=nib.Font.HEADLINE),
                        nib.Text(
                            "Press ⌘, to open the settings window.",
                            foreground_color=nib.Color.SECONDARY,
                        ),
                    ],
                    spacing=2,
                    alignment=nib.Alignment.LEADING,
                ),
            ],
            spacing=12,
            padding=16,
            background=nib.RoundedRectangle(corner_radius=12, fill="#1e293b"),
            margin=20,
        )
    )


nib.run(main)

Clip shape

rounded_rectangle_clip_shape

import nib


def main(app: nib.App):
    app.title = "Clip"
    app.icon = nib.SFSymbol("scissors")
    app.width = 320

    app.build(
        nib.HStack(
            controls=[
                nib.Image(
                    src="https://picsum.photos/id/237/240/240",
                    aspect_ratio=nib.ContentMode.FILL,
                    clip_shape=nib.RoundedRectangle(corner_radius=18),
                    width=120,
                    height=120,
                ),
                nib.Text(
                    "Clipped",
                    foreground_color=nib.Color.WHITE,
                    padding=14,
                    background=nib.Color.BLUE,
                    clip_shape=nib.RoundedRectangle(corner_radius=10),
                ),
            ],
            spacing=20,
            padding=20,
        )
    )


nib.run(main)

Per-corner radius

rounded_rectangle_per_corner_radius

import nib


def main(app: nib.App):
    app.title = "Tabs"
    app.icon = nib.SFSymbol("rectangle.topthird.inset.filled")
    app.width = 330

    def tab(name, active):
        return nib.Text(
            name,
            foreground_color=nib.Color.WHITE if active else nib.Color.SECONDARY,
            padding={"horizontal": 16, "vertical": 8},
            background=nib.RoundedRectangle(
                corner_radius=nib.CornerRadius.vertical(top=10, bottom=0),
                fill="#0a84ff" if active else "#3a3a3c",
            ),
        )

    app.build(
        nib.VStack(
            controls=[
                nib.HStack(
                    controls=[
                        tab("General", True),
                        tab("Editor", False),
                        tab("Advanced", False),
                    ],
                    spacing=4,
                ),
                nib.RoundedRectangle(
                    corner_radius=nib.CornerRadius.vertical(top=0, bottom=12),
                    fill="#1e293b",
                    width=280,
                    height=90,
                ),
            ],
            spacing=0,
            padding=20,
            alignment=nib.Alignment.LEADING,
        )
    )


nib.run(main)
Rectangle Circle