マークアップページの要素（開閉）

中身の一部を、閲覧者の操作で表示・非表示にする要素。開閉や選んでいるタブは閲覧者ごとの表示の状態で、保存や共有はされません。

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

Tabs

タブで中身を切り替えます。

構造

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

使い方

• 少なくとも 1 つの <Tab> に中身を書きます
• すべてのタブのクエリは、ページと一緒に実行されます。タブを切り替えても再実行されません
• 値を選ぶだけなら、<Select> を使います

属性

属性	値	内容
as	識別子	選んだタブの値（value）を、式で view.<名前> として参照するための名前。同じ名前の要素は、状態を共有します
variant	default / segmented 既定：default	切り替えの見た目。default はタブ、segmented はボタンの並び。モバイル表示では、segmented もドロップダウンになります
height	px（例：320px）	高さ

例

<Tabs>
  <Tab title="売上">
    <Chart id="…" page="…" chart="…" />
  </Tab>
  <Tab title="注文数">
    <Chart id="…" page="…" chart="…" />
  </Tab>
</Tabs>

Tab

<Tabs> の 1 つのタブです。

構造

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

属性

属性	値	内容
title（必須）	文字列 式：文字＋式	タブのタイトル
value	英数字・_・-	このタブを選んだときの view.<名前> の値。同じ <Tabs> の中で重複しない値にします。<Tabs> に as を書いたときは必須です
default	真偽値	最初に選ばれた状態にします。同じ <Tabs> の中で 1 つまで書けます。どのタブにも書かないときは、最初のタブが選ばれます
description	文字列 式：文字＋式	タイトルや枠の横の ? のアイコンで表示する説明。PDF には表示されません
gap	none / xs / sm / md / lg / xl 既定：md	子の間隔

Collapse

その場で中身を開閉します。詳細や定義を載せるときに使います。

構造

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

使い方

• 子孫のクエリは、閉じていてもページと一緒に実行されます。開いても再実行されません

属性

属性	値	内容
title（必須）	文字列 式：文字＋式	見出しの行のタイトル
as	識別子	開いているかどうか（真偽値）を、式で view.<名前> として参照するための名前。同じ名前の要素は、状態を共有します
open	真偽値	最初に開いた状態にします
description	文字列 式：文字＋式	タイトルや枠の横の ? のアイコンで表示する説明。PDF には表示されません
gap	none / xs / sm / md / lg / xl 既定：md	子の間隔
height	px（例：320px）	高さ

例

<Collapse title="指標の定義">
  <Text>解約率は、月初の契約数に対する、月内に解約した契約数の割合。</Text>
</Collapse>