サンプルアプリから、実際のコードとインタラクティブなプレビューを確認できます。

サンプルアプリ + コード

​
Accordion

開閉可能なコンテンツを作成できます。

プロパティ型説明
titlestringタイトル
<Accordion title="Open me">
  <div>
    <DataTable alias="work_log" />
  </div>
</Accordion>

​
Alert

視覚的に目立たせたいコンテンツを作成できます。

プロパティ型説明
titlestringタイトル
<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

レスポンシブなグリッドを簡単に作成できます。

プロパティ型説明
colsstringカラムの最大数
<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

拡大表示可能なパネルを作成できます。

<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>
  <Tab title="Tab 1">Content 1</Tab>
  <Tab title="Tab 2">Content 2</Tab>
</Tabs>
MDXのセットアップカスタムコンポーネント