Container

A Container can be used to position a single child component on a horizontal and vertical axis. The most common use case this component is to center a child both horizontally and vertically which is the default option.

<Container
  style={
    Object {
      "height": "100%",
    }
  }
>
  <div
    style={
      Object {
        "background": "deeppink",
      }
    }
  >
    Centered child.
  </div>
</Container>
Centered child.

Setting vertical and horizontal

The position of the child can be controlled using vertical and horizontal.

<React.Fragment>
  <ControlGroup>
    <ControlGroupItem
      label="vertical"
    >
      <Dropdown
        onChange={[Function onChange]}
        options={
          Array [
            Object {
              "label": "top",
              "value": "top",
            },
            Object {
              "label": "center",
              "value": "center",
            },
            Object {
              "label": "bottom",
              "value": "bottom",
            },
            Object {
              "label": "stretch",
              "value": "stretch",
            },
          ]
        }
        value="center"
      />
    </ControlGroupItem>
    <ControlGroupItem
      label="horizontal"
    >
      <Dropdown
        onChange={[Function onChange]}
        options={
          Array [
            Object {
              "label": "left",
              "value": "left",
            },
            Object {
              "label": "center",
              "value": "center",
            },
            Object {
              "label": "right",
              "value": "right",
            },
            Object {
              "label": "stretch",
              "value": "stretch",
            },
          ]
        }
        value="center"
      />
    </ControlGroupItem>
  </ControlGroup>
  <Container
    background="dark"
    horizontal="center"
    style={
      Object {
        "height": 100,
      }
    }
    vertical="center"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      I'm a child with vertical set to 
      center
       and horizontal set to 
      center
      .
    </div>
  </Container>
</React.Fragment>
I'm a child with vertical set to center and horizontal set to center.

Setting the background color

<React.Fragment>
  <Container
    background="dark"
    style={
      Object {
        "height": 100,
      }
    }
  >
    <div>
      Child on dark background.
    </div>
  </Container>
  <Container
    background="light"
    style={
      Object {
        "height": 100,
      }
    }
  >
    <div>
      Child on light background.
    </div>
  </Container>
  <Container
    background="none"
    style={
      Object {
        "height": 100,
      }
    }
  >
    <div>
      Child on a transparent background.
    </div>
  </Container>
</React.Fragment>
Child on dark background.
Child on light background.
Child on a transparent background.

Making a Container scrollable

<Container
  background="dark"
  isScrollable={true}
  style={
    Object {
      "height": 200,
    }
  }
>
  <div
    style={
      Object {
        "background": "deeppink",
        "width": 400,
      }
    }
  >
    I am very large so my parent is scrollable.
    <div
      style={
        Object {
          "height": 400,
        }
      }
    />
    This is the end.
  </div>
</Container>
I am very large so my parent is scrollable.
This is the end.