Introduction
Supported:
When the Tabs(QB) plugin is in an app then Tabs can be added
-
To the TOP of the app, below the Nav Bar ONLY
-
With text entries per tab field
-
Fixed, dynamic and fractional width modes
-
The tab in focus will centre on the screen when navigating until that is not possible due to being at the left or right ends of a row of tabs
Not supported
-
No bottom tab support
-
No images in tabs
Tab configuration
-
Make sure the app has been built with the Tabs(QB) plugin added
-
Add a new screen and select Tabs(QB)
Select the screen in UI Builder and configure the Tabs in the right hand panel

Configurable Attributes and default values
Element |
Attribute |
Default Value |
---|---|---|
Text Label
|
Active text font / weight / size / line height / letter-spacing / color |
iOS: SF Pro Text, Bold, Size 13, Line height 16, Letter spacing -0.4, color rgba(0, 125, 255, 1.0) Android: Roboto, Bold, Size 13, Line height 16, Letter spacing 0, color rgba(0, 125, 255, 1.0) |
Default text font / weight / size / line height / letter-spacing / color |
iOS: SF Pro Text, Bold, Size 13, Line height 16, Letter spacing -0.4, color rgba(167, 167, 167, 1.0) Android: Roboto, Bold, Size 13, Line height 16, Letter spacing 0, color rgba(167, 167, 167, 1.0) |
|
Text Transform |
None(default) / Uppercase / Capitalise |
|
|
|
|
Tab Bar
|
Background color |
rgba(255, 255, 255, 1.0) |
Drop Shadow (iOS Only) |
Color: rgba(0, 0, 0, 0.10) Shadow Offset (height): 4 |
|
Elevation (Android Only) |
4 |
|
Padding Left & Right |
0 |
|
Horizontal gutters (space between tabs) |
0 |
|
Gradient Left & Right. Nice to have |
|
|
|
|
|
Tab Cell
|
Padding: Top, Right, Bottom, Left |
14, 10, 14, 10 |
Active background color |
Default set to transparent |
|
Indicator bar color |
rgba(0, 125, 255, 1.0) |
|
Indicator bar height |
3 |
|
|
|
|
Tab Bar Display Fractional Fixed
Dynamic
|
|
|
All tabs occupy 100% width of the screen. Ellipsis should be used when text label does not fit the space |
|
|
Specify fixed width of tab |
|
|
All tabs are the same width. |
|
|
Option to align tabs to the center/left/right when tabs length is less than screen width |
Center (default) / left / right |
|
Snaps to center when width of tab list allows (Telegraph app example) |
|
|
Text label is as wide as the string/number of characters |
|
|
Option to align tabs to the center/left/right when tabs length is less than screen width |
Center (default) / left / right |
|
Snaps to center when width of tab list allows (Telegraph app example) |
|
Tabs Display Modes
There are three modes that can be chosen when using the tabs component: Fractional, fixed and dynamic.
-
Fractional
-
tabs are equally distributed across 100% width of the screen.
-
-
Fixed
-
all tabs have the same width which is defined by the user.
-
-
Dynamic
-
tabs have different widths based on text label width.
-

Tab Snapping
This is applied to tabs when using fixed & dynamic modes. When set active tabs within a long list of tab items will snap to the centre of the component.
Tab Alignment
This can be applied to tabs using fixed & dynamic modes when the total tab items width is less than the width of the screen. Tab items can be left, right or centrally aligned.


Text Labels
Text labels can be styled with the following attributes:
-
Default: Text size, color, font, weight
-
Active: Text size, color, font, weight
-
Line height
-
Letter spacing
-
Text transform
Comments
0 comments
Please sign in to leave a comment.