Getting Started with the AppBar
This guide demonstrates how to get up and running with the Kendo UI for jQuery AppBar.
After the completion of this guide, you will be able to achieve the following end result:
<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
items: [
{
type: "contentItem",
template: "<span><input /><span>"
},
{
type: "spacer"
},
{
type: "contentItem",
template: "<h1>This is just a text</h1>"
},
]
});
</script>
1. Create an Empty Div Element
First, create an empty <div> element on the page that will serve as the main container of the AppBar component.
<div id="appbar"></div>
2. Initialize the AppBar
In this step, you will initialize the AppBar from the empty <div> element. All settings of the AppBar will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<div id="appbar"></div>
<script>
// Target the div element by using jQuery and then call the kendoAppBar() method.
$("#appbar").kendoAppBar();
</script>
3. Add Content in the AppBar
You fill the AppBar with content of your choice through the items configuration.
<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
items: [
{
type: "contentItem",
template: "<span><input /><span>"
},
{
type: "spacer"
},
{
type: "contentItem",
template: "<h1>This is just a text</h1>"
},
]
});
</script>