Docs
BlupLearnSupportDownload
  • Home 🏠
  • Wiki
    • Design (UI) ✏️
      • Blup Top Bar
      • Blup Menu Bar
      • Pages/Layers Panel
      • Toolkit
      • Insert Panel
        • TextField Widget
        • Progress Widget
        • FAB Widget
        • Icon Widget
        • Lottie Animation Widget
        • Text Button Widget
        • Appbar Widget
        • Checkbox Widget
        • Switch Widget
        • Slider Widget
        • Radio Widget
        • Progress bar Widget
        • Multi choice dialog Widget
        • Web View Widget
        • Camera View Widget
        • Map View Widget
        • Date Picker Widget
        • Time Picker Widget
        • IOS Date Picker Widget
        • IOS Timer Widget
        • Alert Dialog box Widget
        • Dropdown Menu Widget
      • Properties Panel
        • Pages Properties
        • Text Properties
        • List Properties
        • Rectangle Properties
      • Page Canvas
      • Choose from Assets
      • Right-Click Menu in Design
      • How to use navigate page in Blup
    • Logics ⚡
      • UI Nodes
        • Rectangle UI Node
        • Text UI Node
        • Group UI Node
        • List UI Node
        • Page ListView UI Node
      • Helper Nodes
        • Boolean Nodes
        • Date Time Nodes
        • Double Nodes
        • Duration Nodes
        • Integers Nodes
        • Json Nodes
        • List Nodes
        • Map Nodes
        • String Nodes
      • Variables Node Section
      • Function Node Section
      • Maths Node Section
      • Flow Control Section
      • Relational Operators Section
      • Logical Operators Section
      • System Node Section
      • SDK Library Section
      • Blup Sheet API Node Section
    • Backend 🔗
      • Sheets
      • SQL
    • Blup Code Editor
      • File Explorer
      • Editor Area
    • Publish to stores 🚀(Ship)
      • iOS Cloud Build 😮‍💨
        • Configure ⚙️
        • Run ▶️
      • Play Store
    • Build Your First App
      • TODO App
  • Blup Settings
  • Import from Figma
  • How to use WebView in Blup
  • How to use Google Maps in Blup
  • How to use the camera in blup?
  • How to add Splash screen in Blup?
  • How to know Debug prints in blup
  • How to use Google sign in in Blup
  • Creating sign up/ sign in in Blup
Powered by GitBook
On this page
  • Search Bar
  • Tabbar
  • Tabbar view
  • Music to go with.

Was this helpful?

Edit on GitHub
  1. Wiki
  2. Design (UI) ✏️

Pages/Layers Panel

Efficiently manage your app's pages and layers in Blup with the Pages & Layers Panel.

PreviousBlup Menu BarNextToolkit

Last updated 10 months ago

Was this helpful?

Layer/Panel consists of:

  • Search bar

  • Tabbar

  • Tabbar view

Search Bar

When you click on the search icon located on the right side, it activates an input box. This input box allows you to filter through pages and layers.

In other words, you can easily search for specific pages or layers by typing keywords or names into the input box, helping you quickly locate and manage the desired elements within the interface.

Tabbar

The tabbar serves as a navigation tool for toggling between pages and the layer view. Clicking on the "layers" option reveals the layers view, displaying all widgets/components on the selected page or screen. Conversely, clicking on "pages" displays a list of all available pages.

This functionality improves usability by offering a straightforward and intuitive method for navigating different sections of the interface and accessing specific features, ultimately enhancing the overall user experience.

Tabbar view

The view showcases either all components or all pages available i.e. layer panel or pages panel.

Layers Panel

Blup employs a layering approach, where each widget is constructed with multiple layers stacked atop one another. Every page or canvas has its own unique set of layers, visible within this designated section. These layers represent the composition of the current page.

To view the layers of a different page, click on the respective page name in the pages tab within this section.

Layers prove invaluable when designing widgets that require stacking. To rearrange the order of any layer, select it and drag it to the desired position.

Any Groups or Objects you add to the canvas will be visible in the Layers panel. You can determine if a Layer is a Frame, Group, or a specific type of Object by the icon next to it:

  • Rectangle

  • Text

  • Group

  • Scroll

  • List View

  • Page View

Blup nests any child objects within their parent group. This allows you to collapse and expand layers within a group.

New layers will be added to the top of the list, or the top of the group or frame it is contained within. Or, just above the layer you currently have selected. If your layers are inside a section, the section will always be the parent-level layer.

There are lots of interactions you can have

  • Select layers, groups, and frames

  • Adjust the z-index with layer order

  • Rename layers individually.

  • Toggle layer visibility

Pages Panel

The pages section is essentially a list of all the pages or screens you have built for your project or app.

You can add new pages by clicking the "Add Page" button.

You can also view all pages or screens by clicking the "View All Pages" CheckBox or checking it and vice-versa for a selected page or screen.

Music to go with.

If you have any ideas to make Blup better you can share them through our

Discord community channel
Layers Panel
Pages Panel
Search Layer or page