Styling

Previous Next

Styling

Styling is passed as constructor arguments. There is no method chaining; every view accepts the same set of modifier arguments, and each one is a reactive property afterwards.

nib.Text(
    "Hello",
    font=nib.Font.TITLE,
    foreground_color=nib.Color.BLUE,
    padding=16,
    background=nib.Rectangle(corner_radius=8, fill="#1c1c1e"),
)

Colors

Anywhere a colour is accepted (foreground_color, background, fill, stroke, border_color, shadow_color, tint) you can pass:

nib.Color.RED                       # named: RED, BLUE, GREEN, YELLOW, ORANGE, PURPLE, PINK,
                                    # WHITE, BLACK, GRAY, CLEAR, INDIGO, CYAN, MINT, TEAL, BROWN
nib.Color.PRIMARY                   # semantic, adapt to light and dark mode: PRIMARY, SECONDARY, ACCENT
nib.Color(hex="#4287f5")            # hex, with or without "#", optional alpha as #AARRGGBB
nib.Color.rgb(66, 135, 245)         # 0 to 255
nib.Color.rgba(255, 0, 0, 0.5)      # alpha 0.0 to 1.0
nib.Color.BLUE.with_opacity(0.6)
"red"                               # plain strings: SwiftUI names and hex values
"#FF5733"

Full list and conversions: Color.

Background, border, shadow, shape

nib.VStack(
    controls=[nib.Text("Card")],
    padding=16,
    background=nib.Rectangle(corner_radius=12, fill="#1c1c1e", stroke="#2c2c2e", stroke_width=1),
    shadow_color="#000000",
    shadow_radius=8,
    shadow_y=4,
)
  • background takes a colour or any view; a Rectangle with fill, stroke and corner_radius is the usual card.
  • border_color and border_width draw a border on the view's own bounds; combine with corner_radius for rounded borders.
  • shadow_color, shadow_radius, shadow_x, shadow_y describe a drop shadow.
  • clip_shape clips to "circle", "capsule" or a shape view: nib.Image(src="avatar.jpg", width=64, height=64, clip_shape="circle").
  • opacity is 0.0 to 1.0; scale is a uniform transform; blend_mode takes a BlendMode.
  • corner_radius takes a number or a CornerRadius: nib.CornerRadius.only(top_left=16, top_right=16), .vertical(top=16, bottom=0), .horizontal(left=12, right=0), .all(12).

Spacing and size

nib.Text("Padded", padding=16)                                   # all sides
nib.Text("Padded", padding={"horizontal": 16, "vertical": 8})    # or top, bottom, leading, trailing
nib.Text("Spaced", margin=8)                                     # outside the background
nib.Text("Wide", max_width="infinity")                           # fill the available width
nib.Rectangle(fill="red", width=100, height=50, min_width=80)

padding is inside the background; margin is outside it.

Fonts and text

nib.Text("Title", font=nib.Font.TITLE)                          # LARGE_TITLE, TITLE, TITLE2, TITLE3,
                                                                 # HEADLINE, SUBHEADLINE, BODY, CALLOUT,
                                                                 # FOOTNOTE, CAPTION, CAPTION2
nib.Text("Custom", font=nib.Font.system(18, nib.FontWeight.SEMIBOLD))
nib.Text("Brand", font=nib.Font.custom("Inter-Bold", size=16))  # a font from assets/, see Assets
nib.Text("Bold body", font=nib.Font.BODY, font_weight=nib.FontWeight.BOLD)

Decorations, spacing and colour for one Text go in a TextStyle; mixed styles within one Text use AttributedString segments:

nib.Text("12:34:56", style=nib.TextStyle(monospaced_digit=True, font=nib.Font.TITLE))
nib.Text(
    strings=[
        nib.AttributedString("Status: ", style=nib.TextStyle(bold=True)),
        nib.AttributedString("Connected", color="green"),
    ]
)

Reference: Font, TextStyle and AttributedString.

Gradients

LinearGradient, RadialGradient and AngularGradient are views: use them on their own, as a background, or as a shape's background. Points are unit coordinates, (0, 0) top-left to (1, 1) bottom-right.

nib.VStack(
    controls=[nib.Text("Gradient card", foreground_color=nib.Color.WHITE)],
    padding=24,
    corner_radius=16,
    background=nib.LinearGradient(colors=["#667eea", "#764ba2"], start=(0, 0), end=(1, 1)),
)

nib.LinearGradient(stops=[(0.0, "#FF0000"), (0.5, "#FFFF00"), (1.0, "#0000FF")], height=60)
nib.RadialGradient(colors=["white", "black"], center=(0.5, 0.5), start_radius=0, end_radius=100, width=200, height=200)
nib.AngularGradient(colors=["red", "yellow", "green", "cyan", "blue", "magenta", "red"], width=200, height=200)

Reference: Gradients.

Layouts Animations