Canvas Pages and Modules
1.0.0
1.0.0
  • Welcome
  • PAGES
    • Profile Page
    • Standard Page
    • Toggle Tabs Page
    • Mobile Menu Page
    • Video List Page
    • Portal/Dashboard Page
    • Search Page
    • Search Bar Page
    • Listing Profile Page
    • 1-Column Multi-Step Process Page
    • 2-Column Multi-Step Process Page
    • 2-Column Profile Page
  • MODULES
    • Comments Thread
    • Nested Comments Thread (with Like and Reply)
    • Chat Widget
    • Week Daily Availability
    • Video Group
    • Drag and Drop Repeating Group
    • Reviews Repeating Group with Image
    • Reviews (Text Only) Repeating Group
    • Accept/Decline Repeating Group
    • Nested Repeating Group
    • Standard Repeating Group with Image
    • Standard Repeating Group with Image and Add Button Repeating Group
    • Expandable Input Forms Repeating Group
    • Expandable Group (with Button, Link, and Section Header) Repeating Group
    • Expandable Group (Text Only) Repeating Group
    • Single Input Search Bar and Filter Group
    • 1-Column Standard Form Inputs Group
    • 1-Column Instagram Tiles Group
    • 1-Column Link, Text, and Menu Focus Repeating Group
    • 1-Column Title Text, Link, and Body Text Repeating Group
    • 2-Column Title Link and Text Repeating Group
    • 2-Column Simple Form Inputs Group
    • 2-Column Sortable List (Image, Link, Star Rating, and Text) Repeating Group
    • 3-Column Text and Link Repeating Group
    • 3-Column Horizontal Scroll Repeating Group
    • 4-Column Data Table with Title
    • 4-Column Date Table with Cell Selection, Menu Focus Group, and Filters
    • 4-Column Standard Tiles Repeating Group
    • 4-Column Product Image Tiles with Prices Repeating Group
    • 4-Column Video, Star Rating, and Text Tiles Repeating Group
    • 4-Column Reviews Tiles with Star Rating Repeating Group
    • 5-Column Data Table with Sortable Fields
    • 6-Column Small Tiled Horizontal Scroll Repeating Group
  • Popups
    • Stripe Credit Card Purchase Popup
  • Reusables
    • applyfilters
    • menufocusgroup or Menu options (︙)
Powered by GitBook
On this page
  • Overview
  • Structure
  • How to set up

Was this helpful?

  1. PAGES

Mobile Menu Page

PreviousToggle Tabs PageNextVideo List Page

Last updated 6 years ago

Was this helpful?

Overview

Standard one column page layout where multiple modules can be stacked on top of each other (they should not be overlapping). This page includes a bottom navigation menu that is optimized for use on mobile. The menu displays four destinations and each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. Please ensure that you have installed the Feather Icon plugin to your app before submitting your page request.

Structure

  • When this page is added to your app, it will come with one main group:

    • Group page860Group - This group contains the responsive settings for all modules. All modules should be placed into this group.

    • var - Website object - This group stores the website object (e.g., app name, primary color, and etc.)

    • var - dummy - This is a placeholder group. You can store any data here by updating the type of content and data source of the group.

    • The bottommenu reusable element comes with four tabs

    • Clicking on a tab will trigger a custom workflow called Set tab number

      • The custom workflow will set a number state on bottommenu (this captures which tab the user is currently viewing)

    • The reusable element also includes a Popup Hidden Variables

      • var - toggle tabs stores bottommenu's number state

How to set up

  • Resize Group page860Group and add other modules inside of it

If you add more modules, please resize Group PLACEHOLDER so that it is not overlapping with any other elements (for responsiveness)/

  • Update Title Text (please note that Group Title will be hidden when the page width is less than or equal to 500px)

  • By default, the modules should be hidden on page load (uncheck the box for This element is visible on page load for each module)

    • Check the box for Collapse this element's height when hidden

  • To show or hide modules, add conditional statements to each module:

    • For the first module, add the conditional statement

      • bottommenu's Tab is empty or bottommenu's Tab is 1then This element is visible

    • For modules after the first module, add the following conditional statement:

      • bottommenu's Tab is 2 then This element is visible

      • bottommenu's Tab is 3 then This element is visible

      • and so on..

This page will come with a Popup Hidden Variables. For more information on how to use the Popup Hidden Variables, .

This page will also come with two reusable elements: and bottommenu.

Make sure you are using the latest Canvas Starter Template and that you have installed the to your app.

click here
header A
Feather Icon Plugin