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
There are two approaches to using templates with Content Items:
- You can use the
Template
option exposed byContentItem
to consume and render HTML. - You can supply a
kendo.template
to the configuration by using theTemplateId
option. The following example shows how to utilize both of them:
@(Html.Kendo().AppBar()
.Name("appbar")
.ThemeColor(AppBarThemeColor.Inherit)
.Items(items=> {
items.Add().Template("<a class='k-button k-button-solid-base k-button-solid k-button-md k-rounded-md' href='\\#'><span class='k-icon k-i-menu'></span></a>").Type(AppBarItemType.ContentItem);
items.Add().TemplateId("search-template").Type(AppBarItemType.ContentItem);
})
)
<script id="search-template" type="text/x-kendo-tmpl">
<span class="k-textbox k-display-flex">
<input autocomplete="off" placeholder="Search..." title="Search..." class="k-input">
<span class="k-input-icon">
<span class="k-icon k-i-search"></span>
</span>
</span>
</script>
Spacer
The Spacer
item could be utilized to easily separate the content items from each other.
@(Html.Kendo().AppBar()
.Name("appbar")
.Items(items=> {
items.Add().Template("<a class='k-button k-button-solid-base k-button-solid k-button-md k-rounded-md' 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);
})
)