Loading...

Styles contains explanations of common style properties. You can also see the API documentation for an exhaustive list of style properties. You can experiment with style properties in the style playground.

Color

Many style properties involve colors, which can be specified in several ways as documented on that linked page.

You can set the content color of text or an icon:

Background

You can set the background color of a widget:

You can use a gradient background:

See the colors page for more possible background color options such as an image.

Border

You can add a border to a widget:

You can make a dotted or dashed border:

You can specify different border properties for different sides of a widget (see the documentation for styles/sides.Sides.Set):

Border radius

You can make a widget have curved corners, regardless of whether it has a border:

Layout

There are many layout properties that customize the positioning and sizing of widgets, typically using units. See the layout page for a low-level explanation of the layout process.

The standard box model explains the meaning of different size elements:

Size

You can control the size of a widget through three properties: Min, Max, and Grow.

Min

Min specifies the minimum size that a widget must receive:

Min (and Max and Grow) can be specified for each dimension:

Grow

Grow makes a widget fill the available space up to Max:

Max

Max puts a constraint on the amount a widget can Grow:

In the example above, notice that the frame has a size of 10em in the X direction, but only 5em in the Y direction. That is because the widget has room to grow in the X direction and thus reaches the Max, but there are many other widgets competing for space in the Y direction, so it stays at its Min.

Max can also be used to limit the size of a widget without Grow:

Position

You can control the positioning of the elements of a frame or other container widget in several ways.

Direction

You can position widgets in a column instead of in a row:

Grid

You can position widgets in a grid:

Gap

You can change the space between widgets:

Custom

You can manually set the position of widgets:

Alignment

Note: we recommend experimenting with alignment properties in the style playground to get a better sense of how they work.

You can use the CenterAll helper function to center widgets in all possible ways:

Justify

You can change the distribution of widgets on the main axis:

Align

You can change the alignment of widgets on the cross (non-main) axis:

Overflow

You can make a container add scrollbars when it overflows:

Wrap

You can make a container wrap when it overflows:

Text

You can customize the appearance of text with various properties.

Font weight

You can change the font weight of text:

Font slant

You can make text italic:

Font size

You can change the size of text:

See also icon size.

Font family

You can change the font family category of text:

You can use a specific font family:

You can also embed custom fonts and use them (see that page for details):

Line height

You can change the height of each line of text:

Whitespace

You can customize the formatting of whitespace:

Text wrap

You can disable text wrapping: