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.

Last updated

Change request #199: