Load Tabs from JSON

In general, the data presented in the tabs is already included in the web page. In cases where we want to change the content for specific tab or load tabs in whole from a remote data source, we can use a JSON file as our data source. In following sections, we will show you how to do using the IntegralUI TabStrip component.

In following sections below, you will find sample code that shows how to load tabs from JSON into the TabStrip in JavaScript, Angular, React and Vue.

As above demo shows, the content of tab strip is fully loaded from a JSON file. Tab headers show title, while tab content shows the content set in JSON data.

Following sections below contain sample code in JavaScript, Angular, React and Vue.

Create a JSON Data Structure for Tabs

At first, we need to specify the content of our tabs, their header and content. In this example, the JSON data is simple; it contains the tab title and its content as string values. In addition, you can also set different tab strip settings like how tabs are aligned, the side at which tabs are places, animation in use, the size of the tab strip etc:

• JSON

Tabs HTML Specification

Now, we need to specify how our data from JSON file will be displayed to the end user. If tab shows only a single lined text, then there is no need for a template. However, if you want to create a tab with icon, title, buttons, title and subtitle etc you will need to apply a custom template where you can add custom HTML elements.

Related: How to Add Close Button to Tab Header

To simplify the example and focus on JSON data, in this case tab headers only show a label.

• JavaScript
• Angular
• React
• Vue

Tab content is also custom, you can add any HTML elements to the tab content and arrange them in different layouts for each tab separately. The template for the tab content can be set in JSON, however to keep this example simple, the content is only few paragraphs.

Load Data from JSON File into the TabStrip

Once you have JSON data ready, you can load it into the TabStrip. Based on settings from JSON file, TabStrip component will update its layout and using the JSON data will create tabs with their content.

• JavaScript
• Angular
• React
• Vue

Conclusion

Populating the IntegralUI TabStrip component dynamically with data from a remote data source, in this case a JSON file, is simple. We only need to create the data structure for the tabs, and then link this data with the TabStrip properties. When data is loaded, tabs will appear along with their content.

A sample code is available in JavaScript, Angular, React and Vue that shows how to load tabs from JSON. The TabStrip is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.