syncfusion-javascript-appbar

Syncfusion TypeScript での AppBar の実装

このスキルを使用するタイミング

次のような場合に、このスキルを使用します。

• レスポンシブなアプリケーションヘッダーまたはナビゲーションバーを作成する
• ブランド、画面タイトル、ナビゲーション操作を表示する
• ボタン、メニュー、カスタムコンテンツを備えた AppBar を構築する
• バーを上部、下部、またはスティッキー要素として配置する
• カラーモード（Light、Dark、Primary、Inherit）を適用する
• サイズ（Regular、Prominent、Dense）をカスタマイズする
• AppBar のスタイルとテーマを設定する
• スペーサー、区切り線、コンポーネントを使った複雑なレイアウトを統合する
• さまざまな画面サイズに対応するレスポンシブデザインを実現する
• アクセシビリティ機能を実装する

AppBar の概要

AppBar（アクションバーまたはナビゲーションバーとも呼ばれます）は、現在のアプリケーション画面に関連する情報や操作を表示する、Syncfusion のナビゲーションコンポーネントです。次の機能を備えています。

• 柔軟な配置：上部（デフォルト）、下部、またはスティッキー
• 複数のサイズモード：Regular、Prominent、Dense
• カラーテーマ：Light、Dark、Primary、Inherit
• コンポーネントの統合：ボタン、DropDownButtons、メニュー、サイドバー
• レイアウト要素：コンテンツを配置するスペーサー、グループ化する区切り線
• レスポンシブデザイン：モバイルとデスクトップに自動的に適応
• アクセシビリティのサポート：ARIA 属性、キーボードナビゲーション、セマンティック HTML
• カスタマイズ：CSS クラス、カスタムテーマ、HtmlAttributes

主な依存関係

@syncfusion/ej2-navigations  // AppBar component
@syncfusion/ej2-base         // Base utilities
@syncfusion/ej2-buttons      // Button integration
@syncfusion/ej2-splitbuttons // DropDownButton support

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

はじめに

📄 参照： references/getting-started.md

• インストールと npm パッケージのセットアップ
• TypeScript と ES5 JavaScript のアプローチ
• AppBar の基本的な初期化
• CSS のインポートとテーマ設定
• ボタンとコンテンツの追加
• 初回のレンダリングと CDN の参照

配置とスティッキー動作

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

• 上部 AppBar（デフォルトの配置）
• 下部 AppBar の配置
• スティッキー AppBar の動作（isSticky プロパティ）
• 各配置のユースケース
• 配置プロパティの設定
• ScrollView との連携

サイズと高さのモード

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

• Regular AppBar（デフォルトの高さ）
• Prominent AppBar（タイトルや画像向けの高い高さ）
• Dense AppBar（コンパクトな高さ）
• 高さのカスタマイズ方法
• 各モードの使用場面
• CSS クラスの適用

カラーとテーマのモード

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

• Light AppBar（明るい背景とテキスト）
• Dark AppBar（暗い背景とテキスト）
• Primary AppBar（ブランドのプライマリカラー）
• Inherit AppBar（親の色を継承）
• e-inherit CSS クラスを使ったボタンの継承
• コンポーネントの統合（ボタン、メニュー、DropDownButton）

スタイル設定とカスタマイズ

📄 参照： references/styling-customization.md

• CSS クラスセレクターとその用途
• カスタムスタイル設定のための CssClass プロパティ
• ARIA ラベルとアクセシビリティのための HtmlAttributes
• カスタムテーマの作成
• Theme Studio との統合
• CSS 変数のカスタマイズ

レイアウトパターンとデザイン

📄 参照： references/layout-patterns-and-design.md

• コンテンツの配置に使用する Spacer 要素（e-appbar-spacer）
• 視覚的なグループ化に使用する Separator 要素（e-appbar-separator）
• ボタンと DropDownButton の統合パターン
• Menu コンポーネントの統合
• TreeView と連携する Sidebar
• レスポンシブデザインとメディアクエリ
• 複雑なナビゲーションレイアウト

ベストプラクティスとアクセシビリティ

📄 参照： references/best-practices-and-accessibility.md

• セマンティック HTML 構造
• ARIA 属性とアクセシビリティ
• キーボードナビゲーションのサポート
• 色のコントラストとアクセシビリティへの準拠
• モバイル向けのレスポンシブブレークポイント
• パフォーマンスの最適化
• よくある落とし穴とトラブルシューティング

API リファレンス

📄 参照： references/api-reference.md

• すべてのプロパティ、メソッド、イベントの完全な API ドキュメント
• 型定義付きの全 9 プロパティ（colorMode、cssClass、enablePersistence、enableRtl、htmlAttributes、isSticky、locale、mode、position）
• パラメーターと戻り値の型を含む全 8 メソッド（addEventListener、appendTo、dataBind、destroy、getRootElement、refresh、removeEventListener、inject）
• 詳細な例を含む全 2 イベント（created、destroyed）
• ページの再読み込み後も状態を保持（enablePersistence）
• 国際化と RTL 対応（locale、enableRtl）
• イベント処理のパターンとライフサイクル管理
• すべての API を網羅する完全な動作例

クイックスタートの例

基本的な AppBar の設定

TypeScript：

import { AppBar } from "@syncfusion/ej2-navigations";
import { Button } from "@syncfusion/ej2-buttons";

// Create AppBar with Primary color
const appbarObj: AppBar = new AppBar({
  colorMode: 'Primary'
});
appbarObj.appendTo("#appbar");

// Add buttons with inherited styling
const menuButton: Button = new Button({ 
  cssClass: 'e-inherit', 
  iconCss: 'e-icons e-menu' 
});
menuButton.appendTo('#menuBtn');

const loginButton: Button = new Button({ 
  cssClass: 'e-inherit', 
  content: 'Login' 
});
loginButton.appendTo('#loginBtn');

HTML：

<!DOCTYPE html>
<html>
<head>
  <link href="url" rel="stylesheet" />
  <link href="url" rel="stylesheet" />
  <link href="url" rel="stylesheet" />
</head>
<body>
  <header id="appbar">
    <button id="menuBtn"></button>
    <div class="e-appbar-spacer"></div>
    <button id="loginBtn"></button>
  </header>
</body>
</html>

よく使われるパターン

パターン 1：スペーサーを使用したナビゲーション

// Center title with left menu and right login
<header id="appbar">
  <button id="menu"></button>
  <span>My App</span>
  <div class="e-appbar-spacer"></div>
  <button id="login"></button>
</header>

パターン 2：セパレーターを使用したアクションのグループ化

// Edit actions | Format actions | Layout actions
<header id="appbar">
  <button id="cut"></button>
  <button id="copy"></button>
  <button id="paste"></button>
  <div class="e-appbar-separator"></div>
  <button id="bold"></button>
  <button id="italic"></button>
</header>

パターン 3：背景付きの目立つヘッダー

ヒーローヘッダーには、背景画像と mode: 'Prominent' を使用します。

パターン 4：固定ナビゲーション

スクロール中もヘッダーを表示し続けるには、isSticky: true を設定します。

パターン 5：下部ナビゲーションバー

モバイルスタイルの下部ナビゲーションには、position: 'Bottom' を設定します。

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

プロパティ	型	デフォルト	用途
colorMode	'Light' | 'Dark' | 'Primary' | 'Inherit'	'Light'	背景色とテキスト色を設定します
mode	'Regular' | 'Prominent' | 'Dense'	'Regular'	AppBar の高さを制御します
position	'Top' | 'Bottom'	'Top'	AppBar を上部または下部に配置します
isSticky	boolean	false	スクロール中に AppBar を固定します
cssClass	string	''	カスタム CSS クラスを適用します
htmlAttributes	object	{}	HTML 属性（ARIA など）を設定します

よくあるユースケース

ユースケース 1：E コマースのヘッダー

// Logo, navigation menu, search, cart, profile
// Sticky, Primary color, responsive layout with e-appbar-spacer

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

// Menu toggle, page title, notification icon, user dropdown
// Top positioned, Prominent mode for title

ユースケース 3：モバイルアプリのナビゲーション

// Bottom navigation bar with icons
// Dense mode, Bottom position, Light/Dark color mode

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

// Grouped editing tools with separators
// Regular mode, Primary color, e-inherit buttons for consistency

ユースケース 5：サイドバー付きの複雑なダッシュボード

// Menu toggle + AppBar at top + Sidebar below
// Sticky AppBar, responsive media queries

次のステップ

1. 始める：はじめにを読んで、最初の AppBar を設定します
2. バーを配置する：配置ガイドで位置を選びます
3. サイズモードを選択する：サイズモードでサイズを選びます
4. 色を適用する：カラーモードでテーマを設定します
5. スタイルを設定してカスタマイズする：スタイリングで外観をカスタマイズします
6. レイアウトを設計する：レイアウトパターンで複雑なパターンを作成します
7. 品質を確保する：ベストプラクティスに従います

---

コントロール： Syncfusion AppBar | プラットフォーム： TypeScript | バージョン： EJ2 32.1.19+