Windows

import {Window} from 'cx/widgets';

Windows are overlays with headers, footers and special appearance.

<Button onClick={(e, {store}) => { store.set('$page.contact.visible', true)}}>Open</Button>
<Window
    title="Contact"
    visible={{ bind: "$page.contact.visible", defaultValue: false }}
    center
    style={{ width: '500px' }}
    modal
    draggable
    closeOnEscape
>
    <div style={{ padding: "20px" }} layout={{ type: LabelsLeftLayout, mod: 'stretch' }}>
        <TextField label="Name" value-bind="$page.contact.name" style={{ width: '100%' }} tooltip="A Tooltip" />
        <TextField label="Email" value-bind="$page.contact.email" style={{ width: '100%' }} />
        <TextArea label="Message" value-bind="$page.contact.message" rows={10} style={{ width: '100%' }} />
        <DateField label="Date" value-bind="$page.contact.date" />
    </div>
    <div putInto="footer" style={{ float: "right" }} ws>
        <Button mod="primary">Submit</Button>
        <Button
            // this will cause the Window to close
            dismiss
        >
            Cancel
        </Button>
    </div>
</Window>

Copied!Cx Fiddle

Configuration

Property	Description	Type
backdrop	Set to `true` to add a modal backdrop which will dismiss the window when clicked.	boolean
center	Set to `true` to initially place the overlay in the center of the page. This has the same effect as setting both `centerX` and `centerY` to `true`.	boolean
closable	Controls the close button visibility. Defaults to `true`.	boolean
closeOnEscape	Set to `true` to make the window automatically close if the Esc key is pressed on the keyboard. Default value is `false`.	boolean
header	Advanced Window header as a custom Cx component. See example.	object
inline	Set to `true` to force the element to be rendered inline, instead of being appended to the body element. Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content.	boolean
modal	Set to `true` to add a modal backdrop which masks mouse events for the rest of the page.	boolean
title	Text to be displayed in the header.	string
animate	Set to `true` to append the set `animate` state after the initial render. Appended CSS class may be used to add show/hide animations.	boolean
autoFocus	Set to `true` to automatically focus the dropdown when it's shown.	boolean
autoFocusFirstChild	Set to `true` to automatically find and focus the first chinld in the dropdown when it's shown.	boolean
baseClass	Base CSS class to be applied to the field. Defaults to `window`.	string
centerX	Set to `true` to initially place the overlay in the center of the page horizontally.	boolean
centerY	Set to `true` to initially place the overlay in the center of the page vertically.	boolean
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
containerStyle	Style to be applied to the overlay's container element.	string
destroyDelay	Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the `animate` property.	number
dismissOnFocusOut	Set to `true` to dismiss the overlay when it loses focus.	boolean
dismissOnPopState	Set to `true` to dismiss the window if the user presses the back button in the browser.	boolean
draggable	Set to `true` to enable dragging the overlay.	boolean
fixed	Set to `true` to disable moving the window by dragging the header.	boolean
focusable	Set to true to make the top level overlay element focusable.	boolean
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
onMove	A callback function which fires while the overlay is being moved around.	function
onResize	A callback function which fires while the overlay is being resized.	function
outerLayout	Defines the outer layout which wraps the widget.	widget
pad	Set to `true` to add default padding to the window body.	boolean
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
resizable	Set to `true` to enable resizing.	boolean
resizeWidth	resizeWidth	number
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
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
zIndex	zIndex	number

Documentation

Windows