Canvas Pages and Modules
Search…
Canvas Pages and Modules
2.0.0
Welcome
PAGES
Free Bubble Marketing Page
Premium Bubble Marketing Page
Centered Profile Page
Left-justified Profile Page
Standard Page
Toggle Tabs Page
Menu Page
Mobile Menu Page
Video List Page
Portal/Dashboard Page
Portal / Dashboard Page with Icons
Simple Portal / Dashboard Page with Icons
Search Page
Map Page with Search Bar, Toggle, and Filters
Search Bar Page
Listing Profile Page
Multi-Step Page (Progress Bar)
1-Column Multi-Step Process Page
2-Column Multi-Step Process Page
2-Column Profile Page
2-Column Profile Tabs Page
2-Column Menu Tabs Page
2-Column Checkout Page
2-Column Product Checkout Page
2-Column Video Chat Page
BLOCKS
Comments Thread
Nested Comments Thread (with Like and Reply)
Chat Widget
Bottom Input Chat Widget
Toggle Tabs Group
To-do List
Title Group with Button and Filters
Listing Details with Tags, Button, and Progress Bar
Listing details with icons and menu focus group
Week Daily Availability
Shopping Cart
FAQ Group
Shipping Details
Payment Methods
Order Confirmation
Dismissible Module
Placeholder group
Video Group
About Group
Add to Cart Group
Full Width Map with Directions Link
Location Module (Map and Directions)
Drag and Drop Repeating Group
Advanced Form Inputs Group
Reviews Repeating Group with Image
Reviews (Text Only) Repeating Group
Nested Repeating Group
Standard Repeating Group with Image
Single Input Search Bar and Filter Group
Listing Details Group
Post Group with Upvoting UI
Dashboard Chart Widget
Main Image with Thumbnails
Centered Profile Module
Left-justified Profile Module
1-Column Standard Form Inputs Group
1-Column Instagram Tiles Group with Nested Comments
1-Column Link, Text, and Menu Focus Repeating Group
2-Column Repeating Group (Text, Link, Image, and Description)
2 Column Repeating Group (Link, Text, and Button)
2-Column Tiles Repeating Group
2-Column Simple Form Inputs Group
2-Column Sortable List (Image, Link, Star Rating, and Text) Repeating Group
2-Column Dashboard Widgets
3-Column Dashboard Widgets
3-Column Repeating Group (Text, Link, Image, and Description)
3-Column Text and Link Repeating Group
3-Column Icons with Labels Repeating Group
3-Column Tiles Repeating Group
3-Column Tiles with Buttons Repeating Group
3-Column Horizontal Scroll Repeating Group
4-Column Tiles Repeating Group
5-Column Date Table with Cell Selection, Menu Focus Group, and Filters
Mobile-Friendly Data Table with Cell Selection, Menu Focus Group and Filters
Standard Horizontal Scroll Data Table
Infinite Columns Horizontal Scroll Data Table
Infinite Columns Horizontal Scroll Data Table with Fixed First Column
Popups
Confirmation Popup
Message Popup
Image Popup
Video Popup
Vertical Scroll Popup
Edit Popup
Standard Form Popup
Subscribe Popup
Feedback / Contact Popup
Details Popup
Add List Popup
Advanced Form Popup
Rating Popup
Toggle Tabs Popup
Share Popup
Multi-Step Popup
Invoice Popup
Stripe Credit Card Purchase Popup
Reusables
applyfilters
menufocusgroup or Menu options (︙)
Powered By GitBook
Toggle Tabs Group

Overview

This group includes a tab-like UI component for showing and hiding blocks.

Structure

  • This Group toggleTabsGroup has a data type of text. It stores the name of the current tab that the user is viewing. It includes all of the tabs that a user can click on. Each tab group (e.g., Group Nav 1 tab -) has a data type of text and contains the name of the tab. Clicking on tab group will toggle to a different tab (you will have to determine which group to show).

How to set up

  • Update the data source of each of the tab groups (e.g., Group Nav 1 tab - , Group Nav 2 tab -, etc.) and update the group's text
  • Set Button tab item to reference parent group's text:uppercase.
  • Resize the tab groups to ensure the full text is visible.
  • Add new blocks using the extension
    • The new blocks should have 'This element is visible on page load' unchecked and 'Collapse this element's height when hidden' checked.

How to show a tab

  • Add the following conditional statement to the block you want to display for each tab:
    • Example for tab 1: If Group toggleTabsGroup's text is Group Nav 1 tab -'s text or GrouptoggleTabsGroup's text is empty then this group is visible
    • Example for tab 2: If Group toggleTabsGroup's text is Group Nav 2 tab -'s text then this group is visible
    • Example for tab 3: If Group toggleTabsGroup's text is Group Nav 3 tab -'s text then this group is visible
​
BLOCKS - Previous
Bottom Input Chat Widget
Next - BLOCKS
To-do List
Last modified 1yr ago
Copy link
Outline
Overview
Structure
How to set up
How to show a tab