Sync with Kendo UI Professional

Author: Kendo Bot

docs-aspnet/_config-mvc.yml

@@ -395,6 +395,12 @@ defaults:
     values:
         title_prefix: "MVC ScrollView Component"
 -
+    scope:
+        path: "html-helpers/navigation/appbar"
+    values:
+        title_prefix: "MVC AppBar Component"
+        title: "AppBar"
+
     scope:
         path: "html-helpers/navigation/breadcrumb"
     values:

docs-aspnet/_config.yml

@@ -347,6 +347,8 @@ navigation:
         title: "Layout"
      "html-helpers/navigation":
         title: "Navigation"
+     "html-helpers/navigation/appbar":
+        title: "Appbar"
      "html-helpers/navigation/breadcrumb":
         title: "Breadcrumb"
      "html-helpers/navigation/stepper":
@@ -899,6 +901,11 @@ defaults:
     values:
         title_prefix: "Core ScrollView Component"
 -
+    scope:
+        path: "html-helpers/navigation/appbar"
+    values:
+        title_prefix: "Core AppBar Component"
+
     scope:
         path: "html-helpers/navigation/breadcrumb"
     values:
@@ -1269,6 +1276,11 @@ defaults:
     values:
         title_prefix: "Core ScrollView Component"
 -
+    scope:
+        path: "tag-helpers/navigation/appbar"
+    values:
+        title_prefix: "Core AppBar Component"
+
     scope:
         path: "tag-helpers/navigation/breadcrumb"
     values:

docs-aspnet/html-helpers/navigation/appbar/items.md

@@ -0,0 +1,54 @@
+---
+title: Items
+page_title: Items
+description: "Learn how to configure the items in the AppBar HtmlHelper for {{ site.framework }}."
+slug: htmlhelpers_appbar_aspnetcore_items
+position: 2
+---
+
+# Items
+
+The `Items` represent the content of the AppBar. The `Items` configuration accepts a collection of objects that will be rendered inside the AppBar widget. There are two types of items that developers can choose from:
+
+* [Content Items](#content-items)
+* [Spacer](#spacer)
+
+## Content Items
+
+There are two approaches to using templates with **Content Items**:
+* You can use the `Template` option exposed by `ContentItem` to consume and render HTML. 
+* You can supply a `kendo.template` to the configuration by using the `TemplateId` option. 
+The following example shows how to utilize both of them:
+
+```Razor
+    @(Html.Kendo().AppBar()
+        .Name("appbar")
+        .ThemeColor(AppBarThemeColor.Inherit)
+        .Items(items=> {
+            items.Add().Template("<a class='k-button' href='\\#'><span class='k-icon k-i-menu'></span></a>").Type(AppBarItemType.ContentItem);
+            items.Add().Type(AppBarItemType.Spacer).Width("16px");
+            items.Add().TemplateId("search-template").Type(AppBarItemType.ContentItem);
+        })
+    )
+
+```
+
+## Spacer
+
+The `Spacer` item could be utilized to easily separate the content items from each other.
+
+```Razor
+    @(Html.Kendo().AppBar()
+        .Name("appbar")
+        .Items(items=> {
+            items.Add().Template("<a class='k-button' href='\\#'><span class='k-icon k-i-menu'></span></a>").Type(AppBarItemType.ContentItem);
+            items.Add().Type(AppBarItemType.Spacer).Width("16px");
+            items.Add().Template("<h3>AppBar Demo</h3>").Type(AppBarItemType.ContentItem);
+        })
+    )
+```
+
+## See Also
+
+* [Overview of the AppBar (Demo)](https://demos.telerik.com/{{ site.platform }}/appbar/index)
+* [Server-Side API](/api/appbar)

docs-aspnet/html-helpers/navigation/appbar/overview.md

@@ -0,0 +1,37 @@
+---
+title: Overview
+page_title: Overview
+description: "Get started with the Telerik UI AppBar HtmlHelper for {{ site.framework }}, and learn how to initialize the component."
+slug: htmlhelpers_appbar_aspnetcore_overview
+position: 1
+---
+
+# AppBar Overview
+
+The Telerik UI AppBar HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI AppBar widget.
+
+The AppBar component is mainly used for navigation. At the same time, it is template-driven, which makes it very flexible. To take full advantage of its functionality, you can include various [Content Items]({% slug htmlhelpers_appbar_aspnetcore_items %}) in the AppBar component, for example:
+* Titles
+* Icons
+* Actions (such as redirect buttons or a search panel)
+
+Visit the [AppBar demo page](https://demos.telerik.com/{{ site.platform }}/appbar/index) to see it in action.
+
+## Initializing the AppBar
+
+The following example demonstrates how to define the AppBar by using the AppBar HtmlHelper.
+
+```Razor
+    @(Html.Kendo().AppBar()
+        .Name("appbar")
+    )
+```
+
+## Functionality and Features
+
+* [Items]({% slug htmlhelpers_appbar_aspnetcore_items %})
+* [Position]({% slug htmlhelpers_appbar_aspnetcore_position %})
+
+## See Also
+
+* [Overview of the AppBar (Demo)](https://demos.telerik.com/{{ site.platform }}/appbar/index)

docs-aspnet/html-helpers/navigation/appbar/position.md

@@ -0,0 +1,34 @@
+---
+title: Positioning
+page_title: Positioning
+description: "Learn how to configure the position of the AppBar HtmlHelper for {{ site.framework }}."
+slug: htmlhelpers_appbar_aspnetcore_position
+position: 3
+---
+
+# Positioning
+
+The AppBar widget enables you to set its [Position](#position) and its [Position mode](#position-mode).
+
+## Position
+
+The `Position` option of the Telerik UI AppBar defines where the widget has to be positioned on the page. The predefined position options are the following:
+
+* `None` - no positioning CSS style are applied
+* `Top` - places the AppBar at the top of the page
+* `Bottom` - places the AppBar at the bottom of the page
+
+## Position Mode
+
+The `PositionMode` option defines the position of the component relative to its parent container or viewport. The predefined **Position Mode** options are the following:
+
+* `Static` - positions the AppBar according to the normal flow of the page.
+* `Sticky` - sticks the AppBar to a given position(top or bottom).
+* `Fixed`- positions the AppBar relative to the viewport.
+
+> In order to use the `Sticky` or `Fixed` position mode of the AppBar, the `Position` has to be set either to `Top` or `Bottom`.
+
+## See Also
+
+* [Positioning of the AppBar (Demo)](https://demos.telerik.com/{{ site.platform }}/appbar/position)
+* [Server-Side API](/api/appbar)

docs/_config.yml

@@ -183,6 +183,8 @@ navigation:
         position: 70
     "controls/navigation":
         title: "Navigation"
+    "controls/navigation/appbar":
+        title: "AppBar"
     "controls/navigation/breadcrumb":
         title: "Breadcrumb"
     "controls/navigation/buttongroup":
@@ -2054,6 +2056,7 @@ intro_columns:
   -
     title: "Navigation"
     items:
+      "AppBar": "overview_kendoui_appbar_widget"
       "Breadcrumb": "overview_kendoui_breadcrumb_widget"
       "Button": "overview_kendoui_button_widget"
       "ButtonGroup": "overview_kendoui_buttongroup_widget"