Codatum CLI

Appearance

マークアップページの要素（テキスト） ​

文字を表示する要素。

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

Text ​

文字列を表示します。

構造 ​

項目内容
区分block
親子に block を取る要素
子(inline | text | expr)*
SqlView の子孫可

属性 ​

属性値内容
sizesm / md / lg / xl / 2xl
既定：md		文字の大きさ
weightnormal / bold
既定：normal		文字の太さ
colordefault / muted / danger / warning / success
既定：default
式：単一式		文字の色
alignstart / center / end文字の横方向の配置。未指定時は、<TableCell> の align など、親の配置に従います
textWrapwrap / nowrap
既定：wrap		幅に合わせて折り返すか。nowrap は 1 行で表示し、入りきらない部分を … で省略します。中の <Span> にも効きます

例 ​

html
<Text>売上は前月比 <Span weight="bold" color="success">+8.2%</Span></Text>

Span ​

<Text> の一部の見た目を変えます。

構造 ​

項目内容
区分inline
親Text
子(inline | text | expr)*（Span・Br を除く）
SqlView の子孫可

使い方 ​

  • 見た目を重ねるときは、1 つの <Span> に属性を並べます（<Span code weight="bold">）
  • 子の <Tag>・<Delta> は <Span> の文字の大きさだけを、<Link> は色以外の文字の書式を引き継ぎます。大きな値の横に、小さな増減やラベルを添えるときに使えます

属性 ​

属性値内容
sizesm / md / lg / xl / 2xl
既定：md		文字の大きさ
weightnormal / bold
既定：normal		文字の太さ
colordefault / muted / danger / warning / success
既定：default
式：単一式		文字の色
code真偽値インラインのコードとして表示します
italic真偽値斜体で表示します
strike真偽値取り消し線を引きます
textWrapwrap / nowrap
既定：wrap		幅に合わせて折り返すか。nowrap は、この部分を行の境目で分けません。指定しないときは、親の <Text> の値を引き継ぎます

例 ​

html
<Text size="2xl" weight="bold">1,234<Span size="md" weight="normal"> 件 <Delta value="0.12" format=".1%" /></Span></Text>
<Text>カラム <Span code>customer_id</Span> で結合する</Text>

外部のページへのリンクです。社内の別のツールの画面へ、行の値やパラメータを付けて移動するときなどに使います。リンクは新しいタブで開き、マウスを重ねるとリンク先のホストが表示されます。

構造 ​

項目内容
区分inline
親Text | Span
子(text | expr)+
SqlView の子孫可

使い方 ​

値を入れるときは、URL の中に {{ … }} を書きます。最初の {{ … }} より前に、スキームとホストを文字で書き、続けて /・?・# のいずれかを書きます。

用途書き方
パスに値を入れる<Link href="https://crm.example.com/customers/{{ r.customer_id }}">{{ r.name }}</Link>
クエリに値を入れる<Link href="https://crm.example.com/search?q={{ r.name }}&region={{ param_<ID> }}">検索</Link>
SQL で作った URL<Link href="{{ r.url }}">開く</Link>
  • 文字と混ぜた値は、表の書式を適用する前の値で URL エンコードされます。NULL は空、複数の値は , で連結されます
  • キーを繰り返す（?r=a&r=b）ときや、空のキーを除くときは、SQL で URL を組み立てます
  • 値全体を 1 つの {{ … }} にしたときは、エンコードせずにそのまま使われます
  • 実行時エラーのときや、値が http(s) の URL でないときは、リンクにならず、文字だけが表示されます

属性 ​

属性値内容
href（必須）http・https の URL
式：文字＋式		開く URL

例 ​

html
<Text>詳しくは <Link href="https://wiki.example.com/kpi">KPI の定義</Link> を参照</Text>

Br ​

<Text> の中で、段落を分けずに改行します。

構造 ​

項目内容
区分inline
親Text
子なし（/> で閉じる）
SqlView の子孫可

属性 ​

属性はありません。

例 ​

html
<Text>
  前月比 +12%<Br />
  <Span color="muted">新規の獲得が増えた</Span>
</Text>

Tag ​

状態や区分を、小さなラベルで表示します（「要対応」「VIP」「解約」など）。

構造 ​

項目内容
区分inline
親Text | Span
子(text | expr)+
SqlView の子孫可

使い方 ​

  • 文字は親より少し小さくなります。大きさは、親の <Text> か、<Tag> を包む <Span> の size で変えます
  • 文字が空になったときは、タグを表示しません。行によってラベルがないときも、<If> を書く必要はありません

属性 ​

属性値内容
colordefault / muted / danger / warning / success
既定：default
式：単一式		タグの色。薄い背景に、その色の文字で表示します

例 ​

html
<Text>契約 <Tag color="success">更新済み</Tag></Text>

List ​

箇条書きか、番号付きの一覧を表示します。

構造 ​

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

使い方 ​

  • 点や番号の大きさと色は、<List> の size・color で決まります

属性 ​

属性値内容
ordered真偽値行頭を記号ではなく番号（1. 2. 3.）にします
gapnone / xs / sm / md / lg / xl
既定：xs		項目の間隔
sizesm / md / lg / xl / 2xl
既定：md		文字の大きさ
weightnormal / bold
既定：normal		文字の太さ
colordefault / muted / danger / warning / success
既定：default
式：単一式		文字の色

例 ​

html
<List>
  <ListItem>
    <Text>売上は前月比 +8.2%</Text>
  </ListItem>
  <ListItem>
    <Text>解約は <Span color="danger">増加</Span></Text>
  </ListItem>
</List>

ListItem ​

<List> の 1 項目です。

構造 ​

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

使い方 ​

  • 段落や画像、入れ子の一覧は、<Text> の後ろに続けて置きます。点や番号の右側で縦に並び、間隔は <List> の gap で決まります
  • 入れ子の一覧の番号は、一覧ごとに 1 から振ります

属性 ​

属性はありません。

例 ​

html
<List ordered>
  <ListItem>
    <Text>売上は前月比 +8.2%</Text>
    <Text size="sm" color="muted">主因は東京の新規</Text>
    <List>
      <ListItem>
        <Text>東京が +12%</Text>
      </ListItem>
    </List>
  </ListItem>
</List>

Heading ​

見出しを表示します。見出しはアウトラインに表示され、そこから移動できます。

構造 ​

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

使い方 ​

  • <SqlView> の子孫の見出しは、アウトラインに表示されません

属性 ​

属性値内容
id（SqlView の子孫の外では必須）ObjectId要素の ID（記法の「要素の ID」）。SqlView の子孫では書けません
level（必須）2 / 3 / 4見出しのレベル
description文字列
式：文字＋式		タイトルや枠の横の ? のアイコンで表示する説明。PDF には表示されません

例 ​

html
<Heading id="…" level="2">売上の推移</Heading>

Quote ​

引用を表示します。顧客の声（アンケートの自由記述など）や、定義の引用に使います。

構造 ​

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

属性 ​

属性値内容
gapnone / xs / sm / md / lg / xl
既定：md		子の間隔

例 ​

html
<Quote>
  <Text>導入してから、毎週の集計が 10 分で終わるようになった。</Text>
  <Text size="sm" color="muted">— A 社（NPS 9）</Text>
</Quote>

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

© Codatum Inc.