HorizontalBar

The HorizontalBar can be used for building all kinds of bars, e.g. a header or footer element.

<HorizontalBar>
  This is a bar
</HorizontalBar>
This is a bar

Setting the borders

By default, a HorizontalBar is visually separated by a lower border. Use the property borderBottom and borderTop to adjust this behaviour.

<React.Fragment>
  <Property
    name="borderBottom"
    value={false}
  />
  <HorizontalBar
    borderBottom={false}
  >
    This bar has no border
  </HorizontalBar>
  <Property
    name="borderTop"
    value={true}
  />
  <HorizontalBar
    borderTop={true}
  >
    This bar has a border top as well as bottom
  </HorizontalBar>
</React.Fragment>

borderBottom: false

This bar has no border

borderTop: true

This bar has a border top as well as bottom

Setting the background

<HorizontalBar
  background="dark"
>
  This is a dark bar
</HorizontalBar>
This is a dark bar

Sizing elements

The children of a HorizontalBar will be rendered from left to right, using only the minimum available horizontal space. By setting the flexGrow style property, you can enable children to occupy all the available horizontal space.

<React.Fragment>
  <HorizontalBar>
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Element with auto width
    </div>
    <div
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Another element with auto width
    </div>
  </HorizontalBar>
  <HorizontalBar>
    <div
      style={
        Object {
          "background": "deeppink",
          "flexGrow": 1,
        }
      }
    >
      Growing element
    </div>
    <div
      style={
        Object {
          "background": "gray",
          "flexGrow": 0,
        }
      }
    >
      Fixed width
    </div>
  </HorizontalBar>
</React.Fragment>
Element with auto width
Another element with auto width
Growing element
Fixed width

Aligning elements

The children of a HorizontalBar will be rendered from left to right. Use the align property, to adjust this behaviour.

<React.Fragment>
  <HorizontalBar
    align="left"
  >
    <div>
      1
    </div>
    <div>
      2
    </div>
  </HorizontalBar>
  <HorizontalBar
    align="center"
  >
    <div>
      1
    </div>
    <div>
      2
    </div>
  </HorizontalBar>
  <HorizontalBar
    align="right"
  >
    <div>
      1
    </div>
    <div>
      2
    </div>
  </HorizontalBar>
  <HorizontalBar
    align="space-between"
  >
    <div>
      1
    </div>
    <div>
      2
    </div>
  </HorizontalBar>
</React.Fragment>
1
2
1
2
1
2
1
2

Adjusting space between items

<React.Fragment>
  <HorizontalBar
    spaceBetweenItems="none"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Element 1
    </div>
    <div
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Element 2
    </div>
  </HorizontalBar>
  <HorizontalBar
    spaceBetweenItems="sm"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Growing element
    </div>
    <div
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Element 2
    </div>
  </HorizontalBar>
  <HorizontalBar
    spaceBetweenItems="md"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Growing element
    </div>
    <div
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Element 2
    </div>
  </HorizontalBar>
  <HorizontalBar
    spaceBetweenItems="lg"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Growing element
    </div>
    <div
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Element 2
    </div>
  </HorizontalBar>
</React.Fragment>
Element 1
Element 2
Growing element
Element 2
Growing element
Element 2
Growing element
Element 2

Adjusting horizontal padding

<React.Fragment>
  <HorizontalBar
    paddingHorizontal="none"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Element 1
    </div>
  </HorizontalBar>
  <HorizontalBar
    paddingHorizontal="sm"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Growing element
    </div>
  </HorizontalBar>
  <HorizontalBar
    paddingHorizontal="md"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Growing element
    </div>
  </HorizontalBar>
</React.Fragment>
Element 1
Growing element
Growing element