EssentialsComponents

Tabs Container

Group components into custom tabbed views.
Feature in Beta

This feature is in beta. Features in beta can be unpredictable and may change as development continues. The Glide Support team does not provide help with these features. Please post any questions in the Community forum.

The Tabs Container component is similar to the Container component: it acts as a parent inside which you can add child components. The components you add will be separated into different tabs, allowing users to click between the tabs to view each component in the interface.

Tabs Container - Image 1

Setting up the Tabs Container Component

1

In the Layout Editor, select the screen you want to edit.

2

Click on the plus (+) symbol in the Components panel.

3

Select Tabs Container.

4

You will see a blank container with a + symbol. Selecting the plus will open the component menu, where you can choose a component to add to the container. You can also add more components to the container by clicking on the + insert component button on the left, in the components list.

5

You can add multiple components to each tab. To add another component to the same tab, choose any component from the components list on the left and drag it into the tabs container.

  • Note: The Tabs Container cannot hold other Container components. To do this, use a Tabs component.
6

To create another tab in the container, click the top level Tabs Container component and select + Add item on the right-hand side.

A separator will appear in the tabs container component to differentiate between each tab. Components can be dragged and dropped between different tabs.

Customizing the Tabs Container Component

When you add components to the Tabs Container, each component within the container will have its own configuration options. To customize each component, click on it to open the configuration menu on the right.

The Tabs Container itself also has customization options that change the design and visibility of the whole container. To customize the Tab Container component itself:

1

Select the Tab Container component from the components menu on the left-hand side

2

Choose Line or Button style. This will either underline the Tab name in the interface or put a shaded box around it.

3

Toggle Full width on mobile to spread tabs evenly out across the width of a mobile device. This will create padding and center the tabs on the screen, rather than aligning them to the left.

4

Choose a Background style.

5

Add more tabs with the + Add item button. Each tab can have a unique name, a display name, an icon, and a badge. If display name is left blank, then the name field will appear for users. The badge field supports letter, number, and emoji inputs.

Visibility conditions can be set per tab, as well as for the whole tab container component. Custom CSS and Builder notes can be added under the Options menu.