Containers

Container components are used to wrap components and organize the application layout. This components are o-column and o-row and affect their children’s layout or flow as the direction alon the cross-axis or the main-axis respectively.

This components also apply basic styling

Example

<o-column attr="col" title="This is a column">
    <!-- Children displayed along Y axis -->
</o-column>

<o-row attr="row" title="This is a row">
    <!-- Children displayed along X axis -->
</o-row>

<o-column-collapsible attr="collapsible-col" title="Column" description="This is a collapsible column">
    <!-- Children displayed along Y axis -->
</o-column-collapsible>

<o-row-collapsible attr="collapsible-row" title="Row" description="This is a collapsible row">
    <!-- Children displayed along X axis -->
</o-row-collapsible>

You can interact with different options of this components in the OntimizeWeb playground.

Directive: o-column, o-row

Inputs

Name	Description	Default
attr string	Field identifier. Registry property if component is inside a form.
elevation number	Number indicating elevation according to predefined CSS classes in Angular Material Elevation
icon string	Name of google icon (see Google material design icons)
layout-align string	Layout align value according to flex-layout library see Flex Layout
title string	Container title

* required inputs.

Collapsible containers

Directive: o-column-collapsible, o-row-collapsible

Inputs

Name	Description	Default
attr string	Field identifier. Registry property if component is inside a form.
description string	Container description
elevation number	Number indicating elevation according to predefined CSS classes in Angular Material Elevation
expanded no \| false \| yes \| true	Indicates wether the collapsible container will be expanded or not	yes
icon string	Name of google icon (see Google material design icons)
layout-align string	Layout align value according to flex-layout library see Flex Layout
title string	Container title

* required inputs.