Tabbed Content

Tabbed Content is part of the App Navigation Component Set. This Component is a great way to consolidate a lot of information into one eye-catching page. Allow users to tab between three screens all with different information.

Ideas for Using Tabbed Content

Have an upcoming event and want to show a breakdown of events for the three days? Use the Tabbed Content Component to accomplish this.
Share more product information by using the tabs for sections, such as: customer reviews, warranty information, installation guide, or provide specifications.
Add an event calendar by titling each tab a month and listing upcoming events for each one.
In a conference app outline, the different tracks attendees can select.

Pro Tip: Want to enhance your app design? App users can experiment with colors and add images to enhance the tab styling.

Tabbed Content Properties

The Tabbed Content component has the following properties:

Component Id - Sets the name of the component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.

Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
Recall Last Tab Toggle - Toggles on or off for the Component to recall the last tab. Default is set to on.

Tab Styling

Inactive Fill Color - Sets the tab fill color when the tab is not selected. There are two ways to set the Fill Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Inactive Border Color - Sets the tab border color when the tab is not selected. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Inactive Text Color - Sets the text color when the tab is not selected There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Active Fill Color - Sets the tab fill color when the tab is selected. All other tabs show as Inactive. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Active Border Color - Sets the tab border color when the tab is selected. All other tabs show as Inactive. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Active Text Color - Sets the text color when the tab is selected There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Bold Text - Toggles on or off to display the text as bold.
Content Area Fill Color - Sets the background color for the content area. There are two ways to set the Fill Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Border Width - Sets the width of the border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.
Default Active Tab - Choose from the dropdown which tab should show as active when the users open the page. Choose between First, Second, or

Text Styling

Headline

Headline Font Size - Sets the size of the headline font in pixels.
Headline Color - Sets the color of the headline text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Headline Bold - Toggles on or off to display the text as bold. Default is to on.
Headline Italic - Toggles on or off to display the text as italicized.
Headline Alignment - Sets the alignment of the headline text. Choose from the dropdown list: Left, Right, or Center.

Subheadline

Subheadline Font Size - Sets the size of the subheadline font in pixels.
Subheadline Color - Sets the color of the subheadline text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Subheadline Bold - Toggles on or off to display the text as bold.
Subheadline Italic - Toggles on or off to display the text as italicized.
Subheadline Alignment - Sets the alignment of the headline text. Choose from the dropdown list: Left, Right, or Center.

Tab 1-3

Tab Name - Enter the text as it should appear in the tab.
Image Upload - Upload a .JPG .PNG or GIF to display an Image in the content area of the tab. To remove an uploaded Image, click on the Trash Can.
Headline Text - Enter the text as it should appear in the headline of the content area.
Subheadline Text - Enter the text as it should appear in the subheadline of the content area.
Body Copy - Click the button to open the Rich Text content modal. Enter the text in this modal. The text will wrap and there is no limit on the number of characters allowed. The toolbar is used to format the text as needed.

Tabbed Content Placement Settings

The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:

Column Start - Sets the column where the Component will start.
Column Span - Sets how many columns the Component will span.
Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.