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. |