タブでダッシュボードを切り替えたい

チャートが多すぎて1つのボードに収まらない場合や、用途に応じてボードを分けたい場合など
ボードを作る際、1つのボードで複数の画面を切り替えたい時ってありませんか?

下記の記事でコンテナを用いて画面を切り替える方法をご紹介しましたが、表示非表示の設定が複雑になるためちょっと面倒に感じた方もいるのではないでしょうか。

そんな時は、タブを使いましょう!
MotionBoardのレイアウトモードでは、ボード内にタブを作成することができます。

今回はタブを使用し、1つのボードで複数の画面を切り替える方法をご紹介します。

タブの作り方

レイアウトモードのボードを編集モードで開きます。

ボード状部にあるタブの、右側の[+]をクリックします。

タブが追加されました。

タブはタイトルを変更したり、形状を変更したりすることが可能です。
タブを右クリックし、[タブのプロパティ]を開きます。

初期設定では「ページ1」「ページ2」のようになっています。タイトルを書き換えるとタブの表示名が変わります。

タブの切り替えは上部のタブをクリックして行う以外に、ボタンアイテムを使って切り替えることも可能です。
その場合はタブを表示させる必要がないため、[編集時のみ表示]にチェックを入れることで非表示にできます。

タブの形状は、デフォルトでは四角形になっています。
「四角形」「台形」「左かけ台形」「右かけ台形」「下台形」「左かけ下台形」「右かけ下台形」から選択して任意の形状に変更することが可能です。

例えば、「左かけ台形」を選択するとこのような表現ができます。

タイトルの左右の余白を調整できます。
デフォルトでは「0」になっており、そのままでは窮屈な感じになってしまうため適当な余白を設定しましょう。

下に表示されるプレビューをみながら調整すると、調整しやすいです。

タブを切り替えたタイミングでボタンアイテムを実行することができます。
例えば、検索を実行するボタンを作って設定しておけば、タブを切り替えた際に検索を実行することができます。

タブの色を変えることもできます。
「通常時」「マウスオーバー時」「タブ選択時」で、それぞれ異なる色を設定できます。

タブを使用すると、1つのボードで複数の画面を切り替えることができます。
置きたいチャートが1画面に収まらない場合や、画面を分けたい場合にぜひ試してみてくださいね!

コンテナを使って複数画面を切り替える方法はこちら