-
Notifications
You must be signed in to change notification settings - Fork 17
WRow
WRow is a component for laying out a set of columns. It is merely a container for those columns. The WColumn components of a WRow may be adjusted within an application dependent upon the current UI needs. This makes WRow somewhat more flexible than a ColumnLayout of WPanel.
Columns within a WRow may have their relative width and content alignment set. See the documentation of WColumn for more detail.
- Why use WRow
- Creating WRow
- Spacing rows and columns
- Responsive design
- Related components
- Further information
WRow represents a single row which may contain a mutable number of columns. It is useful for creating some layouts but is more restrictive than a completely custom layout (as are all WComponents layouts). WRow (or a number of concurrent WRows) should be used when the columns in the row may be individually hidden, added or removed or have their size or alignment changed based on user actions. If the UI segment being constructed has more than one row containing a set of equivalent columns which do not change based on user context then a WPanel with ColumnLayout may be more appropriate.
WRow has two constructors, the default constructor creates a row with no space between columns. The alternate takes a Size argument which is used as the basis of the space between columns.
WRow gaplessRow = new WRow();
// separate columns using Size:
WRow rowWithGaps = new WRow(Size.MEDIUM);Columns are added to WRow using WColumn.
// With WRow row and WColumn column:
row.add(column);Columns may be removed from a WRow. This is different from ColumnLayout in which the number of columns is immutable.
// With WRow row and WColumn column:
row.remove(column);WRow is a marginable component. Margin may, therefore, be used to separate sibling rows. In many circumstances it's may be more appropriate to set a default space between sibling WRows in a theme or as custom CSS.
There is no default space applied between columns in a WRow. WColumns may be separated using the gap property which may only be specified on instantiation of a WRow using the constructor new WRow(Size).
// Given Size GAP:
WRow rowWithGaps = new WRow(GAP);For more information regarding the application of the Size enum to gaps see Theme intra component spacing.
WRow and WColumn are used to create a row with columns. This may result in sub-optimal rendering on small screens. There are two ways to overcome this.
For simple scenarios the in-built responsive design opt-in may be used. In this case all columns will become individual rows and will fill the viewport if the view becomes less than a given size (determined to be the exposed pixel width of a large mobile phone). To invoke this use the setHtmlClass(HtmlClassProperties) method:
// given WRow row
row.setHtmlClass(HtmlClassProperties.RESPOND);Customising the responsive design for one's particular interface will almost always give best results. This can be achieved by writing custom CSS and giving the WRow and each of its WColumns a custom HTML class name value or fixed id. For more information see Adding custom CSS.