NavBar (ナビバー)

    Navbar コンポーネントを使用して、アプリケーション内の現在の位置を明確にし、単純なアプリケーション レベルのナビゲーションを実装します。アプリケーションで多くの操作を伴うより複雑なナビゲーションが必要な場合は、代わりに Navigation Drawer または Menu の使用を検討してください。Navbar は常に画面の上部にあり、Ignite UI for Angular Navbar コンポーネントと視覚的に同じものです。

    タイプ

    Navbar には、2 つの異なるタイプのバリエーションがあります。メイン コンテンツ領域に影を落とす Elevated のものと、コンテンツの残りの部分から分離する代わりに境界線がある Outlined です。どちらのバリアントも、内部で同じ機能をサポートしています。

    コンテンツのレイアウト

    Navbar のコンテンツは、Left Action と Title で構成される左側の領域と、さまざまな操作用の 4 つの隣接するアイコンがある右側の領域に分割されます。Navbar レイアウトを設定するには、Left Action または右側のアイコンを ~No Symbol に設定し、スマート レイアウトにより、左側のレイアウトが自動的に調整されます。Adobe XD では、不要なコンポーネントを削除するだけで同じことができ、レイアウトは Stack から自動的に調整されます。さらに、Sketch とは異なり、Libraries パネルから追加のコンポーネントを挿入できます。たとえば、右端に Avatar を表示できます。

    アクション アイコン

    Navbar は、さまざまな単純なイベントをトリガーできる右側の最大 4 つの操作アイコンをサポートできます。

    スタイル設定

    Navbar には、タイトル、アイコン、境界線、および背景色に使用できるオプションを通じて、基本的なスタイルの柔軟性があります。

    使用方法

    Navbar の操作は、タイトルと重ならないように注意深く設定する必要があります。これは、1 つを除くすべてのアイコンを右側に非表示にし、3 つの点で表される「その他」アイコンを割り当てて、単純なメニューの表示をトリガーすることで回避できます。操作で「その他」アイコンを指定した場合、Navbar に通常配置するすべての操作をその下に統合し、Navbar にスタンドアロンの操作を配置しないようにします。

    良い例 悪い例

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。