Overview
The AppBar allows you to arrange the layout of its content by splitting it into sections, defining spacings and separators or simply place any content "as is".
To arrange the content and the layout of the AppBar, you could use:
Sections
The AppBarSection
component allows you to place HTML elements or Angular components, by wrapping them inside a kendo-appbar-section
tag. AppBar sections provide a better layout structure, alignment styling and control over the content arrangement.
The following example demonstrates the AppBarSection
component in action.
Spacings
To define spacing between the AppBar sections, you can use the AppBarSpacer
, which gives an additional white space in the content layout. By default the kendo-appbar-spacer
element takes all the available space. To override this behavior and specify custom size, you could use the width
property.
Separators
Separators are used to create a visual separation of the AppBar content. To add a separator, add the k-appbar-separator
class on a span
element.