39.10. ナビゲーションメニューの設定


39.10.1. トップナビゲーションドロップダウンメニュー

Web コンソールのトップナビゲーションバーには、ヘルプアイコンとユーザードロップダウンメニューがあります。これらには angular-extension-registry を使用してメニュー項目を追加できます。

以下の拡張ポイントを利用できます。

  • nav-help-dropdown - ヘルプアイコンのドロップダウンメニュー、デスクトップ画面の幅で表示される
  • nav-user-dropdown - ユーザードロップダウンメニュー、デスクトップ画面の幅で表示される
  • nav-dropdown-mobile - トップナビゲーション項目の単一メニュー、モバイル画面の幅で表示される

以下の例では、nav-help-dropdown メニューを <myExtensionModule> の名前で拡張しています。

注記

<myExtensionModule> はプレースホルダー名です。各ドロップダウンメニュー拡張は、今後作成される angular モジュールと競合しないように一意にする必要があります。

angular
  .module('<myExtensionModule>', ['openshiftConsole'])
  .run([
    'extensionRegistry',
    function(extensionRegistry) {
      extensionRegistry
        .add('nav-help-dropdown', function() {
          return [
            {
              type: 'dom',
              node: '<li><a href="http://www.example.com/report" target="_blank">Report a Bug</a></li>'
            }, {
              type: 'dom',
              node: '<li class="divider"></li>'  // If you want a horizontal divider to appear in the menu
            }, {
              type: 'dom',
              node: '<li><a href="http://www.example.com/status" target="_blank">System Status</a></li>'
            }
          ];
        });
    }
  ]);

hawtioPluginLoader.addModule('<myExtensionModule>');

拡張スクリプトとスタイルシートの読み込み で説明されているようにスクリプトを追加します。

Red Hat logoGithubRedditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。

多様性を受け入れるオープンソースの強化

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

© 2024 Red Hat, Inc.