マークアップページの要素一覧

マークアップページで書ける要素の一覧と、すべての要素に共通するルールを説明します。コードの書き方は記法を、式で使える関数と書式は式を参照してください。

一覧

要素ごとの説明は、種類ごとのページにあります。

種類	要素	内容	区分
制御	If	条件による出し分け	control
	ElseIf	前の条件が偽のときの、次の条件	control
	Else	どの条件も満たさないときの中身	control
	For	結果の行ごとの繰り返し	control
データ	Chart	ドキュメントページのチャート	block
	SqlResult	SQL ブロックの実行結果の表	block
	SqlView	SQL ブロックの実行結果を、子孫の要素で表示する枠	block
設定	CrossFilter	クロスフィルタの設定	―
	CrossFilterColumn	表の列の同期の設定	―
	ParameterOverride	パラメータの値の上書き	―
値	Delta	増減を記号と色で示す値	inline
	Progress	値と上限の比を示す横棒	block
入力	Parameter	パラメータの入力	block
	Select	表示の状態の値の選択	block
	SelectOption	Select の 1 つの選択肢	―
	Switch	表示の状態のオン・オフ	block
レイアウト	Columns	子の横並び	block
	Rows	子の縦並び	block
	Grid	子の格子状の並び	block
	Card	枠付きのまとまり	block
	Spacer	空き	block
	Callout	アイコン付きの注記	block
	Divider	区切りの横線	block
	Table	要素を置ける表	block
	TableRow	表の 1 行	―
	TableCell	表の 1 セル	―
開閉	Tabs	タブによる切り替え	block
	Tab	1 つのタブ	―
	Collapse	その場で開閉する領域	block
テキスト	Text	文字列	block
	Span	文の一部の書式	inline
	Link	外部のページへのリンク	inline
	Br	文の中の改行	inline
	Tag	状態や区分を示す小さなラベル	inline
	List	箇条書き・番号付きの一覧	block
	ListItem	一覧の 1 項目	―
	Heading	見出し	block
	Quote	引用	block
図	Tree	指標を分解した木（KPI ツリー）	block
	TreeNode	木の 1 つのノード	―
	TreeEdge	親のノードからの線のラベル	―
	Flow	段階を矢印でつないだ図	block
	FlowStep	Flow の 1 つの段階	―
	FlowEdge	前の段階からの矢印のラベル	―
	Timeline	出来事を縦の線に並べた年表	block
	TimelineItem	年表の 1 つの出来事	―
	Matrix	2 つの軸で分けたマトリクス	block
	MatrixCell	マトリクスの 1 マス	―
メディア	Image	アップロードした画像	block

共通ルール

構造の表記

要素のページの区分・親・子の欄は、次の記法で表します。

記法	意味
block など	その区分（記法の「構造上の区分」）
―	専用の子要素（区分の欄）
TreeEdge などの要素名	その要素
X	1 個
X?	0 個か 1 個
X*	0 個以上
X+	1 個以上
(X | Y)	X か Y。*・+ を付けると、混ぜて書ける
X Y	X の後に Y を書く

「親と同じ」は、親の直下に書いたものとして、親の子のルールで検査されることを表します。ページの直下は、子に block を取る要素と同じように扱われます。

構造の表の「SqlView の子孫」は、<SqlView> の中に書けるかを表します。「可」はどこにでも書けます。「子孫のみ」は <SqlView> の中にだけ、「直下のみ」は <SqlView> の直下にだけ書けます。「不可」は <SqlView> の中には書けません。

値の形式

属性の表は、次のように読みます。

• 属性の欄の「（必須）」は、必ず書く属性を表します
• 値の欄の「既定」は、書かなかったときの値です
• 値の欄の「式」は、式を書けることと、その書き方（単一式か文字＋式）を表します（記法の「書ける場所」）。値の欄が「式（…）」の属性は、値全体を単一式で書きます

値の欄では、次の形式を名前だけで表します。

形式	書ける値
ObjectId	16 進数 24 文字（6adfc86a4399ba326172de94 など）
識別子	英字で始まり、英数字と _ だけからなる値（r・tier など）。予約語（row・rows・view・params・env・true・false・null・in・as・break・const・continue・else・for・function・if・import・let・loop・package・namespace・return・var・void・while・size）と、param_ で始まる値は使えません

文字の書式

文字の書式（size・weight・color）は、指定しないときは親（<List> → <Text> → <Span>）の値を引き継ぎ、子で上書きできます。親の値を打ち消すときは、既定の値を書きます（weight="normal"）。属性の表の既定は、引き継ぐ親がないときの値です。size は親の大きさによらず、同じ値なら同じ大きさになります。

文字の折り返し

文字を折り返すかどうかは、要素の中での文字の役割で決まります。

役割	要素	振る舞い
文章	Text・Heading・List・Quote、Card・Callout・Collapse・MatrixCell・TimelineItem などの title	幅に合わせて折り返します。単語や数値は、1 行に入りきらないときだけ途中で折り返します
値	Delta、Progress の値	折り返しません
ラベル	Tag、枠のタイトル（Chart・SqlResult・SqlView・Image）	1 行に収め、入りきらない部分は … で省略します。ポインタを重ねると、全文を表示します

図の線や軸のラベル（TreeEdge・FlowEdge など）の折り返しは、要素ごとに決まっています。各要素の説明を参照してください。

Text に書いた数値も文章として扱い、幅が足りなければ折り返します。折り返したくないときは、textWrap="nowrap" を書きます。

• <Text textWrap="nowrap">：1 行で表示し、入りきらない部分は … で省略します。KPI の大きな数値、日付、ID などに使います。表のセルでは省略せず、列が広がって、表は横にスクロールします
• <Span textWrap="nowrap">：その部分を行の境目で分けません。数値と単位など、分けたくない短い塊に使います（<Span textWrap="nowrap">1,234 件</Span>）

<Text> に書いた値は中の <Span> が引き継ぎ、<Span textWrap="wrap"> で戻せます。<Br /> は、nowrap の中でも改行します。

配置の属性

子を並べる要素では、その子要素に次の属性を書いて、大きさを指定できます。有効な属性は親によって異なります。有効でない親の子に書くと、検査でエラーになります。

属性	値	内容
grow	整数（0 以上） 既定：1	兄弟のあいだで大きさを分け合う比。<Columns> の子と、height を書いた <Rows> の子で有効です。0 は中身の大きさのまま（<Heading> の横に置く segmented の <Parameter> など）
colSpan	整数（1〜60） 既定：1	またぐ列の数。<Grid> の子で有効です
rowSpan	整数（1〜60） 既定：1	またぐ行の数。<Grid> の子で有効です

デザイントークン

見た目を決める属性の多くは、次のトークンから値を選びます。色や大きさは直接指定できません。要素によっては、ほかの値も書けます（Callout の color の info など）。書ける値は、各要素の属性の表を参照してください。

種類	値	内容
文字の大きさ （size）	sm / md / lg / xl / 2xl	md が本文の大きさで、ノートブックのテーマの文字サイズに合わせて変わります。テーマの文字サイズが既定（12px）のときは、sm から順に 12・14・16・32・40px です。xl 以上は KPI のような大きな数値に使い、見出しより大きく、行の高さを詰めます
文字の太さ （weight）	normal / bold	normal は標準、bold は太字
色 （color）	default / muted / danger / warning / success	danger・warning・success は、KPI チャートの比較と同じく、ノートブックのカラーパレットの色です。既定のパレットでは success は青で、緑にしたいときはパレットで変えます
余白 （gap・padding）	none / xs / sm / md / lg / xl	余白の大きさ。none から順に 0・4・8・12・16・24px です
背景色 （background）	default / none / muted / success / warning / danger	muted は薄い灰色、success・warning・danger はノートブックのカラーパレットの色を薄くした色です
枠線 （border）	none / default / strong	default は細い線、strong は濃い線
角丸 （radius）	none / md / lg	md・lg の順に丸くなります