hatake

表示

項目の並べ方を変える ​

1行あたり何項目並べるか。table の columns とは別物。

layout.columns は「1行に何項目並べるか」。既定は 1（縦一列）。

yaml
form:
  sections:
    - title: 基本情報
      layout: { columns: 2 }
      fields:
        - { field: code, label: コード, type: text }
        - { field: name, label: 顧客名, type: text }

table の columns とは別物 ​

紛らわしいがまったく違うもの。名前が同じだけ。

意味書く場所
layout.columns1行あたりの項目数（数値）search / section / wizardStep / dashboardPage
table.columns一覧に出す列の定義（配列）table / dashboardItem / subTable の field

layout: { columns: 3 } は「3項目ずつ横に並べる」。columns: [{ field: ... }] は「この列を出す」。書き間違えるとパースで落ちるので気づけるが、頭の中では混ざりやすい。

4か所に書ける ​

書く場所効く範囲
search.layout検索条件の並び
section.layoutそのセクションの項目の並び
wizardStep.layoutそのステップの項目の並び
dashboardPage.layoutカードのグリッド幅（既定は 2）

セクションごとに変えられるので、「住所は1列、コードと区分は3列」のような作り分けができる。

狭い画面では効かない ​

columns は画面が広いときの列数。狭い画面では縦一列に落ちる。タブレットやスマホで見る画面に大きな数を入れても、そこで崩れるわけではない。

業務画面での目安 ​

  • 検索条件: 3 前後。条件が多い画面ほど横に詰めたほうが1画面に収まる
  • 入力フォーム: 2。1にすると縦に長くなり、3以上にすると項目名が読みにくくなる
  • ダッシュボード: 4（既定の 2 だとカードが大きすぎることが多い）

迷ったら小さいほうにする。詰めすぎた画面は直すのが面倒だが、縦に長い画面はスクロールで済む。

書けるキー ​

キー書く場所型必須既定値有効なページ種別説明
layoutdashboardPageobject → layout任意—dashboardCard grid width. Defaults to 2 columns.
layoutsearchobject → layout任意—crud dashboard master report search—
layoutsectionobject → layout任意—crud detail form master—
layoutwizardStepobject → layout任意—wizard—

この表は spec/reference.json から生成している（JSON Schema が正）。手元では npx hatake reference <キー名> で同じものが引ける。

近い例 ​

例は丸ごと写して直すのが一番速い。以下は CI で検証済み（そのまま動く形）。

ファイル種別画面どういうときに使うか
product_search.yamlsearch商品照会検索して一覧を見るだけ（登録も更新もさせない）画面が欲しい
customer_wizard.yamlwizard顧客登録項目が多いので入力をステップに分けて、1ステップずつ検証したい

実物を見る ​

デモアプリの「顧客マスタ」がこれを使っている。 デモを開く