Visit the Sample App to see an interactive demo and the actual 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>
