Managing component style properties

Mathangi
9 days ago

Alignment

Align and Justify

The page builder provides various alignment options to align the components placed in the body of the page. The alignment can also be done within a container, a master details container, a tab container, and a popup container.

Overflow

Overflow can be set as auto or hidden. On setting the overflow as auto, the scroll is automatically formed at the end of the page. You can scroll down to see the other components in the page. On setting the overflow as hidden, the page breaks at the end and you will not be able to scroll down to view other components.

For example, in the below image, we have selected the alignment to be at the top and the justify to be at the center. The resultant page will have the components aligned at the top center. Similarly, various combinations of alignment can be made based on the page requirements.

Sizing

Sizing offers you the flexibility to set the width and height of the components. This can be set as a percentage (%), pixel (px), and auto. In “auto”, the size is adjusted automatically to the original size of the component.

You can also set the minimum and maximum width and height. Again, this can be set as a percentage (%), pixel (px), and auto. There’s also an option to set it as “none” if you do not want a minimum or maximum width and height.

Padding and Margin

While padding lets you create space inside a component, adding a margin creates space around the component. This can be used to move certain components to the desired spot without having to align them.

The hyperlink symbol denotes that the same margin and padding can be applied to all four sides. It can be disabled to set a specific margin or padding to each side.

Here, we have applied a margin of 10 px and padding of 20 px for the below container.

Border

A border is used to provide a definite shape to a component. It can also be used to differentiate one component from another.

The radius option lets you define the four ends of the component. Setting a radius gives a curve to the component edges.

Here, we have given a border and set the radius for the container and the buttons to give them an intuitive look.

Shadow

There are four different shadow options available in the style properties. Each option differs by the intensity of the shadow effect applicable. For example, shadow level 1 provides a thin shadow while shadow level 4 provides a thicker shadow effect.

Background

In the body of the page, the background type can be set as an image or a color.

While setting the background type as an image, the background fit can be set as:

Auto: In auto, the size is automatically fit to the size of the body.
Cover: In cover, the image keeps its aspect ratio and fills the given dimension.
Contain: In contain, the image is resized to fit the given dimension but the image retains its aspect ratio.

For the components on the page, the background type is automatically a color. The color can be modified by choosing any color from the palette or by choosing a custom color.