Distribution

proportionally sized grid of boxes

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

basis

A fixed or relative size along its container's main axis.

"xxsmall""xsmall""small""medium""large""xlarge""xxlarge""full""1/2""1/3""2/3""1/4""2/4""3/4""auto""string"

children

Function that will be called when each value is rendered.

({ value: 60 }) => {}

fill

Whether the distribution expands to fill all of the available width and height.

truefalse

gap

The amount of spacing between child elements.

"none""xxsmall""xsmall""small""medium""large""xlarge""string"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

values

Array of objects containing a value. The array should already be sorted from largest to smallest value. The caller can put other properties in the object. The children function will be called to render the contents of each value.

[{"value": 60}, {"value": 40}]