Pages/Layers Panel
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.
If you have any ideas to make Blup better you can share them through our Discord community channel
Music to go with.
Last updated
