Row

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

The “Row” element is used to align other elements (For example:- button, image, icon, etc) horizontally. In a page that contains multiple UI (User Interface) items, the “Row” element proves of high importance to align multiple user interfaces horizontally.

You use multiple row layouts to align user interfaces horizontally. You can view the “Row” element in the following ways:

Virtual Row

When you drag an element next to another element on the canvas, the vDesigner module creates a virtual row around the elements. To view and observe the virtual row, you need to put the mouse pointer close to the element’s edge, and then the virtual row’s layout becomes visible. The layout encloses the elements’ edges and helps you align the elements horizontally.

To view the background of the virtual row, see the vDesigner toolbar and then click the Layout Toggle icon ().

Row

Apart from seeing and using the virtual row, you can use the “Row” element from the element’s category in the vDesigner module. To use the row:

  1. On the vDesigner module, see the left panel.
  1. In the left panel, click the Elements tab, and the Category area displays the list of elements.
  2. Click in the search box and then enter: Row, and the Category area displays the Row element.
  1. Drag the Row element to the canvas.
  2. After you drag the Row element to the canvas, the element appears on the canvas as a real row.

After you drag the Row element to the canvas, you can configure its properties. You can also place other elements in a row. When you drag a row to the canvas, you cannot change its state from Real to Virtual.

Usage

When to Use
Use the “Row” element:
–> When you want to align mulitple elements horizontally in a single page.
–> When you want to neatly group multiple elements in a section or under a specific area.

Row Configuration

The “Row” element has the following property:

  • UI Configuration
  • Event Configuration

UI Configuration

For the “Row” element, you can configure the following properties:

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicTypeThis property provides two options as follows:

–>Virtual:- In case of virtual row, this tab is selected by default.

When you drag the “Row” element to the canvas, the property panel displays the Virtual tab inactive. The inactive Virtual tab means that you cannot convert the row element into a virtual row after you drag it to the canvas.


–> Real:- After you drag the Row element to the canvas, the property panel displays the Real tab selected by default.

In case of a virtual row, if you click the Real tab, the virtual row is converted into a real row. Thus, the Virtual tab becomes inactive, and then you cannot change a row to a virtual row.
NoReal
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesRow_xxxxx
BasicScrollableAfter you click this check box, a scroll bar becomes availble in the row element. The user can move the scroll bar to view different elements in the row.NoClear
BasicEnableIf this check box is selected, the row element becomes active on the screen. You can perform the function on the active element.NoSelected
BasicWrapAfter you click this check box, the row element starts resizing its shape based on the number of elements in the row layout.NoClear
BasicVisibleIf this check box is selected, the row element becomes visible on the screen.NoSelected
UI PropertiesStylesAllows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.NoDefault
UI Properties-BackgroundBackgroundAllows you to configure the element’s background by providing the following options:
–> Color
–> Image
NoColor
UI Properties-BackgroundColorAllows you to configure the background color of the element. To configure the background color:
?> In the Background Color box, click the left color box (), and a color canvas open.
?> On the canvas, on the horizontal bar, move the circle to select the color.
?> In the upper section, move the circle to select the tone of the color.
No#2883F3If “Background” = “Color”
UI Properties-BackgroundImage SourceThis box becomes visible after you click the Image tab. To configure an image as the element’s background, you can use one of the following options:
–> None
–> URL
–> Asset Library
NoNoneIf “Background” = “Image”
UI Properties-BackgroundImage URLThis box becomes visible after you select URL in the Image Source list. In the Image URL box, enter the URL of an image. The application fetches the image from the URL-based location and then displays it as the element’s background.Yes“URL Path”If “Image Source” = “URL”
UI Properties-BackgroundSelect AssetThis box becomes visible after you select Assets Library in the Image Source list. This property allows you to configure an image as the element?s background from the Assets Manager module. To configure the image:
–> Click the asset library icon (), and the Select Asset dialog box opens.
–> In the Select Asset dialog box, select an image and then click Select, and you successfully configure the image as the element’s background.
YesNo File SelectedIf “Image Source” = “Asset Library”
UI Properties-BackgroundElevationAllows you to configure the elevation of the background. The elevation is measured as the relative distance between two surfaces along the Z-axis.No0
UI Properties- Alignment & SpacingPaddingAllows you to desirably define padding around each side of the element. It provides four different boxes to define the padding around the right, left, top, and bottom side of the element.NoTheme Variable (Padding)
UI Properties- Alignment & SpacingMarginAllows you to define a margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom borders of the element.NoTheme Variable (Margin)
UI Properties- Alignment & SpacingVertical AlignmentAllows you to align the child elements vertically in the row layout by providing the following options:
–> Top
–> Bottom
–> Center


In the vertical alignment, the center of the element is aligned with the top and bottom edges of the element.
NoTop
UI Properties- Alignment & SpacingElement AlignmentAllows you to align the element in the following positions:
–> Left
–> Center
–> Right
NoLeft
UI Properties- Alignment & SpacingHorizontal AlignmentAllows you to align the child elements horizontally in the row layout by providing the following options:
–> Left
–> Center
–> Right

–> Space Evenly
–>Space Around
–> Space Between


In the horizontal alignment, the center of the element is aligned with the right and left edges of the element.
NoLeft
UI Properties- Shape & DecorationTypeUnder the Shape and Decoration section, this property has the two following options:

Autofill:- If you select this option, you cannot change the element’s dimensions. When you drag the element to the canvas, this option is selected by default. In the case of autofill, vDesigner places the element with the default dimensions.

Manual:- If you select this option, you can change the dimensions of the element.
NoAutofill
UI Properties- Shape & DecorationWidth ValueEnter the width of the element in the pixel unit or percentage unit.No
UI Properties- Shape & DecorationHeight ValueEnter the height of the element in the pixel unit.No
UI Properties- Shape & DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoCurrent X Co-ordinate
UI Properties- Shape & DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoCurrent Y Co-ordinate
UI Properties- Shape & DecorationBorder RadiusAllows you to define the radius of the element’s corners. Defining the radius of the corner makes the element’s corner round.NoTheme Variable (Border Radius)

Event Configuration

On the “Row” element, you can configure the following events:

  • onClick
Was this article helpful?
YesNo