syncfusion-angular-appbar

Syncfusion Angular AppBar の実装

Syncfusion Angular AppBar コンポーネントは、アクションバーやナビゲーションバーとも呼ばれる、柔軟なナビゲーションコンポーネントです。現在のアプリケーション画面に関連する情報やアクションを表示し、ブランド表示、画面タイトル、ナビゲーション、アクションの表示に使用されます。AppBar は高さモード、カラーモード、配置に対応しており、Buttons、Menus、Sidebars などの他の Syncfusion コンポーネントともシームレスに連携します。

このスキルを使用する場面

• ナビゲーションヘッダー：アプリケーションの上部または下部にナビゲーションバーを作成する
• 固定ヘッダー：スクロール中も表示されるヘッダーを作成する
• レスポンシブナビゲーション：さまざまな画面サイズに適応するナビゲーションをデザインする
• コンポーネント連携：AppBar と Buttons、Menus、DropDownButtons、Sidebars を組み合わせる
• ブランド表示とレイアウト：ロゴ、タイトル、アクションボタンを表示する
• ビジュアルスタイル：サイズモードやカラーテーマで AppBar の外観をカスタマイズする
• コンテンツの間隔調整：スペーサーや区切り線を使用して AppBar のコンテンツを整理する

コンポーネントの概要

AppBar コンポーネントには、次の機能があります。

• 配置オプション：上部（デフォルト）、下部、固定
• サイズモード：標準（デフォルト）、プロミネント（高め）、デンス（コンパクト）
• カラーモード：ライト、ダーク、プライマリ、継承
• 組み込みの間隔調整：コンテンツ整理用のスペーサー要素と区切り線
• コンポーネント連携：Buttons、DropDownButtons、Menus、Sidebars と連携
• カスタマイズ：CSS クラス、カスタムスタイル、テーマのサポート

ドキュメントとナビゲーションガイド

タスクに合ったリファレンスを選択してください。

はじめに

📄 参照先： references/getting-started.md

• Angular 環境のセットアップと Angular CLI のインストール
• Syncfusion AppBar パッケージのインストール（Ivy 版と ngcc 版）
• 基本的なコンポーネントの実装
• CSS のインポートとテーマの設定
• アプリケーションの実行

配置とレイアウト

📄 参照先： references/positioning-and-layout.md

• AppBar の上部配置（デフォルト）
• AppBar の下部配置
• スクロール中の AppBar の固定動作
• position プロパティと isSticky プロパティの設定
• 配置タイプごとの例

サイズとカラー

📄 参照先： references/sizing-and-colors.md

• サイズモード：標準、プロミネント、デンス（mode プロパティ）
• カラーモード：ライト、ダーク、プライマリ、継承（colorMode プロパティ）
• さまざまな組み合わせによるビジュアルのカスタマイズ
• プロミネント AppBar の高さ調整
• すべての設定を網羅した例

デザインパターン

📄 参照先： references/design-patterns.md

• AppBar のコンテンツ間の間隔を調整するスペーサー要素
• 視覚的なグループ分けに使う区切り線要素
• Menu コンポーネントと連携した AppBar
• Button および DropDownButton と連携した AppBar
• Sidebar と連携した AppBar
• レスポンシブ動作用のメディアクエリ

スタイルとカスタマイズ

📄 参照先： references/styling-and-customization.md

• 組み込み CSS クラス（.e-appbar、.e-prominent、.e-dense、.e-light、.e-dark、.e-primary、.e-inherit）
• カスタムスタイル用の CssClass プロパティ
• インライン属性用の HtmlAttributes ディレクティブ
• Theme Studio との連携
• カスタムテーマとスタイルの設定方法

API リファレンス

📄 参照先： references/api-reference.md - API ドキュメントの完全版

• 9 つのプロパティすべての使用例とデフォルト値
• 2 つのイベント（created、destroyed）のすべての例
• CSS クラスと HTML 要素
• プロパティの組み合わせとパターン
• アクセシビリティと国際化

クイックスタート

最小限の AppBar の実装例です。

import { Component } from "@angular/core";
import { AppBarModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'

@Component({
  imports: [AppBarModule, ButtonModule],
  standalone: true,
  selector: "app-root",
  template: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <span style="margin: 0 5px">Angular AppBar</span>
        <div class="e-appbar-spacer"></div>
        <button ejs-button cssClass="e-inherit">Login</button>
      </ejs-appbar>
    </div>
  `
})
export class AppComponent { }

style.css に CSS をインポートします。

@import "../node_modules/@syncfusion/ej2-base/styles/material3";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3";

よく使われるパターン

パターン 1：コンテンツの配置に使うスペーサー

.e-appbar-spacer を使用して、コンテンツを両端に配置します。

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">FREE TRIAL</button>
</ejs-appbar>

パターン 2：コンテンツグループを区切るセパレーター

.e-appbar-separator を使用して、ボタングループを視覚的に区切ります。

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-cut"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-copy"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-paste"></button>
  <div class="e-appbar-separator"></div>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-bold"></button>
</ejs-appbar>

パターン 3：下部に配置する AppBar

フッター形式のナビゲーションには、位置を Bottom に設定します。

<ejs-appbar colorMode="Primary" position="Bottom">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">Settings</button>
</ejs-appbar>

パターン 4：固定ヘッダー

スクロール中も表示され続けるヘッダーには、isSticky プロパティを使用します。

<ejs-appbar colorMode="Primary" [isSticky]="true">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <span>My App</span>
</ejs-appbar>

主なプロパティのリファレンス

プロパティ	型	デフォルト	目的
position	"Top" | "Bottom"	"Top"	AppBar の垂直方向の位置
isSticky	boolean	false	スクロール中に AppBar を固定します
mode	"Regular" | "Prominent" | "Dense"	"Regular"	AppBar の高さを制御します
colorMode	"Light" | "Dark" | "Primary" | "Inherit"	"Light"	配色を設定します
cssClass	string	-	カスタム CSS クラスを適用します
enablePersistence	boolean	false	再読み込み後もコンポーネントの状態を保持します
enableRtl	boolean	false	右から左への表示方向を有効にします
htmlAttributes	Record	-	カスタム HTML 属性
locale	string	"en-US"	ローカライズ設定

→ 例を含む完全な API ドキュメントについては、API リファレンスをご覧ください

関連する Syncfusion コンポーネント

• Button - AppBar 内のインタラクティブなボタン
• DropDownButton - AppBar 内のドロップダウンメニュー
• Menu - メニューバーとの統合
• Sidebar - AppBar と並んで表示するサイドナビゲーション
• Toolbar - スタイルが異なる、同様のアクションバーレイアウトコンポーネント

---

実装を始めますか？ 最初の AppBar をセットアップするには references/getting-started.md から始めるか、ユースケースに合ったリファレンスに進んでください。