Layout Components

Visit the Sample App to see an interactive demo and the actual code!

Sample App + Code

Accordion

Accordion is a component for implementing content that can be opened and closed.

Property	Type	Description
title	string	Titile

<Accordion title="Open me">
  <div>
    <DataTable alias="work_log" />
  </div>
</Accordion>

Alert

Alert is a component for implementing content that you want to visually stand out.

Property	Type	Description
title	string	Titile

<Grid cols="1">
  <Alert title="Default Alert"> Contents goes here </Alert>
  <Alert title="Info Alert" variant="info">
    Contents goes here
  </Alert>
  <Alert title="Destructive Alert" variant="destructive">
    Contents goes here
  </Alert>
  <Alert title="Warning Alert" variant="warning">
    Contents goes here
  </Alert>
</Grid>

Grid

You can easily create responsive grids.

Property	Type	Description
cols	string	Maximum number of columns

<Grid cols="4">
  <Panel>
    <Metrics alias="sp500_average" column="average" label="S&P 500 Average" unit="USD" />
  </Panel>
  <Panel>
    <div style={{ height: '100%', minHeight: '300px' }}>
      <Embed alias="sales_vis" />
    </div>
  </Panel>
</Grid>

Panel

You can create panels that can be enlarged for detailed viewing.

<Grid cols="4">
  <Panel>
    <Metrics alias="sp500_average" column="average" label="S&P 500 Average" unit="USD" />
  </Panel>
  <Panel>
    <div style={{ height: '100%', minHeight: '300px' }}>
      <Embed alias="sales_vis" />
    </div>
  </Panel>
</Grid>

Tabs

Tabs is a component for implementing switching contents by tabs.

<Tabs>
  <Tab title="Tab 1">Content 1</Tab>
  <Tab title="Tab 2">Content 2</Tab>
</Tabs>