메뉴
Implement Syncfusion AppBar component to provide consistent top-level navigation and actions in your ASP.NET Core applications.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Guide for implementing Syncfusion 3D Chart in ASP.NET Core. Always use this skill when user needs 3D chart functionality, data visualization, series configuration, axes setup, or interactive chart features like tooltips and selection. Covers setup, data binding, chart types, styling, and user interactions.
Implement Syncfusion ASP.NET Core Accumulation Charts for proportional data visualization. Use this when creating pie charts, doughnut charts, pyramid charts, or funnel charts in ASP.NET Core applications. This skill covers chart setup, data binding, legends, tooltips, data labels, grouping, and accessibility features. Suitable for visualizing market share, sales distribution, survey results, and other percentage-based data representations.
Guide for implementing Syncfusion Bullet Chart in ASP.NET Core applications. Use this skill when building comparative performance visualizations, KPI dashboards, progress tracking, goal comparison charts, or any scenario requiring actual vs. target value display. Bullet charts effectively compare actual performance against target benchmarks in a compact format—ideal for dashboards, executive summaries, and performance monitoring systems. Trigger when user mentions bullet chart, performance comparison, target visualization, KPI dashboard, progress bars with targets.
Comprehensive guide for implementing Syncfusion ASP.NET Core Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Use this skill ALWAYS and immediately when the user asks about any Syncfusion ASP.NET Core calendar, date picker, date range picker, time picker, datetime picker, calendar views, multi-selection, Islamic calendar, date range restriction, week numbers, day cell customization, renderDayCell, date selection, range selection, date formatting, date masking, globalization, localization, strict mode, accessibility, or any related calendar/date/time UI in ASP.NET Core tag helper applications.
Implements Syncfusion ASP.NET Core Chart (SfChart) for data visualization. Use this when building charts, visualizing time-series or categorical data, or creating dashboards. Covers series configuration (line, bar, pie), axes, tooltips, legends, and customization for ASP.NET Core applications.
Create interactive 3D Circular Charts with Syncfusion ASP.NET Core. Implement pie/donut series, data labels, legends, tooltips, custom styling, titles, empty point handling, and print/export functionality. Use this skill when the user needs to build or configure pie charts, donut charts, circular data visualizations, or charts showing proportional data in ASP.NET Core applications.
| name | syncfusion-aspnetcore-appbar |
| description | Implement Syncfusion AppBar component to provide consistent top-level navigation and actions in your ASP.NET Core applications. |
| metadata | {"author":"Syncfusion Inc","version":"33.1.44","category":"Navigation Components"} |
Use the AppBar component when you need to:
The Syncfusion AppBar is a flexible header component that displays information and actions related to the current application screen. It provides:
isSticky propertye-inherit CSS class📄 Read: references/getting-started.md
📄 Read: references/positioning.md
position="Bottom" propertyisSticky="true"📄 Read: references/sizing-modes.md
mode="Regular")mode="Prominent")mode="Dense")📄 Read: references/color-modes.md
colorMode="Light")colorMode="Dark")colorMode="Primary")colorMode="Inherit")📄 Read: references/design-layouts.md
e-inherit)📄 Read: references/customization.md
cssClass propertyhtmlAttributesenableRtl="true"enablePersistence="true"📄 Read: references/api-reference.md
Create a basic AppBar with navigation buttons:
<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>
Key Elements:
colorMode="Primary" - Uses primary brand color theme<e-content-template> - Container for AppBar contentcssClass="e-inherit" - Buttons inherit AppBar colors<div class="e-appbar-spacer"></div> - Pushes content to opposite sides<ejs-appbar id="navAppBar" position="Top">
<e-content-template>
<!-- Left: Logo/Menu -->
<ejs-button iconCss="e-icons e-menu" cssClass="e-inherit"></ejs-button>
<!-- Center: Title -->
<span style="margin: 0 auto;">Dashboard</span>
<!-- Right: User Actions -->
<div class="e-appbar-spacer"></div>
<ejs-button content="Profile" cssClass="e-inherit"></ejs-button>
</e-content-template>
</ejs-appbar>
<ejs-appbar id="stickyAppBar" isSticky="true" colorMode="Dark">
<e-content-template>
<!-- Sticky content remains visible during scroll -->
</e-content-template>
</ejs-appbar>
<ejs-appbar id="prominentAppBar" mode="Prominent" colorMode="Primary">
<e-content-template>
<!-- Larger area for rich content, titles, images -->
</e-content-template>
</ejs-appbar>
| Property | Type | Default | Purpose |
|---|---|---|---|
position | AppBarPosition | Top | Placement: Top or Bottom |
mode | AppBarMode | Regular | Height: Regular, Prominent, or Dense |
colorMode | AppBarColor | Light | Theme: Light, Dark, Primary, or Inherit |
isSticky | boolean | false | Fixed positioning during scroll |
cssClass | string | - | Custom CSS classes for styling |
enableRtl | boolean | false | Right-to-left language support |
enablePersistence | boolean | false | State persistence between page reloads |
locale | string | en-US | Custom culture and localization |
htmlAttributes | Record | - | Additional HTML attributes |
Next Steps: