AppBar TagHelper Overview

The Telerik UI AppBar TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI AppBar widget.

The AppBar widget a navigational widget. It is template-driven, which makes it very flexible - it can render whatever you throw at it. To take full advantage of its functionality, you can include various Content Items in the AppBar widget

Visit the Demo page for the AppBar to see it in action.

Telerik UI for ASP.NET Core Ninja image

The AppBar is part of Telerik UI for ASP.NET Core, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Configuration

The following example demonstrates how to initialize the AppBar using the TagHelper wrapper.

    @addTagHelper *, Kendo.Mvc

    <kendo-appbar name="appbar" theme-color="AppBarThemeColor.Inherit">
        <items>
            <appbar-item type="AppBarItemType.ContentItem" template="<a class='k-button' href='\\#'><span class='k-icon k-i-menu'></span></a>"></appbar-item>
            <appbar-item type="AppBarItemType.Spacer" width="16px"></appbar-item>
            <appbar-item type="AppBarItemType.ContentItem" template-id="search-template"></appbar-item>
        </items>   
    </kendo-appbar>

Functionality and Features

  • Items - items can have various attributes like templates, classes and titles
  • Positioning - the AppBar supports different placements and also change its position when the page is scrolled

Events

You can subscribe to the AppBar widget's events.

    @addTagHelper *, Kendo.Mvc

    <kendo-appbar name="appbar" theme-color="AppBarThemeColor.Inherit" on-resize="onResize">
        <items>
            <appbar-item type="AppBarItemType.ContentItem" template="<a class='k-button' href='\\#'><span class='k-icon k-i-menu'></span></a>"></appbar-item>
            <appbar-item type="AppBarItemType.Spacer" width="16px"></appbar-item>
            <appbar-item type="AppBarItemType.ContentItem" template-id="search-template"></appbar-item>
        </items>   
    </kendo-appbar>

    <script>
        function onResize(e){
            //handle the AppBar widget's resize event
        };
    </script>

See Also

In this article
Not finding the help you need? Improve this article