I am presently studying how the default TAB element in bubble works. Since tab contents are assigned values and not acted upon based on their element names, are they sequentially arranged with numerical values? Example, how would bubble know that in a custom state, value 1 will show if TAB 1 is clicked, the same goes with other TABS, especially considering that in the element tree (as shown by the photo below), Group Tab 3 content comes first, then 2 and 1.
Hi there, @janernestgo… I’m not sure I fully understand your question, but the tab element works by having a custom state (number) called current tab on the main group, workflows that set the custom state’s value to a number when one of the tab buttons is clicked, and conditionals on the tab groups to show/hide them when the custom state is set to a particular number. So, when the Tab 1 button is clicked, the custom state’s value is set to 1, and the group associated with Tab 1 is shown.
Hope this helps.
Best…
Mike
Hello Mike!
Are the content bodies 1, 2, 3 (as included in the default tab element) displayed in sequential order? Meaning which ever is stacked on top, gets to naturally be value 1. Because in the screenshot I included earlier, content 3 appears to be on top.
How do you tag the content body / group to be value 1, 2, or 3.
It’s not about an order. It’s about the conditionals on the group tab elements.
You can see how those conditions show/hide the group associated with Tab 1 when the custom state’s value is set or not set to 1. The same conditions exist on the groups associated with Tab 2 and Tab 3. It’s all about the custom state’s value and those conditionals.
This is because the default tab element made by bubble already configured content tab 1 to be value 1, and the same goes for others?
In case you build tabs from ground up. How would you tag a certain group to be value 1?
You’re not tagging a group with a specific value, per se. You are setting a conditional on the group to show the group when a custom state is set to a particular value.
Sorry I am just a little confused how the value 1 was set to the Group Tab 1 content. The same goes for value 2 to be Group Tab 2 content etc.
Sorry, but I’m not sure how else I can explain it. A value of 1 is not set to the Group Tab 1 content element. Instead, a conditional is added to the element (refer to the first conditional in the screenshot I attached) that says when a custom state’s value is set to 1, show the Group Tab 1 content element.
I appreciate the time and effort for explaining this to me. I understand that the customs state in this pre-made tab element was applied in the entire group, it appears to know or call the proper content group depending on the value and tab button associated with it.
After a series of tests, I now understand that the content body, or the elements that I wish to show and hide, are based on the element to which I applied a custom state. When the customs state is changed, the content body reacts to it. Hide/show is based on the state of the element. Thanks @mikeloc !
@mikeloc One more thing mike! Instead of using button elements, will it still work if I use drop down? I can’t make a workflow with options inside the dropdown, unlike when it’s used w/ a button element.
This topic was automatically closed after 70 days. New replies are no longer allowed.
