agentsclimarketplace

Syncfusion aspnetcore appbar

Skill syncfusion/aspnetcore-ui-components-skills/skills/syncfusion-aspnetcore-appbar

This repository contains AI Skills of ASPNET Core UI Components

Install
npx -y skills add syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-appbar

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Implement Syncfusion AppBar component to provide consistent top-level navigation and actions in your ASP.NET Core applications.

SKILL.md

7.8 KB, as published. Nobody here has run it

Implementing Syncfusion AppBar

When to Use This Skill

Use the AppBar component when you need to:

  • Create top or bottom navigation bars with consistent branding and action placement
  • Display application titles and branding with sizing flexibility (regular, prominent, or dense modes)
  • Provide multiple color themes to match application design (light, dark, primary, or inherited colors)
  • Support responsive layouts that adapt to different screen sizes with media queries
  • Integrate navigation elements like menus, buttons, and sidebars using the inheritance system
  • Implement sticky/fixed positioning for persistent access to top-level actions during scrolling
  • Support right-to-left (RTL) languages with built-in directional support

Component Overview

The Syncfusion AppBar is a flexible header component that displays information and actions related to the current application screen. It provides:

  • Positioning Options: Top (default) or bottom placement
  • Size Flexibility: Regular (default), Prominent (larger), or Dense (compressed) heights
  • Color Modes: Light, Dark, Primary, or Inherit from parent
  • Sticky Support: Fixed positioning during page scrolling via isSticky property
  • Content Layout: Spacer and Separator elements for organizing content
  • Component Integration: Seamless styling for nested Button, DropDownButton, Menu, and TextBox via e-inherit CSS class
  • Responsive Design: Full media query support for adaptive layouts
  • Localization: Custom locale support with RTL rendering

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

  • Prerequisites and system requirements verification
  • Project creation using Microsoft Templates or Syncfusion Extension
  • NuGet package installation and configuration
  • Tag Helper registration in _ViewImports.cshtml
  • Stylesheet and script references (CDN setup)
  • Script Manager registration
  • Basic AppBar implementation
  • First render and verification

Positioning and Layout

📄 Read: references/positioning.md

  • Top positioning behavior (default)
  • Bottom positioning with position="Bottom" property
  • Sticky positioning for fixed headers with isSticky="true"
  • Combining position with responsive design
  • Real-world navigation patterns and use cases

Sizing Modes

📄 Read: references/sizing-modes.md

  • Regular mode (default height, mode="Regular")
  • Prominent mode for larger content (mode="Prominent")
  • Dense mode for compact layouts (mode="Dense")
  • Use case guidance and content adaptation per mode
  • Height customization strategies

Color and Theme Modes

📄 Read: references/color-modes.md

  • Light mode (default appearance, colorMode="Light")
  • Dark mode for contrast (colorMode="Dark")
  • Primary mode for brand colors (colorMode="Primary")
  • Inherit mode for parent element colors (colorMode="Inherit")
  • Integration with CSS theme system

Design Patterns and Layouts

📄 Read: references/design-layouts.md

  • Spacer element for dynamic content distribution
  • Separator element for visual content grouping
  • Media queries for responsive AppBar design
  • Component integration patterns (Menu, Button, DropDownButton with e-inherit)
  • SideBar integration and toggle patterns
  • Real-world design examples and best practices

Customization and Advanced Features

📄 Read: references/customization.md

  • CSS class customization via cssClass property
  • HTML attributes configuration via htmlAttributes
  • Right-to-left (RTL) support with enableRtl="true"
  • Component state persistence with enablePersistence="true"
  • Locale customization for internationalization
  • Advanced styling and edge cases

Complete API Reference

📄 Read: references/api-reference.md

  • All properties with type information and usage
  • Event declarations with proper TagHelper binding syntax
  • Enumeration values for position, mode, and color
  • Code examples for APIs not covered in other references
  • API summary and cross-references

Quick Start Example

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 content
  • cssClass="e-inherit" - Buttons inherit AppBar colors
  • <div class="e-appbar-spacer"></div> - Pushes content to opposite sides

Common Patterns

Pattern 1: Top Navigation with Title and Actions

<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>

Pattern 2: Sticky Header for Persistent Navigation

<ejs-appbar id="stickyAppBar" isSticky="true" colorMode="Dark">
    <e-content-template>
        <!-- Sticky content remains visible during scroll -->
    </e-content-template>
</ejs-appbar>

Pattern 3: Prominent Mode for Feature Headers

<ejs-appbar id="prominentAppBar" mode="Prominent" colorMode="Primary">
    <e-content-template>
        <!-- Larger area for rich content, titles, images -->
    </e-content-template>
</ejs-appbar>

Key Properties Overview

PropertyTypeDefaultPurpose
positionAppBarPositionTopPlacement: Top or Bottom
modeAppBarModeRegularHeight: Regular, Prominent, or Dense
colorModeAppBarColorLightTheme: Light, Dark, Primary, or Inherit
isStickybooleanfalseFixed positioning during scroll
cssClassstring-Custom CSS classes for styling
enableRtlbooleanfalseRight-to-left language support
enablePersistencebooleanfalseState persistence between page reloads
localestringen-USCustom culture and localization
htmlAttributesRecord-Additional HTML attributes

Common Use Cases

  1. E-Commerce Header: Top sticky AppBar with logo, search, and cart icon
  2. Dashboard Navigation: Prominent AppBar with breadcrumbs and quick actions
  3. Mobile Navigation: Dense AppBar with bottom positioning for touch-friendly layouts
  4. Admin Panel: Dark themed AppBar with user menu and notification badges
  5. Content Platform: Featured article header using Prominent mode with image background

Next Steps:

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.