PowerAppsでアコーディオンメニューを実現
動きのあるメニューを作りたいと色々試していたのですが
操作と見た目も楽しいアコーディオンメニューを作ることができました。
とりあえずアニメーションなしで、アニメーション付きは別途投稿します。
メニューには、ボタンとコンテナを使用します。
垂直コンテナ(下図で赤)の中にボタンと垂直コンテナ(下図でオレンジ)を交互に配置します。
大項目をボタンに表記し、垂直コンテナの中に小項目を表記したボタンを並べます。
↓こんな感じです。
ヘッダーのメニューボタンで赤枠の垂直コンテナを表示非表示させます。
単に表示非表示させるだけなら、コンテナのVisibleプロパティに変数を設定してメニューボタンのOnSelectプロパティで変数をtrue・falseに設定するだけです。
たとえば、上のメニューボタンのOnSelectプロパティに
Set(_menu,!_menu)
として、垂直コンテナ(オレンジ)のVisibleプロパティに変数_menuを設定すれば
ボタンを押すたびにtrueとfalseが入れ替わるので、メニューを表示したり非表示したり出来ます。
これと同じで、小項目のボタンを配置した、オレンジ色の垂直コンテナのVisibleプロパティに変数を設定し
大メニューのボタンのOnSelectプロパティに先ほどのコードを変数名だけ変更して入れれば、アコーディオンメニューが実現可能です。
大メニューのOnSelectプロパティに例えば
Set(_menu1,!_menu1);
Set(_menu2,false);
Set(_menu3,false);
Set(_menu4,false);
こんな感じで、押したメニュー以外をfalseにしておけば、押したメニューだけが開かれます。
とりあえず今回はここまで