Kuika's Layout feature allows you to easily make visual arrangements of elements such as internal spacing, alignment and sizing. When using organizer structures such as Row or Column, the alignment commands given affect not only these structures themselves, but also the layout of all the elements they contain. Thanks to Responsive Layout, you can create designs compatible with different screen sizes.
Custom Style and Layout Styles
You can save the Layout styles you created in the Custom Style section and use them on different screens or elements.
With the Load Style feature you can select a previously saved style, edit, duplicate or delete existing styles.
Layout Features
Padding (Internal Space)
Determines the space between the content of the element and its borders.
You can set Top, Bottom, Right, Left with a specific value.
Note Kuika does not have a Margin property. The space between elements can be adjusted using Padding.
Size
Width: Horizontal size of the element
Height: Vertical dimension of the element
The following units are used for sizing:
PX A fixed value (e.g. 200px)
%: A proportional value (e.g. 20%, adjusted according to browser width)
100%: Allows the element to completely cover the area where it is located.
Max Size
Sets the maximum width and height values that the element can take.
Example: Max Width: 480px value is set to a maximum of 480px according to the browser width.
Min Size
Sets the minimum width and height values by which the element can be minimized.
When used in combination with Min Size, Max Width or Max Height, it ensures that the layout is maintained.
Align
Aligns the element's content or other elements in the container it is in.
Vertical Alignment: Up, centered, down
Horizontal Alignment: Left, center, right
Display (Display Type)
Block Places the element on a line by itself in the container.
Inline: Arranges elements side by side (However, some elements may not support this display type).
Making Layout Settings in Elements
Click on the Element: Select the element you want to edit.
Open the Styling Panel: Open the Styling panel on the right edge.
Padding Settings:
Go to the Padding section in the Layout area.
Set the padding by entering values in the Top, Bottom, Right, Left fields.
Size Settings:
Define the Width and Height values in PX or % units.
Min Size:
Set the minimum size by entering values fo rMin Width and Min Height.
Max Size:
Set the maximum size by entering the Max Width and Max Height values.
Align:
Select Vertical or Horizontal alignment settings.
Display Format:
Specify the position of the element in the container by selecting Block or Inline.
Important Notes
Layout properties may vary depending on the element type.
Some elements support all Layout properties, while others may only support certain properties.
By following these steps, you can organize your elements correctly and achieve a consistent design in your application.
