Container

• A container is a flexbox with one dimentional layout which is used to arrange items horizontally or vertically.
• The position of the items within the container can be customized based on the props provided.
• It can also be used to style the child components check customizing components in the docs for more info.

Import

import { Container } from '@zeal-ui/core';

Usage

Container row

<Container width="15rem" height="5rem" type="row" rowEven colCenter withBorder>
    <Button>Item 1</Button>
    <Button>Item 2</Button>
    <Button>Item 3</Button>
</Container>;

Container column

<Container width="5rem" height="15rem" type="col" rowCenter colEven withBorder>
    <Button>Item 1</Button>
    <Button>Item 2</Button>
    <Button>Item 3</Button>
</Container>;

Container as a paragraph tag

<Container styledAs="p">
    This is a container rendered as a paragraph tag. Inspect to view the tag name.
</Container>;

Props

styledAs

Description

It is used to render the container as the given html tag.

Values

Valid html tag name.

width

Description

It is used to set the width of the container.

Values

String with valid width.

height

Description

It is used to set the height of the container.

Values

String with valid height.

type

Description

It is used to set the type of the container.

Values

row | row-reverse | col | col-reverse

rowStart | rowEnd | rowCenter | rowBetween | rowAround | rowEven

Description

It is used to set the position of the container row wise.

Values

Boolean value.

colStart | colEnd | colCenter | colBetween | colAround | colEven

Description

It is used to set the position of the container column wise.

Values

Boolean value.

withBorder

Description

It is used to add a border to the container.

Values

Boolean value.

scrollAuto

Description

It is used to add a scrollbar on x or y axis or both if the contents of the contianer overflows.

Values

Boolean value.

Note

To learn about customizing the components check this section of the docs.