質問†

タブコンポーネントに表示されているアイコンを、条件に応じて変更することはできますか？

↑

回答†

タブコンポーネントの値（value）を変更することで、アイコンを変更できます。

タブコンポーネントの値（value）は、1 objectに、タブ１つ分の情報を保持する、array of object です。

例えば、デフォルト設定のタブコンポーネントの値（value）は

[{"Id":"Item1","icon":"","label":"ITEM 1","disabled":false},
 {"Id":"Item2","icon":"","label":"ITEM 2","disabled":false},
 {"Id":"Item3","icon":"","label":"ITEM 3","disabled":false}]

このような設定となっています。アイコンはついていません。

このタブコンポーネントの１つ目のタブに「エラー」のアイコンが付いた状態の値は、以下です。

[{"Id":"Item1","icon":"Error","label":"ITEM 1","disabled":false},
 {"Id":"Item2","icon":"","label":"ITEM 2","disabled":false},
 {"Id":"Item3","icon":"","label":"ITEM 3","disabled":false}]


必要に応じて、変更対象のタブ Id の「icon」の値を変更してください。


■コンポーネント - タブ
　https://docs.webperformer.jp/component/tab

↑

更新履歴†

2023-12-25 公開