NavBar (ナビバー)

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

    タイプ

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

    どちらも 2 つのアクション バリアントがあります: Icon Actions および Icon Button Actions です。

    コンテンツのレイアウト

    Navbar のコンテンツは、Left Action と Title (Figma の Left Action と Title が入った Content フレーム) で構成される左側の領域と、シンプルなイベントをトリガーする用の 最大 4 つの隣接するアイコン (またはアイコン ボタン) がある右側の領域に分割されます。Figma では、ネストされた Icon および Icon Button コンポーネントに移動して、それらのアイコンを変更したり、レイヤー パネルから非表示にしたりできます。その後、コンテンツは自動レイアウトによって自動的に調整されます。Sketch では、アクションのいずれかを ~No Symbol に設定することでレイアウトを構成できます。スマート レイアウトにより、残りの要素は自動的に調整されます。Adobe XD では、不要なコンポーネントを削除するだけで同じことができ、レイアウトは Stack から自動的に調整されます。さらに、Sketch とは異なり、Libraries パネルから追加のコンポーネントを挿入できます。たとえば、右端に Avatar を表示できます。

    スタイル設定

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

    使用方法

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

    良い例 悪い例

    その他のリソース

    関連トピック:

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