Dashboard UI Kit

Apps PreviewDownload Design Package

ContainerVertical

import { ContainerVertical } from '@duik/it'
import ContainerVertical from '@duik/container-vertical'

This container is a simple flexbox container with flex-direction: column. It works in a similar way as a <View /> from react-native component library - it distributes the children elements verticaly. The primary intention of this component is to build a layout for your application with a very simple set of CSS properties. It automaticaly tries to set its height to 100%. ContainerHorizontal is it's horizontal variant. See a full usage on this page.

<div
  style={{
    height: 300
  }}
>
  <ContainerVertical>
    <div
      style={{
        background: 'red',
        flexGrow: 1
      }}
    />
    <div
      style={{
        background: 'blue',
        flexGrow: 1
      }}
    />
  </ContainerVertical>
</div>
ReactHTML Snippet

Prop table

Any props you would pass to div.