Box

The Box component can be used as a background for several other components.

Default Component Image

This section allows you to customize the shadow styling of the component's background to enhance depth and visual hierarchy.

Shadow: Enables or disables the shadow effect. Check this box to apply a shadow to the component.
Shadow Color: Select the color of the shadow. This defines the hue that will appear around the component when the shadow is enabled.
Shadow Transparency: Adjusts the transparency level of the shadow. A lower value makes the shadow more transparent, while a higher value makes it more opaque.
- Example: A value of 0.1 results in a very light and subtle shadow.

This section allows you to configure the fundamental attributes of the Box component.

Component Name: Assign a unique identifier to the Box component for easy reference.
Left: Specify the distance from the left edge of the container to position the component.
Top: Set the vertical distance from the top edge of the container to the Box component.
Height: Define the component's height to determine its display height.
Width: Adjust the component's width according to the layout design.
Initial Visibility: Toggle to display or hide the component when the view is first loaded. If unchecked, the component is not visible on the initial preview.
Click Value: Input a value to trigger specific actions when the user clicks on the component.

This section allows you to enhance the visual appearance of the Box component by customizing its style and overall look and feel.

Gradient Rotation: Adjusts the direction of the gradient fill within the Box component. Select an angle between 0 to 360 degrees. A 90-degree angle allows the gradient to transition vertically.
Gradient: Choose two colors that blend seamlessly from top to bottom or left to right based on the gradient rotation angle.
- By clicking the Gradient icon, it opens the Background gradient colors dialog box.
- The user can add various colors using the Add Color option.
- Click the Save option to apply the specified style properties to the Box component.
Opacity: Controls the transparency level of the Box component. Set a value between 0 (fully transparent) to 1 (fully opaque).
Border Thickness: Defines the thickness of the Box component's border.
Border Radius: Determines the roundness of the Box component's corners.
Border Color: Pick a color that complements or contrasts with the component's design for visual interest.

The modified Box appearance gets changed after changing its properties, as displayed in the image:

Last updated 15 days ago