Dashboard UI Kit

Apps PreviewDownload Design Package

ContainerHorizontal

import { ContainerHorizontal } from '@duik/it'
import ContainerHorizontal from '@duik/container-horizontal'

This container is a simple flexbox container with flex-direction: row. It works in a similar way as a <View /> from react-native component library - it distributes the children elements but in a horizontal direction. 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%. ContainerVertical is it's vertical variant. See a full usage on this page.

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

Prop table

Any props you would pass to div.