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>');
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>');
拡張スクリプトとスタイルシートの読み込み で説明されているようにスクリプトを追加します。