Kuika's Row element is used to place User Interface (UI) elements in a horizontal row. Arranging elements horizontally allows certain content to be placed side by side and helps users compare information quickly. Also, when multiple UI elements are arranged horizontally, spacing and alignments can be easily managed with the Row element. In this tutorial, you will learn how to organize UI elements in a horizontal order using the Row element.

The main function of the Row element is to provide a placeholder for the elements you add to the screen. Thanks to this function, it allows you to make the design organization of the elements you drag and drop on the screen.

Row element has the following functions:

Style and Design: The appearance of each row can be customized with features such as colors, font sizes and backgrounds.
Responsive Design: Row elements can be used to support responsive design of websites and applications.

Row element is supported by web and mobile applications.

This training content consists of the following topics:

Adding a Row element,
Row element properties.
Authorization,
Visibility,
Editability,
Customize the interface design with Style Panel,
Actions.

Add Row Element

After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

In the “UI Design” (1) module, drag and drop the Row element (4) under the “Container” (3) category from the “Elements” (2) panel on the left side to the screen.

You can use the Row element as much as you want on the screen. There is no usage limit.

Row, Horizontal Stack, Vertical Stack, Label, Button, Text Input, Number Input, Icon, Panel, Image, MDViewer, Video Player, Progress Bar, Progress Circle, Badge, Location Search, Email, Text Area, Auto Complete, Select Box, Slider, Range Slider, Check Box, Switch, Date, You can use Date Time, Year Picker, Countdown, Area Chart, Donut Chart, Line Chart, Pie Chart, Bar Chart, Rate, Web View, Signature, Chat, Table, Gallery View, Carausel, Pagination, Flex Grid and google maps elements as Child elements in Row element.‍

Since the Panel element can be added as a Child element in the Row element, you can dynamically change the background. Accordingly, you can add dynamic color and/or image to the background.

‍Header and Footer elements cannot be used as Child elements in the Row element.

Row Element Properties

Row is a horizontal block that can be divided into 24 different columns. By default, it has an adaptive width according to the browser window width. It can have a fixed exact width (1200px) or max width (0-1600px). Row and columns within it can be spaced with padding of different sizes.

In the Properties panel:

Column Customize: You can divide a Row element into 24 different columns. Basically, rows with a lower number of columns such as 1, 2, 3, 4 are used in interface design.some text
- Web: Select the Row element whose columns you want to manage. Under Desktop you can choose one of the predefined column structures. You can create custom column widths and number of columns with Customize.
- Mobile: Select the Row element whose columns you want to manage. You can choose one of the predefined column structures under Mobile. You can prepare custom column widths and numbers with Customize.
- Tablet: Select the Row element whose columns you want to manage. You can choose one of the predefined column structures under Tablet. You can prepare custom column widths and numbers with Customize.

Authorization.

You can customize user access with “Anonymous Access” and “All Roles Access” authorization options on the screens and elements of your application. While “Anonymous Access” enables access without any account information query, “All Roles Access” provides access by verifying user account information.

For element level authorization, you can manage the security and user experience of your application by selecting the relevant element and editing the “Authorization” settings from the Properties panel.

Visibility.

It allows you to adjust the visibility of screens or elements. Visibility in Elements allows you to regulate visibility based on a specific state or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.

Click on the element on the screen.
Open the “Properties” panel on the right side.
Click on the “Visibility” field and make one of the following selections according to the needs of your application. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.

Always Visible: Ensures that the screens in your app are always visible. ‍
Hidden: Allows hiding screens in your application. ‍
Sometimes Visible: Makes screens in your application conditionally visible.

Editability

Allows you to make elements editable.

Enabled: Selecting this option makes the element editable.
Disabled: In this case, the element cannot be edited.
Sometimes Enabled: This option means that the element is sometimes editable and sometimes not, depending on certain conditions.

Customize the İnterface Design with Style Panel

By customizing your elements with the Styling Panel, you can create unique and impressive user interfaces in your web and mobile applications.

The sections defined below vary depending on the element.

Layout‍: Here you can make visual adjustments such as sizing, alignment and padding of elements. These settings also affect the layout of other elements within the element. Properties include Size, Min Size and Align; however, some elements may not support the Display property.
Text: The element's text properties can be edited here through font family, style, color, size, spacing and other options. This section supports all Text related adjustments.
Fill: You can use the Fill setting to customize the element's background with color or images.
Border: You can give your elements a more aesthetic look by adding borders and adjusting the corner radii.
Shadow: You can add a shadow effect to elements used in web applications to give a sense of depth. However, the shadow feature may not be supported as some elements are not suitable for mobile applications.

Actions.

Kuika contains system actions such as Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.

In addition to system actions, you can also use SQL actions that you create yourself.

To add actions to elements, you can use the “+ADD ACTION” button from the Properties panel on the right side.