Tabs blocks are a useful component for displaying a few distinct different components in a small area, where the user can view one at a time.
To Add a Tabs Block:
- Navigate to the page you want to add a Tabs Block to in the editor.
- On the left side of the editor, click the "Components" toggle, then search for "Tabs."
- Drag the Tabs component into the page.
To Add More Tabs:
- Select the Tabs Block you want to add more tabs to.
- In the left bar, find the Tabs List component, then find the containers right under that component.
- Duplicate one of the containers to add a new tab. Every container under the Tabs List component corresponds to another tab in the block.
- To add content for the new tab, find the Tabs Content component in the left bar. Duplicate the last container under the Tabs Content component in order to add the content for the next tab. The content from the Tabs List component and the Tabs Content component always sync up, so you now have a new tab, and a place for new tab content.
To Delete a Tab:
- Find the Tabs List component which contains the tab you want to delete.
- Select that tab (which should be under the Tabs List component), then press Backspace or right-click and select "Delete" to delete it.
Modifying Tab Content
To modify the content of each tab, you can click on the tab in the Tabs List component. Replo will automatically select that tab in the editor so that you can edit its content. Tabs content can be edited just like any other component in Replo.
Add Dynamic Data to Tabs
Tabs can be configured to load data dynamically from products or other sources of data. Click the dynamic data icon under the Config menu of the Tab component in the right bar to attach data dynamically to tab menus and items.