syncfusion-aspnetcore-appbar

Syncfusion AppBar の実装

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

次のような場合に AppBar コンポーネントを使用します。

• トップまたはボトムのナビゲーションバーを作成する場合。ブランドの統一感を保ち、アクションを適切に配置できます。
• アプリケーションのタイトルやブランドを表示する場合。サイズを柔軟に選択できます（Regular、Prominent、Dense モード）。
• 複数のカラーテーマを提供する場合。アプリケーションのデザインに合わせられます（Light、Dark、Primary、継承色）。
• 画面サイズに応じて調整されるレスポンシブレイアウトをサポートする場合。メディアクエリを使用できます。
• メニュー、ボタン、サイドバーなどのナビゲーション要素を統合する場合。継承システムを利用できます。
• 固定またはスティッキー配置を実装する場合。スクロール中も最上位のアクションに継続してアクセスできます。
• 右から左へ記述する（RTL）言語をサポートする場合。組み込みの方向サポートを利用できます。

コンポーネントの概要

Syncfusion AppBar は、現在のアプリケーション画面に関連する情報やアクションを表示する、柔軟なヘッダーコンポーネントです。次の機能を提供します。

• 配置オプション：上部（既定）または下部への配置
• サイズの柔軟性：Regular（既定）、Prominent（大きめ）、Dense（圧縮）の高さ
• カラーモード：Light、Dark、Primary、または親から継承
• スティッキー表示のサポート：isSticky プロパティにより、ページのスクロール中も固定配置
• コンテンツレイアウト：コンテンツを整理するための Spacer および Separator 要素
• コンポーネント統合：e-inherit CSS クラスを使用した、ネストされた Button、DropDownButton、Menu、TextBox のシームレスなスタイル設定
• レスポンシブデザイン：適応型レイアウトに対応する完全なメディアクエリサポート
• ローカライズ：カスタムロケールのサポートと RTL レンダリング

ドキュメントおよびナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• 前提条件とシステム要件の確認
• Microsoft Templates または Syncfusion Extension を使用したプロジェクトの作成
• NuGet パッケージのインストールと設定
• _ViewImports.cshtml での Tag Helper の登録
• スタイルシートとスクリプトの参照（CDN の設定）
• Script Manager の登録
• AppBar の基本的な実装
• 初回のレンダリングと確認

配置とレイアウト

📄 参照： references/positioning.md

• 上部配置の動作（既定）
• position="Bottom" プロパティを使った下部配置
• isSticky="true" を使った固定ヘッダーのスティッキー配置
• 配置とレスポンシブデザインの組み合わせ
• 実際のナビゲーションパターンとユースケース

サイズモード

📄 参照： references/sizing-modes.md

• Regular モード（既定の高さ、mode="Regular"）
• 大きなコンテンツ向けの Prominent モード（mode="Prominent"）
• コンパクトなレイアウト向けの Dense モード（mode="Dense"）
• 各モードのユースケースに関するガイダンスとコンテンツの調整
• 高さのカスタマイズ方法

カラーとテーマのモード

📄 参照： references/color-modes.md

• Light モード（既定の外観、colorMode="Light"）
• コントラストを高める Dark モード（colorMode="Dark"）
• ブランドカラー向けの Primary モード（colorMode="Primary"）
• 親要素の色を継承する Inherit モード（colorMode="Inherit"）
• CSS テーマシステムとの統合

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

📄 参照： references/design-layouts.md

• コンテンツを動的に分配する Spacer 要素
• コンテンツを視覚的にグループ化する Separator 要素
• レスポンシブな AppBar デザインのためのメディアクエリ
• コンポーネントの統合パターン（e-inherit を使用した Menu、Button、DropDownButton）
• SideBar の統合と切り替えパターン
• 実際のデザイン例とベストプラクティス

カスタマイズと高度な機能

📄 参照： references/customization.md

• cssClass プロパティを使用した CSS クラスのカスタマイズ
• htmlAttributes を使用した HTML 属性の設定
• enableRtl="true" による右から左への記述（RTL）のサポート
• enablePersistence="true" によるコンポーネント状態の永続化
• 国際化に向けたロケールのカスタマイズ
• 高度なスタイル設定と特殊なケース

API リファレンスの全文

📄 参照： references/api-reference.md

• 型情報と使用方法を含むすべてのプロパティ
• TagHelper の適切なバインド構文を含むイベント宣言
• 位置、モード、色の列挙値
• 他のリファレンスで扱われていない API のコード例
• API の概要と相互参照

クイックスタートの例

ナビゲーションボタンを備えた基本的な AppBar を作成します。

<div class="col-lg-12 control-section default-appbar-section">
    <ejs-appbar id="defaultAppBar" colorMode="Primary">
        <e-content-template>
            <ejs-button aria-label="menu" id="menuButton" cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
            <span class="regular" style="margin:0 5px">My Application</span>
            <div class="e-appbar-spacer"></div>
            <ejs-button id="trialButton" cssClass="e-inherit" content="Get Started"></ejs-button>
        </e-content-template>
    </ejs-appbar>
</div>

主な要素：

• colorMode="Primary" - ブランドのプライマリカラーのテーマを使用します
• <e-content-template> - AppBar コンテンツのコンテナーです
• cssClass="e-inherit" - ボタンに AppBar の色を継承させます
• <div class="e-appbar-spacer"></div> - コンテンツを反対側へ押しやります

一般的なパターン

パターン 1：タイトルとアクションを備えたトップナビゲーション

<ejs-appbar id="navAppBar" position="Top">
    <e-content-template>
        
        <ejs-button iconCss="e-icons e-menu" cssClass="e-inherit"></ejs-button>
        
        <span style="margin: 0 auto;">Dashboard</span>
        
        <div class="e-appbar-spacer"></div>
        <ejs-button content="Profile" cssClass="e-inherit"></ejs-button>
    </e-content-template>
</ejs-appbar>

パターン 2：ナビゲーションを固定表示するスティッキーヘッダー

<ejs-appbar id="stickyAppBar" isSticky="true" colorMode="Dark">
    <e-content-template>
        
    </e-content-template>
</ejs-appbar>

パターン 3：機能ヘッダー向けの目立つモード

<ejs-appbar id="prominentAppBar" mode="Prominent" colorMode="Primary">
    <e-content-template>
        
    </e-content-template>
</ejs-appbar>

主なプロパティの概要

プロパティ	型	デフォルト	用途
position	AppBarPosition	Top	配置：上または下
mode	AppBarMode	Regular	高さ：Regular、Prominent、または Dense
colorMode	AppBarColor	Light	テーマ：Light、Dark、Primary、または Inherit
isSticky	boolean	false	スクロール中の固定配置
cssClass	string	-	スタイル設定用のカスタム CSS クラス
enableRtl	boolean	false	右から左へ記述する言語のサポート
enablePersistence	boolean	false	ページ再読み込み時の状態の保持
locale	string	en-US	カスタムカルチャとローカライズ
htmlAttributes	Record	-	追加の HTML 属性

一般的なユースケース

1. E コマースのヘッダー：ロゴ、検索、カートアイコンを備えた、上部に固定表示する AppBar
2. ダッシュボードのナビゲーション：パンくずリストとクイックアクションを備えた、目立つ AppBar
3. モバイルナビゲーション：タッチ操作に適したレイアウト向けに、下部に配置した Dense AppBar
4. 管理パネル：ユーザーメニューと通知バッジを備えた、ダークテーマの AppBar
5. コンテンツプラットフォーム：背景画像を使用した Prominent モードの記事特集ヘッダー

---

次のステップ：

• セットアップ手順については、Getting Started Guide を参照してください
• デザイン上の判断については、Positioning と Sizing Modes を参照してください
• API の詳細については、API Reference を参照してください