Row

Take a look at the functionality of the Row element!

The Row element is typically used to organize data or content in a row or line format. It is commonly used in table-like layouts or list formats.

A Row is a horizontal block that can be divided into 24 different columns. It has a width that is adaptable to the width of the browser window by default. It can have a fixed width (e.g., 1200px) or a maximum width value ranging from 0 to 1600px. Padding of various sizes can be added to the Row and its columns. It acts as a Container element for all elements.

The Row element is integrated with Columns within it and cannot be used separately. Each Row can have a minimum of 1 and a maximum of 24 Columns.

The Row element comes with all elements except Header and Footer.

The primary function of the Row element is to provide a placeholder structure for elements you add to the screen.

This function allows you to organize the design of elements you drag and drop onto the screen.

  1. Style and Design: The appearance of each row can be customized with features like colors, font sizes, and backgrounds.

  2. Responsiveness: Row elements can be used to support responsive design in websites and applications, meaning they adapt to different screen sizes and device types.

You can use the Row element in the web or mobile applications you develop.

Adding Row

Adding a Row element to your application is quite easy. To add a Row element, follow these steps:

  1. In the UI Design view, open the Elements panel on the left side.

  2. In the Elements panel, select Row from the Container category.

  3. Drag and drop the Row element onto the screen.

  4. You can customize the Row element using the Properties panel.

You can use as many Row elements as you want within the screen. There is no limit to their use.

You can use 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, 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 to the Row element as a Child element, you can change the background dynamically. In this direction, 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.

When you select the Row element, in the Properties panel, you can set the behavior of the columns in the Row for desktop, phone, and tablet, and view Authorization and Visibility parameters.

These parameter fields allow you to edit special authorization settings and visibility preferences related to the Row element.

Column Customize

You can divide a Row element into 24 different columns. In basic interface design, Rows with a lower number of columns, such as 1, 2, 3, 4, are used.

Select the Row element whose columns you want to manage. You can select one of the predefined column structures under the Properties panel desktop. With Customize, you can prepare custom column widths and number.

You can adjust the sorting order of the columns on tablets and phones. Row, which is displayed in 2 columns on the tablet, can be sorted as a single column on the phone.

You can align the columns in the row.

You can use authorization options for the Row element.

Click here for a detailed examination of adding Authorization processes in elements.

Click here for a detailed examination of Authorization processes based on user roles or screen roles.

Visibility in elements is a feature used to control its visibility or accessibility in certain situations. This feature is often used in application design or functionality.

You can use visibility options to make the Row element always visible, hidden, or visible/hidden depending on a condition.

Click here for detailed information about adding Visibility to elements.

The visibility of the Row will be adjusted according to your selections.

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

In addition to system actions, you can use your own SQL actions.

You can add actions to the Row element with +Add Action

You can customize the Row element with the Styling panel.

You can make different style adjustments by selecting Row and its Columns separately.

You can make additional adjustments to the Row element by adding Layout, Text, Border, Fill, or Shadow.

You can make visual adjustments such as outer spacings and sizing. Alignment commands given for the parent element, either Row or Columns, will affect the child elements underneath.

Size, Align, and Display settings cannot be made in the Row element. Layout settings can change with the element added inside the Row.

Click here for detailed information about Layout settings in Row and elements added to the Row.

You can add color or image to the background of the Row element with Fill.

Click here for detailed information about adding Fill to elements.

You can add borders to the outer edges of the Row and give radius.

Click to get detailed information about adding Borders to elements.

In web applications, you can add a shadow effect to the Row element with Shadow. In mobile applications, Shadow is not displayed; therefore, it is not added.

Click here for detailed information about adding Shadow to the Row element.

Last updated