Layout
Add Layouts to Elements.
You can adjust the element's properties, such as peripheral spacing and sizing, via the Layout. Alignment commands for Rows or Columns affect the elements inside them.
By saving the Layout style you created in the Custom Style section, you can use the style you saved via Load Style on different screens or different elements on the same screen. You can edit, duplicate, and delete the Layout styles you create at any time.
Padding
You can add interior spaces to your element. Thanks to the top, bottom, right and left options in this area, you can strengthen your design by entering the values you specify in the direction you need the element you use.
In UI (User Interface) design, Margin determines the space or distance around an element (for example, a button, label). In Kuika, there is no Margin setting. However, you can easily create the spacing structure between elements or objects without using Margin by using the Padding structure.
Size
You can use the witdh and height fields when editing the sizing of the elements you add.
You can set the values you will use according to the pixel (px) and % options. It applies exactly to the dimensions you entered with the PX unit. For example, 200px width will look the same on all devices. However, the 20% value resizes itself based on the screen width (browser). You can use 100% for the elements you want to appear exactly according to the browser width or height.
Max Size
These are the fields where you can enter the maximum width/height value that the elements can take. When you enter a maximum width of 480px in a Image element (taking into account the padding values), it will be at most 480px wide according to the device or browser width, and the width will be narrowed at lower widths.
Min Size
Min size (Minimum Size) is a feature that specifies the smallest width or height value that an element can take. This property indicates the minimum size to which the element can be reduced. Similar to max width or max height, min size is typically used to control the dimensions of an element and maintain a specific layout.
Align
You can adjust the alignment of the element's own content (label of the button element) or the child element in the container elements. You can adjust it vertically up, down or centered, as well as horizontally centered, right or left aligned as you wish.
Display
Elements you add in the same column (if there is no default setting) are added side by side. You can use the block option if you want an element to remain on its own in the container it is in.
In Inline, on the other hand, it is possible to arrange the elements standing one after the other so that they are side by side. You cannot add certain elements side by side.
Setting Layout Properties for Elements:
You can make visual adjustments to elements using the Layout, such as padding (Padding) and sizing (Size).
To set the padding and sizing of elements, follow these steps:
Click on the element on the screen to select it.
Open the Styling panel.
To set the padding, enter a value in the Padding section of the Layout.
To adjust the size, input a value in the Size section and choose units in px or %.
To set the minimum width/height that an element can take, input values in Min Size and choose units in px or %.
To set the maximum width/height that an element can take, input values in Max Size and choose units in px or %.
Using Align in the Layout, you can determine the alignment of the element by selecting one of the Align options.
With Display in the Layout, if you want an element in a Container to be displayed in a single line, one below the other, you can choose the block option; if you want the elements to appear side by side, you can select the inline option.
The features in Layout vary according to the elements. While some elements can use all the features in Layout, some elements have limited features.
Last updated
