PureContainer

import {PureContainer} from 'cx/widgets';

The PureContainer component provides a place to control layout or visibility for all of its children. The component itself doesn't render any markup and therefore doesn't have any visual attributes.

The PureContainer class is commonly used as a base class for other widgets such as:

ValidationGroup - form validation
Repeater - repeatable content
Route - visible only if current URL matches the specified route (template)

Text
Number
	Please correct the errors.

PureContainer

<ValidationGroup layout={LabelsLeftLayout} invalid-bind="$page.invalid">
   <TextField label="Text" value-bind="$page.text" required />
   <NumberField label="Number" value-bind="$page.number" required minValue={10} />
   <Text value="Please correct the errors." visible-bind="$page.invalid" />
</ValidationGroup>

Copied!Cx Fiddle

In the example above, the ValidationGroup widget is used to arrange elements into a horizontal form layout and to track if all fields are in a valid state.

Configuration

Property	Description	Type
items children	List of child elements.	array
layout	Define an inner layout.	string/object
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

PureContainer