Configure Quick Brick Mobile Tabs

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 Shadow Radius: 8
	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.

Anatomy Of A Tab

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