2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

PowerAppsでアコーディオンメニューを作る※アニメなし

Last updated at Posted at 2024-11-01

PowerAppsでアコーディオンメニューを実現

動きのあるメニューを作りたいと色々試していたのですが
操作と見た目も楽しいアコーディオンメニューを作ることができました。
とりあえずアニメーションなしで、アニメーション付きは別途投稿します。

メニューには、ボタンとコンテナを使用します。
垂直コンテナ(下図で赤)の中にボタンと垂直コンテナ(下図でオレンジ)を交互に配置します。
大項目をボタンに表記し、垂直コンテナの中に小項目を表記したボタンを並べます。
↓こんな感じです。
image.png
ヘッダーのメニューボタンで赤枠の垂直コンテナを表示非表示させます。
単に表示非表示させるだけなら、コンテナの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にしておけば、押したメニューだけが開かれます。
アコーディオンメニュー2.gif

とりあえず今回はここまで

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?