Tab bar

Overview

 *Background* | The background color used for the tab bar.
Check *Enable Gradient* to add a second color and a transition between the two.
Use the slider to select the position of the transition.
 *Background Image* | Add a background image to the tab bar.
Select if the image should be centered, repeated, stretched, and so on.
 * Click  *Clear* to remove the image.

Combine the background image with a background color if Enable Gradient is selected.

Padding Settings

Top

The tab bar’s top padding.

Right

The tab bar’s right padding.

Bottom

The tab bar’s bottom padding.

Left

The tab bar’s left padding.

Border Settings

Left Border Color

The tab bar’s left border color.

Left Border Width

The tab bar’s left border thickness.

Right Border Color

The tab bar’s right border color.

Right Border Width

The tab bar’s right border thickness.

Top Border Color

The tab bar’s top border color.

Top Border Width

The tab bar’s top border thickness.

Bottom Border Color

The tab bar’s bottom border color.

Bottom Border Width

The tab bar’s bottom border thickness.

Border Style

The tab bar’s border style. Set the line’s appearance (pattern) and the amount the corners should be rounded.

Tab Button Default Settings

Background Color

The tab button’s default background color.

Flex Direction

Select the main axis where flex items will be placed, for instance horizontal or vertical (along a row or in a column).

Justify Content

Select how flex items will be placed in relation to each other, for instance towards the start of the flex direction, or with space between.

Align Items

Select how flex items will be placed in relation to the flex direction.

Top

The button’s top padding.

Right

The button’s right padding.

Bottom

The button’s bottom padding.

Left

The button’s left padding.

Left Border Color

The button’s left border color.

Left Border Width

The button’s left border thickness.

Right Border Color

The button’s right border color

Right Border Width

The button’s right border thickness.

Top Border Color

The button’s top border color.

Top Border Width

The button’s top border thickness.

Bottom Border Color

The button’s bottom border color.

Bottom Border Width

The button’s bottom border thickness.

Border Style

The button’s border style. Set the line’s appearance (pattern) and the amount the corners should be rounded.

Tab Button Selected Settings

Background Color

The button’s background color, when it is selected.

Flex Direction

Select the main axis where flex items will be placed, for instance horizontal or vertical (along a row or in a column).

Justify Content

Select how flex items will be placed in relation to each other, for instance towards the start of the flex direction, or with space between.

Align Items

Select how flex items will be placed in relation to the flex direction.

Top

The button’s top padding.

Right

The button’s right padding.

Bottom

The button’s bottom padding.

Left

The button’s left padding.

Left Border Color

The button’s left border color.

Left Border Width

The button’s left border thickness.

Right Border Color

The button’s right border color

Right Border Width

The button’s right border thickness.

Top Border Color

The button’s top border color.

Top Border Width

The button’s top border thickness.

Bottom Border Color

The button’s bottom border color.

Bottom Border Width

The button’s bottom border thickness.

Border Style

The button’s border style. Set the line’s appearance (pattern) and the amount the corners should be rounded.

Tab Button Text Default Settings

Font Settings

Select the font family, color, weight, size and emphasis of the button’s text. Add text decoration and character conversion, for instance to uppercase.

Flex Direction

Select the main axis where flex items will be placed, for instance horizontal or vertical (along a row or in a column).

Justify Content

Select how flex items will be placed in relation to each other, for instance towards the start of the flex direction, or with space between.

Align Items

Select how flex items will be placed in relation to the flex direction.

Border Style

The text’s border style. Set the line’s appearance (pattern) and the amount the corners should be rounded.

Tab Button Text Selected Settings

Font Settings

Select the font family, color, weight, size and emphasis of the button’s text. Add text decoration and character conversion, for instance to uppercase.

Flex Direction

Select the main axis where flex items will be placed, for instance horizontal or vertical (along a row or in a column).

Justify Content

Select how flex items will be placed in relation to each other, for instance towards the start of the flex direction, or with space between.

Align Items

Select how flex items will be placed in relation to the flex direction.

Border Style

The text’s border style. Set the line’s appearance (pattern) and the amount the corners should be rounded.

Tab Button Icon Default Settings

The default background color and padding of the tab button’s icon.

Tab button Icon Selected Settings

The background color and padding of the tab button’s icon, when it is selected.