Studioでブール値(Boolean)を使ってページごとに表示を切り替えるUIの実装方法

こんにちは。
先日Studioでナビパーツの現在地表示を切り替えるUIの実装を行いました。

今回はその際に行った「ブール値でON/OFF時の表示を切り替える」という方法を紹介します。

同じようなUIを実現させる方法には他に「条件付きスタイル」という方法がありますが、

• ページURL以外の条件で表示を切り替えたい
• 表示切り替えのパーツとして別のコンポーネントを使いたい

という場合に今回紹介する方法が便利です。

完成形

サンプルとして実装したデータは以下です。
コンポーネント化して複数ページで使いまわすことを想定しています。

作成方法

①通常時のUIをあらかじめコンポーネント化しておく

今回はコンポーネントの「ブール値」プロパティを使用します。
そのためあらかじめ該当の部分はコンポーネント化しておきましょう。

②ブール値のプロパティを登録する

プロパティを作成すると表示される「＋」ボタンを押すと、登録したいプロパティの選択肢が出てきます。そこから「ブール値」を選択します。

プロパティにブール値の項目が登録されるので、実装予定のパーツの名称に変更します。

③ONとOFFの時のUIをそれぞれ作成する

ブール値によって切り替えたいONの状態とOFFの状態のUIをそれぞれ作成します。
(既存のコンポーネントがあるならそれを用いても構いません)

④ブール値とUIを紐づける

右側のメニューバーに「表示条件」という項目があります。
この部分に、特定の条件を満たす場合に表示させたいUIは条件を「is True」に、そうでない場合に表示させた場合は「is False」で設定します。

これらのフローを行うことで、ブール値によって表示を切り替えるUIを実装することができます。

最後に

ページごとに表示を切り分けるUIはWebサイトでは頻出です。Studioで該当のUIを作成する際に、こういった方法もあると頭の片隅に置いてくれると嬉しいです。
ここまで読んでいただきありがとうございます。