How to set tab navigation with Material Design UI Kit

[studio.purracchio]

Hi.
This tutorial is for Material Design UI Kit Plugin by Andrea Purracchio owner.

This is a very basic example that you can improve and customize as you want (with animations as well).

1. You must manage page navigation in only ONE bubble/web page.

2. The pages that you need to navigate are invisible Groups that you can view in a peculiar condition.

3. Add MDUI-Tabs component and create a structure tree like in the image below.
   

4. Populate MDUI-Tabs component with appropriate captions like this…
   

   

5. Add a state in index (for instance) page, named “selected_tab” (or everything you want) as a number and with default value to 1.

6. Set all your Groups used like tabs, invisible and add to they a condition that can set they visible when “selected_tab” is a proper number.

7. Create a workflow that use the MDUI-Tabs is changed action and set index’s selected_tab to MDUI-Tabs’s index state.

All done !!!

You can separate workflow for each MDUI-Tabs’s index and do something for each number like animation …for instance.

Let me know your doubts! Bye!

[marceloquinan]

Hi,
Is there any way to set a default active tab, one that will show up as selected/active upon MDUI-Tabs load?
Thanks!

[studio.purracchio]

@marceloquinan

Is there any way to set a default active tab, one that will show up as selected/active upon MDUI-Tabs load?

Yes, of course !

In the workflow panel you can add an event like “When page is loaded” and in there…

1. Add a pause of 500ms (Navigation → Add a pause before next action…)
2. Add action “Set an item active on MDUI-Tabs” configured to your default active tab ( e.g.: 1)

Bye.