Tabbed Container

Allows users to have a set of containers arranged sequentially and can be navigated through tabs. Each tab acts as a container that can have different widgets placed inside it.

Basic

Tabs

The list of tabs for the container set. The set can contain a single tab, and more tabs can be added. Each tab contains the following properties.

Property Description

Property	Description
Label	The text to be displayed to represent the tab
Value	The string value to refer the tab element. It is used during development typically.
Icon	Choose one from the set of icons that will be displayed as a logo.
Icon Position	`Prefix` - the icon logo is fixed before the label. `Suffix` - the icon logo is fixed after the label.
Hide	This sets whether this tab and contents have to be displayed on the screen when the program is loaded. This shows/hides the tab both on desktop and mobile devices.

Label

The text to be displayed to represent the tab

Value

The string value to refer the tab element. It is used during development typically.

Icon

Choose one from the set of icons that will be displayed as a logo.

Icon Position

Prefix - the icon logo is fixed before the label. Suffix - the icon logo is fixed after the label.

Hide

This sets whether this tab and contents have to be displayed on the screen when the program is loaded. This shows/hides the tab both on desktop and mobile devices.

Default Value

Provide the value of the tab which will be set as the default tab for the set and the contents from the default tab will be displayed when the widget is loaded.

Interaction

Default

Switch Tab - This is triggered when the user shifts from one tab content to another tab.

Disabled

Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied.

Show Header

Displays the header part of the tab set which contains the titles for the set.

Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

Tooltips display additional information upon mouse hover. This information will be contextual, useful, and informative. The tooltip will be immediately shown when the user's mouse hovers over the widget, and immediately hides when the user's mouse leaves.

Layout

Height

Auto

The height is auto-adjusted for the content

Fixed

The height of the widget is fixed and will not adjust to the content

Style

Property Description

Property	Description
Background	Users can change the colour of the text background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.
Loader Color	Set the colour for the loader spinner when the widget is loaded on to the screen.
BG Image	Provide the URL for the image serves as the background image to the widget
BG Repeat	Controls the repetition of the widget's background image. `repeat` - The background image is repeated both vertically and horizontally. `no-repeat` - The background-image is not repeated. The image will only be shown once. The reference to the list of options can be found here: MDN web docs
BG Size	Specifies the size of the background image. `auto`- Default value. The background image is displayed in its original size cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges The reference to the list of options can be found here: MDN web docs
BG Position	Sets the starting position of a background image. center - keeps the image at the center position. The reference to the list of options can be found here: MDN web docs
BG Origin	Specifies the origin position (the background positioning area) of the background image. The reference to the list of options can be found here: MDN web docs
Box Shadow	The is the colour of the shadow that is generated behind the widget box. The X and Y axis values can be altered such that the shadow can be set to fall anywhere behind the widget area. "x-offset" - a positive number specifies the shadow will be on the right of the box, and a negative number will put the shadow on the left of the box. "y-offset" - a negative one means the shadow will be above the box, and a positive number means the shadow will be below the box. "Blur" - if the number is set to 0 then the shadow will be sharp. It will more blurred as the number goes higher, and the shadow will extend further away. "Color" - sets the colour of the shadow. If the colour is not set, the box shadows are drawn in the foreground colour.
Tab Text	Set the colour for the title text of the tabs
Loader Color	Set the colour for the loader spinner when the widget is loaded on to the screen.
Text Transform	This property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. MDN web docs
Text Decoration	This property sets the appearance of decorative lines on text. Types are "underline", "overline", "line-though", "overline-underline".
Text Size	Set the size of the text in px value - 12px
Text Weight	Increase or decrease the thickness of the font using the list of numbers from 100-800.
Font Family	Type the name of the font family. The reference to the list of font families can be found here: MDN web docs
Font Style	There are 3 types of styles that can be applied: "normal" - The text is shown normally, no style applied. "italic" - The text is cursive. "oblique" - A sloped version of the normal text.
Border Color	Set the colour to the border lines. The border lines will be shown only if that is enabled.
Margin	This value is set in terms of "px" number which creates the space between the border and the content of the widget.
Padding	This value is set in terms of "px" number which creates the space between the border and outer elements.
Border Radius	This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.
Border Width	Set the thickness of the border of the widget using this value. It is defined using "px" terms.
Box Shadow	The is the colour of the shadow that is generated behind the widget box. The X and Y axis values can be altered such that the shadow can be set to fall anywhere behind the widget area. "x-offset" - a positive number specifies the shadow will be on the right of the box, and a negative number will put the shadow on the left of the box. "y-offset" - a negative one means the shadow will be above the box, and a positive number means the shadow will be below the box. "Blur" - if the number is set to 0 then the shadow will be sharp. It will more blurred as the number goes higher, and the shadow will extend further away. "Color" - sets the colour of the shadow. If the colour is not set, the box shadows are drawn in the foreground colour.
Tab Accent	An accent is a typically bright colour that contrasts with the more utilitarian background and foreground colours within a colour scheme. These are present in the visual style of many platforms (though not all). On the web, an accent is sometimes used in input elements for the active portion of the control, for instance, the background of a checked checkbox. MSDN web docs

Background

Users can change the colour of the text background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.

Loader Color

Set the colour for the loader spinner when the widget is loaded on to the screen.

BG Image

Provide the URL for the image serves as the background image to the widget

BG Repeat

Controls the repetition of the widget's background image. repeat - The background image is repeated both vertically and horizontally. no-repeat - The background-image is not repeated. The image will only be shown once. The reference to the list of options can be found here: MDN web docs

BG Size

Specifies the size of the background image. auto- Default value. The background image is displayed in its original size cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

The reference to the list of options can be found here: MDN web docs

BG Position

Sets the starting position of a background image. center - keeps the image at the center position. The reference to the list of options can be found here: MDN web docs

BG Origin

Specifies the origin position (the background positioning area) of the background image. The reference to the list of options can be found here: MDN web docs

Box Shadow

The is the colour of the shadow that is generated behind the widget box. The X and Y axis values can be altered such that the shadow can be set to fall anywhere behind the widget area. "x-offset" - a positive number specifies the shadow will be on the right of the box, and a negative number will put the shadow on the left of the box. "y-offset" - a negative one means the shadow will be above the box, and a positive number means the shadow will be below the box. "Blur" - if the number is set to 0 then the shadow will be sharp. It will more blurred as the number goes higher, and the shadow will extend further away. "Color" - sets the colour of the shadow. If the colour is not set, the box shadows are drawn in the foreground colour.

Tab Text

Set the colour for the title text of the tabs

Loader Color

Set the colour for the loader spinner when the widget is loaded on to the screen.

Text Transform

This property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. MDN web docs

Text Decoration

This property sets the appearance of decorative lines on text. Types are "underline", "overline", "line-though", "overline-underline".

Text Size

Set the size of the text in px value - 12px

Text Weight

Increase or decrease the thickness of the font using the list of numbers from 100-800.

Font Family

Type the name of the font family. The reference to the list of font families can be found here: MDN web docs

Font Style

There are 3 types of styles that can be applied: "normal" - The text is shown normally, no style applied. "italic" - The text is cursive. "oblique" - A sloped version of the normal text.

Border Color

Set the colour to the border lines. The border lines will be shown only if that is enabled.

Margin

This value is set in terms of "px" number which creates the space between the border and the content of the widget.

Padding

This value is set in terms of "px" number which creates the space between the border and outer elements.

Border Radius

This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.

Border Width

Set the thickness of the border of the widget using this value. It is defined using "px" terms.

Box Shadow

Tab Accent

An accent is a typically bright colour that contrasts with the more utilitarian background and foreground colours within a colour scheme. These are present in the visual style of many platforms (though not all).

On the web, an accent is sometimes used in input elements for the active portion of the control, for instance, the background of a checked checkbox. MSDN web docs

Header Style

Property Description

Property	Description
Header Padding	This value is set in terms of "px" number which creates the space between the header border and other elements of the widget.
Header Background	Users can change the colour of the header background using this property. It has all the RGB colour ranges to pick from.
BG Image	Provide the URL for the image serves as the background image to the widget
BG Repeat	Controls the repetition of the widget's background image. `repeat` - The background image is repeated both vertically and horizontally. `no-repeat` - The background-image is not repeated. The image will only be shown once. The reference to the list of options can be found here: MDN web docs
BG Size	Specifies the size of the background image. `auto`- Default value. The background image is displayed in its original size cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges The reference to the list of options can be found here: MDN web docs
BG Position	Sets the starting position of a background image. center - keeps the image at the center position. The reference to the list of options can be found here: MDN web docs
BG Origin	Specifies the origin position (the background positioning area) of the background image. The reference to the list of options can be found here: MDN web docs

Header Padding

This value is set in terms of "px" number which creates the space between the header border and other elements of the widget.

Header Background

Users can change the colour of the header background using this property. It has all the RGB colour ranges to pick from.

BG Image

Provide the URL for the image serves as the background image to the widget

BG Repeat

BG Size

The reference to the list of options can be found here: MDN web docs

BG Position

Sets the starting position of a background image. center - keeps the image at the center position. The reference to the list of options can be found here: MDN web docs

BG Origin

Specifies the origin position (the background positioning area) of the background image. The reference to the list of options can be found here: MDN web docs

Body Style

Property Description

Property	Description
Body Padding	This value is set in terms of "px" number which creates the space between the border of the body and the header/footer.
Background	Users can change the colour of the background for the body using this property. It has all the RGB colour ranges to pick from.
BG Image	Provide the URL for the image serves as the background image to the widget
BG Repeat	Controls the repetition of the widget's background image. `repeat` - The background image is repeated both vertically and horizontally. `no-repeat` - The background-image is not repeated. The image will only be shown once. The reference to the list of options can be found here: MDN web docs
BG Size	Specifies the size of the background image. `auto`- Default value. The background image is displayed in its original size cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges The reference to the list of options can be found here: MDN web docs
BG Position	Sets the starting position of a background image. center - keeps the image at the center position. The reference to the list of options can be found here: MDN web docs
BG Origin	Specifies the origin position (the background positioning area) of the background image. The reference to the list of options can be found here: MDN web docs

Body Padding

This value is set in terms of "px" number which creates the space between the border of the body and the header/footer.

Background

Users can change the colour of the background for the body using this property. It has all the RGB colour ranges to pick from.

BG Image

Provide the URL for the image serves as the background image to the widget

BG Repeat

BG Size

The reference to the list of options can be found here: MDN web docs

BG Position

Sets the starting position of a background image. center - keeps the image at the center position. The reference to the list of options can be found here: MDN web docs

BG Origin

Specifies the origin position (the background positioning area) of the background image. The reference to the list of options can be found here: MDN web docs

PreviousContainer NextTable

Last updated 1 day ago