Skip to main content

Create a tab UI

This tutorial describes how to create a tab UI using variables and conditional blocks.

The final result is as follows.

  • Monday If you press the tab, Cold Noodles is displayed on the screen.
  • Tuesday If you press the tab, Chicken will be displayed on the screen.
  • Wednesday tab to display Ramen on the screen.

The result of the tab UI.

caution

Be sure to be familiar with the variables and conditional blocks before you refer to them.

1. Create a tab UI with groups and text.​

Create a tab UI.

2. Create three forms using Condition Blocks.​

Create conditional block shape

3. Add a variable to the page called "Current Tab" that tells you where the current tab is.​

In this tutorial, we will refer to the tabs as 1, 2, and 3 in that order. The first tab (Monday) should be marked by default, so we set the default value of the "Current Tab" variable to 1.

Create current tab variable

4. Set conditions for each form.​

  • The form Monday is displayed when "Current Tab" is 1.
  • The form Tuesday is displayed when the "Current Tab" is 2.
  • The form Wednesday is displayed when "Current Tab" is 3.

condition setting

5. Use the Change variable value action in each tab to set the value of the current tab to your own tab.​

change variable value

6. Deploy to test that the tab works.​