見出し画像

【Resonite】コンテキストメニューの追加方法〜応用編〜【雑解説】

はじめに

 この記事では、コンテキストメニューの応用的な使い方を備忘録として残します。コンテキストメニューの作成方法などの基本的なことについては以下の記事を参考にしてください。
 今回の記事で作るものは、サンプルをユニポケで配布しています。記事最下部のリンクから見に行ってみてください。

①複数の階層を持つコンテキストメニューの作り方

コンテキストメニューが増えすぎると細くなって選びにくくなるので、メニューを階層化できると便利です。カテゴリや用途別に分けてもいいかもしれません。

1.コンテキストメニューを用意する

今回サンプルとして使う「基本のコンテキストメニュー」はユニポケで配布中

2.下の階層用のスロットを追加する

3.既にあるコンテキストメニューのスロットに、ContextMenuSubmenuコンポーネントを追加する

RadiantUI/ContextMenu
ContextMenuSubmenu
追加後

4.ContextMenuSubmenuのItemsRootに、追加したいコンテキストメニューの親スロットを設定する

今回はContextMenu - Childに新しい階層を作る予定なのでContextMenuスロットを設定

5.2で追加したスロットにContextMenuItemSaurceコンポーネントを追加する

RadiantUI/ContextMenu/ContextMenuItemSource
追加したところ

6.新しい階層にメニューが増えているはずなので確認する

ContextMenuをクリックすると、新しい階層が追加されているはず

おまけ1.メニューの簡単な増やし方

追加したスロットをコピーすると……
メニューも増えてる

おまけ2.更に深く・・・

ContextMenuSubmenuを追加して、スロットを設定
追加したい階層のスロットを作成
追加したスロットにContextMenuItemSaurceコンポーネントを追加
動作確認の様子

②前の階層に戻るメニューの作り方

メニューを階層化したときに途中で選び間違えてしまうと、また最初から選ぶことになってしまいます。そんなときに戻るメニューがあると、とても便利です。

1.階層化されたコンテキストメニューを用意する

SubMenu01 - 01から1つ前の階層へ戻したい

2.戻るメニューを追加するスロットを作成する

3.ContextMenuItemSaurceとContextMenuSubmenuを追加する

4.ContextMenuSubmenuのItemsRootに戻りたい階層の親スロットを設定する

5.動作確認する

③コンテキストメニューの色や画像を切り替える

コンテキストメニューの色や画像を切替えるときに便利なコンポーネント”ValueOptionDescriptionDriver”を紹介します。

今回は、サンプルとして押したら色が切り替わる機能を追加します。

1.ValueOptionDescriptionDriverを追加する

  CommonUI/Driversの中にあります。
  <>内の型は切り替えのトリガーとなる値と同じ型を選んでください。

2.設定する

今回は色を変えたいので、ContextMenuItemSaurceのColorをValueOptionDescriptionDriverのColorに設定します。

 トリガーとなる値に対応する値を設定します。今回は、トリガーがBoolなので、Trueのときに緑、Falseのときに赤になるように設定しました。

設定後

3.動作確認

ヨシ!

今回のサンプルはユニポケで配布中!

サブメニューを追加したもの

更に階層を追加したもの

戻るボタンを追加したもの

ValueOptionDescriptionDriverを追加したもの


いいなと思ったら応援しよう!