Codatum CLI

Appearance

マークアップページの要素（レイアウト） ​

ページの配置を決める要素。子を縦・横・格子に並べる要素、枠で囲む要素、区切りや余白、表などがあります。

すべての要素に共通するルール（構造の表記、配置の属性、デザイントークン）は、要素一覧を参照してください。

Columns ​

子を横に並べます。折り返さず、子の grow（配置の属性）の比で幅を分けます。

構造 ​

項目内容
区分block
親子に block を取る要素
子block*
SqlView の子孫可

使い方 ​

  • モバイル表示では、子が縦一列に並び、verticalAlign は無視されます

属性 ​

属性値内容
gapnone / xs / sm / md / lg / xl
既定：lg		子の間隔。既定はページの直下と同じ
verticalAlignstart / center / end / stretch
既定：stretch		子の縦方向の配置。stretch は、高さを最も高い子にそろえます
paddingnone / xs / sm / md / lg / xl
既定：none		内側の余白
backgrounddefault / none / muted / success / warning / danger
既定：default
式：単一式		背景色
bordernone / default / strong
既定：none		枠線
radiusnone / md / lg
既定：none		角丸
heightpx（例：320px）高さ

例 ​

html
<Columns verticalAlign="center">
  <Heading id="…" level="2">推移</Heading>
  <Parameter param="…" scope="NOTEBOOK" variant="segmented" autoRun hideFrame grow="0" />
</Columns>

Rows ​

子を縦に並べます。height を書くと、子の grow（配置の属性）の比で高さを分けます。

構造 ​

項目内容
区分block
親子に block を取る要素
子block*
SqlView の子孫可

属性 ​

属性値内容
gapnone / xs / sm / md / lg / xl
既定：lg		子の間隔。既定はページの直下と同じ
paddingnone / xs / sm / md / lg / xl
既定：none		内側の余白
backgrounddefault / none / muted / success / warning / danger
既定：default
式：単一式		背景色
bordernone / default / strong
既定：none		枠線
radiusnone / md / lg
既定：none		角丸
heightpx（例：320px）高さ

Grid ​

子を格子に並べます。子は、書いた順に左上から詰めて配置されます。大きさは、子の colSpan・rowSpan（配置の属性）で指定します。

構造 ​

項目内容
区分block
親子に block を取る要素
子block*
SqlView の子孫可

使い方 ​

  • 12 列を基本にすると分けやすくなります
  • 行の高さは、その行で最も高い子に合わせます

属性 ​

属性値内容
cols（必須）整数（1〜60）列の数
gapnone / xs / sm / md / lg / xl
既定：lg		子の間隔。既定はページの直下と同じ
paddingnone / xs / sm / md / lg / xl
既定：none		内側の余白
backgrounddefault / none / muted / success / warning / danger
既定：default
式：単一式		背景色
bordernone / default / strong
既定：none		枠線
radiusnone / md / lg
既定：none		角丸
heightpx（例：320px）高さ

例 ​

html
<Grid cols="12">
  <Card title="売上" colSpan="4"><Text size="2xl" weight="bold">1.2億</Text></Card>
  <Card title="注文数" colSpan="4"><Text size="2xl" weight="bold">3,456</Text></Card>
  <Card title="解約率" colSpan="4"><Text size="2xl" weight="bold">1.8%</Text></Card>
</Grid>

Card ​

枠付きのまとまりです。background の default は、カードの背景色になります。

構造 ​

項目内容
区分block
親子に block を取る要素
子block*
SqlView の子孫可

属性 ​

属性値内容
title文字列
式：文字＋式		タイトル
description文字列
式：文字＋式		タイトルや枠の横の ? のアイコンで表示する説明。PDF には表示されません
gapnone / xs / sm / md / lg / xl
既定：md		子の間隔
paddingnone / xs / sm / md / lg / xl
既定：lg		内側の余白
backgrounddefault / none / muted / success / warning / danger
既定：default
式：単一式		背景色
bordernone / default / strong
既定：default		枠線
radiusnone / md / lg
既定：md		角丸
heightpx（例：320px）高さ

例 ​

html
<Card title="売上" description="税抜">
  <Text size="2xl" weight="bold">1.2億円</Text>
</Card>

Spacer ​

空きを作ります。

構造 ​

項目内容
区分block
親子に block を取る要素
子なし（/> で閉じる）
SqlView の子孫可

属性 ​

属性値内容
heightpx（例：320px）
既定：60px		高さ

Callout ​

定義、注意、データの欠損などを、本文と区別して示す注記です。

構造 ​

項目内容
区分block
親子に block を取る要素
子block*
SqlView の子孫可

属性 ​

属性値内容
title文字列
式：文字＋式		子の上に太字で表示するタイトル
colorinfo / success / warning / danger
既定：info
式：単一式		注記の色。変わるのはアイコンとその色だけで、背景は同じです
icon文字列（16 文字まで）色で決まるアイコンの代わりに表示する絵文字
gapnone / xs / sm / md / lg / xl
既定：md		子の間隔

例 ​

html
<Callout color="warning" title="データの遅れ">
  <Text>10/1 以降の注文は、集計に反映されていない。</Text>
</Callout>

Divider ​

上下の要素を区切る横線を引きます。

構造 ​

項目内容
区分block
親子に block を取る要素
子なし（/> で閉じる）
SqlView の子孫可

使い方 ​

  • <Columns> の子に置いても、縦の線にはなりません

属性 ​

属性はありません。

Table ​

セルに要素を置ける表です。見た目を整えた順位表や、指標の一覧に使います。

構造 ​

項目内容
区分block
親子に block を取る要素
子(TableRow | control)+
SqlView の子孫可

使い方 ​

  • どの行も、列の数（<TableCell> の colSpan の合計）をそろえます
  • 列の幅は、最初の行のセルの width で決まります。width のない列は、中身に合わせて残りの幅を分け合います
  • 幅に収まらないときは、表の中で横にスクロールします
  • 行が多いと表示が重くなります。<For> の limit で絞るか、<SqlResult> を使います
  • 並べ替えや絞り込みの機能はありません

属性 ​

属性値内容
maxHeightpx（例：320px）高さの上限。超えると表の中でスクロールし、見出しの行は固定されます。PDF でも、はみ出た行は出力されません

例 ​

html
<SqlView id="…" page="…" sql="…">
  <Table>
    <TableRow header>
      <TableCell width="160px"><Text>担当</Text></TableCell>
      <TableCell align="end"><Text>売上</Text></TableCell>
    </TableRow>
    <For as="r" limit="10">
      <TableRow>
        <TableCell><Text>{{ r.name }}</Text></TableCell>
        <TableCell align="end"><Text>{{ r.amount }}</Text></TableCell>
      </TableRow>
    </For>
    <Else>
      <TableRow>
        <TableCell colSpan="2"><Text color="muted">該当なし</Text></TableCell>
      </TableRow>
    </Else>
  </Table>
</SqlView>

TableRow ​

<Table> の 1 行です。

構造 ​

項目内容
区分―
親Table
子TableCell+
SqlView の子孫可

使い方 ​

  • 行の中で出し分けるときは、<TableCell> の中に <If> を書きます
  • <TableCell> にも background を書くと、行の塗りの上にセルの塗りを重ねます

属性 ​

属性値内容
header真偽値セルを列の見出しとして表示します。<Table> の最初の行にだけ書けます（<If>・<For> の子の行には書けません）
backgrounddefault / none / muted / success / warning / danger
既定：default
式：単一式		行の背景色

例 ​

html
<SqlView id="…" page="…" sql="…">
  <Table>
    <For as="r">
      <TableRow background="{{ r.risk == 'high' ? 'danger' : 'default' }}">
        <TableCell><Text>{{ r.customer }}</Text></TableCell>
        <TableCell><Text>{{ r.risk }}</Text></TableCell>
      </TableRow>
    </For>
  </Table>
</SqlView>

TableCell ​

<TableRow> の 1 セルです。

構造 ​

項目内容
区分―
親TableRow
子block*
SqlView の子孫可

属性 ​

属性値内容
alignstart / center / end
既定：start		セルの中の文字の横方向の配置。子孫の <Text> の align が優先されます
widthpx（例：320px）列の幅。最初の行のセルにだけ書けます。colSpan を書いたセルでは、またぐ列全体の幅になります
colSpan整数（1 以上）
既定：1		セルがまたぐ列の数。<For> の後の <Else> の行や、合計の行などに使います
gapnone / xs / sm / md / lg / xl
既定：xs		子の間隔
backgrounddefault / none / muted / success / warning / danger
既定：default
式：単一式		背景色

Codatum CLI AIエージェントのための分析環境

© Codatum Inc.