syncfusion-react-appbar

Syncfusion React AppBar の実装

AppBar コンポーネントは、アプリケーションの上部または下部に柔軟なナビゲーションヘッダーやツールバーを作成します。ブランド、画面タイトル、ナビゲーションコントロール、アクションの表示に使用され、レスポンシブレイアウト、複数の配置モード、豊富なスタイル設定に対応しています。

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

次のような場合に AppBar を使用します。

• ページの上部または下部にアプリケーションのブランドやナビゲーションを表示する
• ボタン、メニュー、ドロップダウンを備えたアクションバーを作成する
• 画面サイズに合わせて調整されるレスポンシブツールバーを構築する
• スクロール中も表示されるスティッキーまたは固定ナビゲーションを実装する
• メニューナビゲーションを備えたレスポンシブサイドバーを作成する
• グループ化したコントロールの間に視覚的な区切りを追加する
• アクセシビリティ標準（WCAG 2.2、Section 508、キーボードナビゲーション）に対応する

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

はじめに

📄 参照： references/getting-started.md

• パッケージのインストールと依存関係
• React のセットアップ（Vite と Create React App）
• CSS のインポートとテーマ設定
• ボタンとアイコンを備えた基本的な AppBar
• 最初の動作するサンプル

配置とレイアウト

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

• 配置モード：上部（デフォルト）、下部、スティッキー
• 水平方向のコンテンツ間隔を調整する Spacer
• 視覚的なグループ化のための Separator
• レスポンシブデザインのためのメディアクエリ
• さまざまな画面サイズに対応するレイアウトパターン

サイズとカラーモード

📄 参照： references/size-and-color-modes.md

• Mode プロパティ：Regular、Prominent、Dense
• ColorMode プロパティ：Light、Dark、Primary、Inherit
• 各モードの組み合わせを使用する場面
• Prominent AppBar の高さのカスタマイズ
• カラーモードによる視覚的な階層化

デザインパターン

📄 参照： references/design-patterns.md

• Menu コンポーネントと連携する AppBar
• Button および DropDownButton と連携する AppBar
• レスポンシブナビゲーション向けの Sidebar と連携する AppBar
• ナビゲーションとブランドのパターン
• e-inherit CSS クラスの使用
• TreeView を備えたレスポンシブサイドバー

スタイリングとアクセシビリティ

📄 参照： references/styling-and-accessibility.md

• cssClass プロパティによる CSS のカスタマイズ
• HTML 属性と aria-label
• CSS クラスの一覧（.e-appbar、.e-prominent など）
• WCAG 2.2 および Section 508 への準拠
• キーボードナビゲーションのサポート
• RTL、色のコントラスト、モバイルのサポート

API リファレンス

📄 参照： references/api-reference.md

• プロパティの完全なドキュメント（colorMode、mode、position、isSticky、cssClass、htmlAttributes、enableRtl、enablePersistence、locale）
• イベントのドキュメント（created、destroyed）
• 各プロパティの動作するコード例
• イベントハンドラーの例
• 一般的なプロパティの組み合わせ
• すべての API の概要表

クイックスタート

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Primary">
      <ButtonComponent cssClass='e-inherit menu' iconCss='e-icons e-menu'></ButtonComponent>
      <span className="regular">My App</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass='e-inherit login'>Login</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

一般的なパターン

パターン 1：基本的なナビゲーションバー

<AppBarComponent colorMode="Primary">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit">Home</ButtonComponent>
  <ButtonComponent cssClass="e-inherit">About</ButtonComponent>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Contact</ButtonComponent>
</AppBarComponent>

パターン 2：タイトル付きの Prominent AppBar

<AppBarComponent colorMode="Primary" mode="Prominent" cssClass="prominent-appbar">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span className="prominent">Large Title Section</span>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Action</ButtonComponent>
</AppBarComponent>

パターン 3：Dense ツールバー

<AppBarComponent colorMode="Dark" mode="Dense">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-copy"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-paste"></ButtonComponent>
  <div className="e-appbar-separator"></div>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-bold"></ButtonComponent>
</AppBarComponent>

パターン 4：下部に配置したスティッキー AppBar

<AppBarComponent colorMode="Primary" isSticky position="Bottom">
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Save</ButtonComponent>
  <ButtonComponent cssClass="e-inherit">Cancel</ButtonComponent>
</AppBarComponent>

主なプロパティ

最もよく使用される AppBar のプロパティを簡単に確認できます。

プロパティ	型	デフォルト	用途
colorMode	string	"Light"	配色：Light、Dark、Primary、Inherit
mode	string	"Regular"	サイズモード：Regular、Prominent、Dense
position	string	"Top"	垂直位置：Top、Bottom
isSticky	boolean	false	スクロール中にビューポートに固定します
cssClass	string	-	スタイル設定用のカスタム CSS クラス
htmlAttributes	Record	{}	HTML 属性（aria-label、data-* など）
enableRtl	boolean	false	右から左への方向を有効にします
enablePersistence	boolean	false	再読み込み後も状態を保持します
locale	string	"en-US"	言語と地域の設定

すべてのプロパティ、イベント、メソッドの詳しい説明とコード例については、API リファレンスを参照してください。

よくあるユースケース

ユースケース 1：EC サイトの商品ページ

• 上部にブランドロゴと検索機能を備えたプライマリ AppBar
• ナビゲーションボタン（ホーム、商品、概要）
• 右側に配置されたユーザーアカウントとカートのアイコン
• 商品をスクロールしている間も表示されるよう固定

ユースケース 2：管理ダッシュボード

• アプリケーション名を表示するダーク AppBar
• 左側のサイドバー切り替えボタン（e-menu アイコン）
• バランスを取るための中央のスペーサー
• 右側に配置されたユーザープロフィールとログアウト

ユースケース 3：モバイルファーストのアプリ

• レスポンシブなメニューボタン（デスクトップでは非表示）
• 画面スペースを節約する Dense モード
• モバイルではアクションボタン付きの下部 AppBar
• デスクトップではナビゲーション全体を備えた上部 AppBar

ユースケース 4：ドキュメントエディター

• 編集ツール（切り取り、コピー、貼り付け）を備えた Dense AppBar
• 関連するボタンをグループ化するセパレーター
• 左側に元に戻す／やり直し、右側に書式設定オプション
• ドキュメントの編集中は固定

---

**次のステップ：**具体的なタスクに応じて、上記のリファレンスファイルを選択してください。たとえば、使い始める場合は「Getting Started」を読んでください。AppBar の配置が必要な場合は、「Positioning and Layout」を読んでください。