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
  • Properties Panel
  • Advanced Customization in the Properties Panel
  • Music to go with.

Was this helpful?

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

Properties Panel

Right Hand Side Panel Of Blup

Properties Panel

The properties panel enables the users to change the various properties associated with the selected widget in Blup Designer. Advanced properties like elevation, shadow, color, etc. can easily be altered using the Properties panel. The properties displayed in the panel at any given time is dependent on the selected widget and can change according to the type of widget selected.

Now, let's go over the properties of each type of widget.

In Blup, the Pages Properties section within the Properties Panel allows for comprehensive customization of page attributes. Users can adjust settings such as page dimensions, orientation (portrait or landscape), and background color or image. This panel is essential for configuring the foundational aspects of each screen in your application, ensuring consistency and user-friendly navigation.

Text Properties within the Properties Panel enable users to tailor text elements to fit specific design requirements. This includes selecting font families, adjusting font size and weight, setting text color, alignment (left, center, right), and applying styles such as bold, italic, or underline. These options ensure that text within your application is not only readable but also visually cohesive with the overall design.

For applications requiring organized data display, the List Properties section in the Properties Panel offers vital customization capabilities. Users can define the layout and style of list items, including spacing between items (padding), margins around the list (margin), and the appearance of separators between items. These properties help maintain clarity and usability within list-based interfaces.

Rectangles serve as fundamental building blocks in UI design, and the Rectangle Properties section in the Properties Panel provides essential controls for their appearance. Users can adjust dimensions (width and height), position (X and Y coordinates), corner radius for rounded edges, background color or image, border properties (width, color), and apply effects such as elevation and shadows.

Advanced Customization in the Properties Panel

Blup’s Properties Panel provides advanced customization options, enhancing the visual and interactive aspects of your widgets beyond basic properties.

  • Elevation and Shadow

    Adjust depth and shadow intensity for widgets to add visual hierarchy, creating a more immersive and intuitive interface.

  • Color Customization

    Use a color picker or hex codes to control colors precisely. Maintain consistency with your brand or design theme across all elements.

  • Dynamic State Management

    Define how widgets react to user interactions like hover effects or state changes. This boosts interactivity and user engagement.

  • Animation Settings

    Implement entrance and exit animations to offer visual feedback, enhancing user experience. Smooth transitions make your application more appealing and usable.

Music to go with.

PreviousDropdown Menu WidgetNextPages Properties

Last updated 10 months ago

Was this helpful?

Pages Properties
Text Properties
List Properties
Rectangle Properties
Lofi music