メニュー ウィジェット

メニュー ウィジェットはページを整理して、ユーザーがアプリ内のあるページから別のページに移動するのに役立つように設計されています。 メニューの方向を変更したり、タブやピルなどのスタイルを選択したり、背景やアクティブなメニューの色を選択したりすることができます。

このウィジェットを使用して、次のようなアプリの設計要件をサポートします。

  • 複数のページがあるアプリを作成して、シンプルで直観的な方法でページ間を移動する機能をユーザーに提供します。

使用上の注意

通常、メニューはページの上部のヘッダーや本文に配置されます。 メニュー ウィジェットは、[ページ] パネルに表示されるときに、ページ、リンク、およびフォルダーが自動的に入力されます。 [ページ] パネルでメニューから非表示をオンにしない限り、ページ、フォルダー、およびリンクの名前は、整列した順番にメニューに表示されます。 ページまたはフォルダー内にページおよびリンクをネストすると、メニュー ウィジェットにドロップダウン メニューとして表示されます。 フォルダーはページを変更せずに最上部をクリックできるドロップダウン メニューを提供します。 ユーザーはリンクにポインターを合わせたり、クリックしたりすることでメニューを操作します。操作中にページに戻ることもできます。

設定

メニュー ウィジェットには次の設定があります。

  • [種類] - メニューの配置と外観を指定します (水平、垂直、またはアイコン)。 アイコン タイプでは、アプリの左側または右側のモード ウィンドウにメニューが垂直に折りたたまれます。
    • [サブメニュー展開モード] - サブメニューは展開または折りたたみ可能としてエンド ユーザーに表示できます。 この設定は垂直およびアイコンのメニュー タイプにのみ使用でき、ネストされたページまたはリンクが含まれる場合にのみアプリに表示されます。
  • [表示設定] - 次のオプションを使用してメニュー アイテムの表示設定を指定します。
    • [スタイル] - メニュー スタイル (デフォルト、下線、ピル) を選択します。 各スタイルの色はアプリのテーマから継承されます。
    • [間隔] - メニューに表示されるページ間の間隔 (ピクセル単位) を指定します。
    • [整列] - 各メニュー アイテムのテキストの配置を指定します。 たとえば、水平のメニューを作成して [下線] スタイルを選択した場合、ページ名はその線に合わせられます (左端、右端、または中央)。
    • [アイコンの表示] - ページ、リンク、またはフォルダーとして識別する各メニュー アイテムのアイコンを表示します。 [ページ] パネルでこれらのデフォルトのアイコンを変更できます。
  • [高度な設定] - アプリのテーマをオーバーライドして、メニューの背景、テキスト、アイコン、および枠線の色、サイズ、およびスタイルを指定します。
    • [背景] - 背景色をメニューに追加します。
    • [状態] - さまざまなテキストと枠線の設定を使用してメニューのステータスを伝える視覚的な表現を提供します。 たとえば、テキストを太字にしたり、フォント サイズを大きくしたり、[選択] 状態に異なる背景色と枠線スタイルを使用したりできます。
      • [デフォルト] - ユーザーの操作がないメニューのデフォルトの状態。
      • [ホバー] - ユーザーがメニュー内のリンクをポイントしている状態。
      • [選択] - メニューでユーザーがアイテムを選択した状態。
      ヒント:

      このオプションを試すには、ビルダー ツールバーの [ライブ ビュー] をクリックします。


このトピックの内容
  1. 使用上の注意
  2. 設定