インタラクティブなダッシュボード用のカスタムラベルとアイコンを使用した動的タブの構築 - DataV

切り替え、動的に追加または削除できるタブのグループを設定できます。

フィールド

項目	説明	データ型	必須	補足
`名前`	コントロールの名前。The name of the control.	String	継続する	なし
`タイプ`	コントロールのタイプ。	String	継続する	なし
`default`	デフォルト値。	object	継続しない	このフィールドを指定しない場合、デフォルト値は空です。
`追加可能`	タブを動的に追加または削除できるかどうかを指定します。	Boolean	継続しない	デフォルト値は`true`です。
`テンプレート`	タブを動的に追加または削除するために使用されるテンプレート。	object	継続しない	デフォルト値は `{}` です。
`子供たち`	各タブの設定。	array	継続しない	デフォルト値は `[]` です。タブのキーを `_icon`、`id`、または `_label`にすることはできません。説明 `_label`を追加してタブ名をカスタマイズし、`_icon`フィールドを追加してアイコンを指定できます。たとえば、タブ名を`シリーズ1`から`テンプレート`に変更します。
`フォールド`	デフォルトでタブを表示するかどうかを指定します。	Boolean	継続しない	デフォルト値は`true`です。

値

条件	データ型	例	デフォルト値	補足
非該当	array	`[ { "name": "Series 1", }, { "name": "Series 2", } ]`	`[]`	`_label`を追加してタブ名をカスタマイズし、`_icon`を追加してアイコンを指定できます。

サンプル設定

設定されたtemplateフィールド (タブは動的に追加または削除できます) Configuration example 1

 "tabs": {
    "name": "Tab",
    "type": "tabs",
    "maxTabs": 10,
    "default": [
      {
        "seriesName": "Steel"
      }
    ],
    "template": {
      "name": "Series <%= i + 1%>",
      "children": {
        "seriesName": {
          "type": "text",
          "name": "Series Name"
        }
      }
    }
}

設定されていないtemplateフィールド (固定コンテンツ) Configuration example 2

"tabs": {
    "name": "Tab",
    "type": "tabs",
    "addable": false,
    "children": [
      {
        "Name": "User Information",
        "children": {
          "serieName": {
            "name": "Name",
            "type": "text"
          }
        }
      },
      {
        "name": "Apply",
        "children": {
          "switch": {
            "name": "Switch",
            "type": "switch"
          }
        }
      }
    ]
}

カスタムラベルとアイコン Configuration example 3

アイコンのURLを指定する必要があります。

{
  "tabs": {
    "name": "Tab",
    "type": "tabs",
    "default": [
      {
        "link": true,
        "_label": "Food Industry",
        "_icon": "https://img.alicdn.com/tfs/TB1fck7voH1gK0jSZSyXXXtlpXa-201-200.png"
      }
    ],
    "template": {
      "name": "Series <%= i + 1%>",
      "children": {
        "link": {
          "type": "switch",
          "name": "Link"
        }
      }
    }
  }
}