syncfusion-blazor-appbar

Syncfusion Blazor AppBar コンポーネント

Syncfusion Blazor AppBar は、現在のアプリケーション画面に関連する情報やアクションを表示するナビゲーションコンポーネントです。外観や動作を柔軟に設定でき、アプリケーション全体でブランディング、ナビゲーション、アクションに一貫性のあるヘッダー領域を提供します。

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

以下を必要とする Blazor アプリケーションで AppBar を実装する際に、このスキルを使用します。

• ナビゲーションヘッダー：ブランディング、メニュー、アクションボタンを配置します
• アプリケーションツールバー：コンテキストに応じたアクションやコントロールを配置します
• レスポンシブヘッダー：さまざまな画面サイズに合わせて調整します
• 固定またはスティッキー配置：ビューポートの上部または下部に配置します
• 他のコンポーネントとの統合：メニュー、ボタン、サイドバーなどと連携します
• カスタムスタイル：アプリケーションのテーマやブランディングに合わせます

コンポーネントの概要

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

• 柔軟なレイアウト：スペーサーやセパレーターでコンテンツを整理できます
• 複数のサイズモード（Regular、Prominent、Dense）：用途に応じて選択できます
• 複数のカラー モード（Light、Dark、Primary、Inherit）：テーマに合わせて設定できます
• 配置オプション（Top、Bottom、Sticky）：レイアウトを制御できます
• 子コンポーネントのサポート：ボタン、メニュー、ドロップダウン、カスタムコンテンツを配置できます
• レスポンシブデザイン：メディアクエリーに対応しています

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

はじめにとインストール

📄 参照： references/getting-started.md

次の作業が必要な場合は、このリファレンスを参照してください。

• Syncfusion Blazor AppBar パッケージをインストールして設定する
• 必要な名前空間とサービス登録を追加する
• スタイルシートとスクリプトのリソースを含める
• 最初の基本的な AppBar を実装する
• AppBar にボタンとスペーサーを追加する
• コンポーネントの基本構造と使い方を理解する

サイズとカラーの設定

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

次の作業が必要な場合は、このリファレンスを参照してください。

• サイズモード（Regular、Prominent、Dense）で AppBar の高さを設定する
• 標準的な高さのナビゲーションに Regular AppBar を使用する
• 大きなタイトル、画像、ヒーローセクションに Prominent AppBar を実装する
• コンパクトで省スペースなヘッダーに Dense AppBar を適用する
• カラーモード（Light、Dark、Primary、Inherit）を設定する
• デフォルトの明るい背景に Light モードを適用する
• ダークテーマのアプリケーションに Dark モードを適用する
• テーマのプライマリカラーを使用する Primary モードを適用する
• 親要素のスタイルを使用する Inherit モードを適用する
• サイズモードとカラーモードを組み合わせて、さまざまな視覚効果を設定する

配置オプション

📄 参照： references/positioning.md

次の作業が必要な場合は、このリファレンスを参照してください。

• Position プロパティで AppBar の位置を制御する
• デフォルトの Top AppBar 配置を実装する
• 下部に固定するナビゲーション用に Bottom AppBar を実装する
• IsSticky プロパティで Sticky AppBar の動作を有効にする
• スティッキー配置でスクロール時の動作を処理する
• 配置された AppBar の周囲のコンテンツレイアウトを管理する
• ページコンテンツと配置設定の相互作用を理解する

UI 要素のデザイン

📄 参照： references/design-ui.md

次の作業が必要な場合は、このリファレンスを参照してください。

• AppBarSpacer コンポーネントで間隔を追加する
• AppBarSeparator コンポーネントで視覚的な区切りを追加する
• メディアクエリーでレスポンシブデザインを実装する
• ナビゲーションメニューに SfMenu コンポーネントを統合する
• アクションに SfButton と SfDropDownButton を統合する
• AppBar の切り替えボタンで SfSidebar を統合する
• AppBar からサイドバーの展開と折りたたみを制御する
• e-inherit CSS クラスで子コンポーネントのスタイルを設定する
• 複数のコンポーネントを使って複雑な AppBar レイアウトを構築する

スタイリングとカスタマイズ

📄 お読みください： references/styling.md

次の操作を行う必要がある場合は、このリファレンスをお読みください。

• CSS クラスを使って AppBar の外観をカスタマイズする
• カスタムスタイリングに CssClass プロパティを使用する
• 特定の要素のデフォルト CSS を上書きする
• カスタムの背景色とフォント色を適用する
• 追加の HTML 属性に HtmlAttributes を使用する
• カスタムの aria-label 属性を追加する
• テーマ設定のために Theme Studio と連携する
• CSS 変数の上書きを適用する
• 使用可能な CSS クラスセレクターを確認する

クイックスタートの例

ナビゲーション付きの基本的な AppBar を作成する簡単な例を紹介します。

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="app-title">My Application</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Login"></SfButton>
</SfAppBar>

前提条件：

1. Syncfusion.Blazor.Navigations パッケージをインストールします
2. _Imports.razor に @using Syncfusion.Blazor.Navigations を追加します
3. builder.Services.AddSyncfusionBlazor() でサービスを登録します
4. index.html にテーマ CSS と Syncfusion スクリプトを含めます

一般的なパターン

ロゴとアクションを備えたアプリケーションヘッダー

<SfAppBar ColorMode="AppBarColor.Light">
    <a href="/" class="logo-link">
        <img src="logo.svg" alt="Company Logo" height="30" />
    </a>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Features"></SfButton>
    <SfButton CssClass="e-inherit" Content="Pricing"></SfButton>
    <SfButton CssClass="e-inherit" Content="About"></SfButton>
    <AppBarSeparator></AppBarSeparator>
    <SfButton IsPrimary="true" Content="Sign Up"></SfButton>
</SfAppBar>

メニュートグル付きのレスポンシブ AppBar

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu" @onclick="ToggleMenu"></SfButton>
    <span class="app-title">Dashboard</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-settings"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

ナビゲーションメニュー付きの固定 AppBar

<SfAppBar ColorMode="AppBarColor.Dark" IsSticky="true">
    <span class="brand">MyApp</span>
    <SfMenu CssClass="e-inherit" TValue="MenuItem">
        <MenuItems>
            <MenuItem Text="Home"></MenuItem>
            <MenuItem Text="Products">
                <MenuItems>
                    <MenuItem Text="Product 1"></MenuItem>
                    <MenuItem Text="Product 2"></MenuItem>
                </MenuItems>
            </MenuItem>
            <MenuItem Text="Contact"></MenuItem>
        </MenuItems>
    </SfMenu>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Account"></SfButton>
</SfAppBar>

モバイル操作向けの下部 AppBar

<SfAppBar ColorMode="AppBarColor.Primary" Position="AppBarPosition.Bottom">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-search"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-heart"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

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

プロパティ	型	デフォルト	説明
ColorMode	AppBarColor	Light	背景色モードを設定します（Light、Dark、Primary、Inherit）
Mode	AppBarMode	Regular	高さモードを設定します（Regular、Prominent、Dense）
Position	AppBarPosition	Top	位置を設定します（Top、Bottom）
IsSticky	bool	false	スクロール時の固定動作を有効にします
CssClass	string	-	スタイリング用のカスタム CSS クラス
HtmlAttributes	Dictionary	-	追加の HTML 属性

子コンポーネント

コンポーネント	目的	使用方法
AppBarSpacer	要素間に可変の間隔を追加します	要素間に配置して、要素同士を離します
AppBarSeparator	縦の区切り線を追加します	関連する項目のグループ間に配置します
SfButton	e-inherit スタイルのアクションボタン	AppBar のテーマに合わせるには CssClass="e-inherit" を使用します
SfMenu	ナビゲーションメニューとの連携	一貫したスタイルにするには CssClass="e-inherit" を使用します

一般的なユースケース

1. メインアプリケーションのナビゲーション

ロゴ、メニュー項目、ユーザー操作を備えたメインナビゲーションヘッダーを作成します。

用途： Web アプリケーションのメインナビゲーションを構築する場合 パターン： ロゴ + メニュー項目 + スペーサー + ユーザー操作 リファレンス： design-ui.md

2. ダッシュボードヘッダー

状況に応じた操作やコントロールを備えたダッシュボードツールバーを実装します。

用途： 管理ダッシュボードやデータを重視するアプリケーションを構築する場合 パターン： メニュートグル + タイトル + スペーサー + アクションボタン リファレンス： design-ui.md

3. モバイル向け下部ナビゲーション

アイコンボタンを備えた、モバイルに最適化された下部ナビゲーションバーを作成します。

用途： モバイル対応アプリケーションを構築する場合 パターン： 下部配置 + アイコンボタン リファレンス： positioning.md

4. ヒーローセクションのヘッダー

大きなタイトルや画像を備えた、ランディングページ向けの目立つ AppBar を実装します。

用途： マーケティングページやランディングページを作成する場合 パターン： Prominent モード + カスタム背景 + 大きなタイポグラフィ リファレンス： size-and-color.md

5. コンパクトなツールバー

縦方向のスペースが限られたアプリケーション向けに、省スペースのツールバーを作成します。

用途： データ量の多いアプリケーションやツールを構築する場合 パターン： Dense モード + アイコンボタン + 区切り線 リファレンス： size-and-color.md

6. サイドバー切り替えナビゲーション

ナビゲーション用サイドバーの表示を制御する AppBar を実装します。

用途： 折りたたみ可能なサイドナビゲーションを備えたアプリケーションを構築する場合 パターン： メニューボタン + タイトル + スペーサー + アクション + サイドバー連携 リファレンス： design-ui.md

成功させるためのヒント

• 子ボタンやメニューには e-inherit CSS クラスを使用し、AppBar のカラースキームを継承させます
• AppBarSpacer を組み合わせて、コンテンツに応じて柔軟に調整されるレイアウトを作成します
• 画面サイズごとにメディアクエリを使用して、レスポンシブな動作をテストします
• スクロール中もナビゲーションを表示したままにするには、スティッキー配置を検討します
• デフォルトのスタイルを直接上書きするのではなく、CssClass でカスタマイズします
• 状況に合わせてサイズモードを選びます。標準的なアプリには Regular、ヒーローには Prominent、ツールには Dense を使用します