View container

Renders a container that can contain a single view. When navigation events occur, the container that has the identifier passed in the navigation options intercepts the event and displays the requested view.

Node name : view-container

Attribute

Attribute	Type	Required	Default value	Description
container-id	string	true		Container identifier
protect-unsaved-changes	boolean	false	false	Ask for confirmation (the same Closing/HasChanges check a tab close already triggers) before replacing the displayed view, instead of silently discarding unsaved changes
content-max-width	integer	false		Maximum width in pixels of the displayed view, which is centered. The scrollbar stays at the edge of the container
content-padding	string	false		Padding of the area that scrolls the displayed view, with the same values as the layout:padding directive (1 to 4 space values). The scrollbar stays at the edge of the container

Example

<view-container container-id="Container1" />

<view-container container-id="MainView" protect-unsaved-changes="true" />

<view-container container-id="MainView" content-max-width="1180" />

<view-container container-id="MainView" content-max-width="1180" content-padding="medium" />

Note

A container identifier only needs to be unique within its view. When the same view is open in several tabs, each tab has its own container: a navigation to the identifier opens the view in the container of the view that navigates, or of the view displaying it. A navigation that does not come from a view holding such a container, like a browser back, opens the view in the first container with this identifier.

Warning

Directives can't be used on a view-container node because this component is only intended for abstraction and not for display.

Note

protect-unsaved-changes defaults to false so that every view-container already in use keeps its current "replace silently" behavior. Set it to true explicitly on any container that can display an editable view.

Note

content-max-width limits and centers the displayed view inside the container, without reducing the width of the wrapper that scrolls it: the vertical scrollbar stays at the edge of the container instead of the edge of the limited content. Prefer it over a layout:max-width directive placed on the container or one of its ancestors, which also narrows the scrolling area. It also applies to views coming from a referenced module that cannot be modified.

Note

The scrollbar stays at the edge of the container only when the wrapper generated by the framework does the scrolling. If the root element of a displayed view declares layout:height="fill", that element scrolls its own content (the fill height applies overflow-y: auto), so its scrollbar remains at the edge of the limited content. To keep the scrollbar at the edge of the container, do not declare layout:height="fill" on the root element of the view.

Note

Unlike a padding set on the view-container itself, content-padding is applied inside the area that scrolls the view, so the scrollbar stays at the edge of the container. It can be used without content-max-width, for instance to keep a margin around the views on a narrow window.

Note

view-container displays a single view. If that view opens child frames inside itself (nested tabs or stacked frames), they are rendered inside the margin of content-padding: when one of them scrolls, its scrollbar stays at the inner edge of the margin instead of the edge of the container.