.. コメント

==============
button
==============

buttonの主な機能
-----------------
* 表示条件設定
* Angular Materialのiconコンポーネントを使ったボタン
* 組込機能の呼び出し
* toggleボタン

.. csv-table::
   :header: "プロパティ", "内容", "必須", "国際化", "備考"
   :widths: 20, 40, 10, 10, 20

   "type",          "widgetsの種別",      "必須", "", "button"
   "kind",          "機能種別 [#f1]_ ",   "必須", "", "アプリ内でユニークな値を指定"
   "key",           "Schemaの項目キー",   "",     "", "kindがtoggleの場合、必須"
   "dispCondition", "表示条件",           "",     "", "key1=value1,key2=value2.."
   "title",         "ボタン名",           "",     "対象", "アイコンを使わない場合、必須"
   "target",        "組込機能の対象キー", "",     "", "組込機能を使う場合、必須"
   "icon",          "アイコン名 [#f2]_ ", "",     "", ""
   "flex",          "flex定義",           "",     "", "wrapper,section内のみ有効"
   "color",         "ボタンの色",         "",     "", "primary / accent / ..."
   "onTitle",       "onの時のボタン名",   "",     "", "kindがtoggleの場合、必須"
   "offTitle",      "offの時のボタン名",  "",     "", "kindがtoggleの場合、必須"

.. note::
  | 表示条件(dispCondition)を設定すると、条件を満たす場合のみ表示されます。
  | 設定の詳細は、:doc:`/extension/dispCondition` を参照してください。

.. csv-table:: 指定可能な組込機能
  :header: "kind", "処理内容"
  :widths: 15, 30

  "submit", "formオブジェクトを伴って呼出し元にcallback"
  "clear", "ページを初期状態に戻す"
  "add", "array要素の追加"
  "popup", "補助入力ポップアップ"

buttonのレイアウトサンプル::

  [
    {
      "type": "section",
      "direction": "row",
      "items": [
        {
          "type": "button",
          "title": "regist",
          "kind": "submit",
          "color": "primary"
        }
      ]
    }
  ]

.. rubric:: 脚注
.. [#f1] 組込機能以外のkindを指定した場合は、呼出し元にcallbackされます。
.. [#f2] 指定できるアイコン名は https://material.io/icons/ を参照してください。