Add a screen with tabs displaying different content
Toggle content inside a page without needing to replicate screens. Page tabs can be used either as an extra navigational hierarchy that complements the main bottom menu or you can also use it to navigate content with buttons inside a page.
This component requires the following tags:
[container:tabs-controls]: a special container inside the
[container:tabs]element. It will contain the tabs controller to switch between the different segmented tabs. It needs to be aded in the 3rd level layer in the design file.
[container:tabs-content]: a special container inside the [container:tabs] element. It will be used for the content for the segmented tabs. It needs to be aded in the 3rd level layer in the design file.
- 2.Create a frame that takes the space for the segmented tabs content. Add the
[container:tabs-content]tag in this element.
- 3.Surround all these elements with a
[container:tabs]element, located in the second-level layer.
4. Finally, to create the content for the segmented tabs, create separate screens with the content you want to display, and create prototyping links from the buttons in the controller to these pages. You can bind API data to the pages as well.
Duplicate this file below to see how to set it up!