Sections
The <AppBarSection> is a template-based component that allows you to render HTML content or Razor components in the AppBar component.
Render content only inside the
<AppBarSection>tag, otherwise it will display outside the AppBar component.
AppBar Section Parameters
The nested AppBarSection tag exposes parameters:
| Parameter | Type and Default Value | Description |
|---|---|---|
Class |
string |
The CSS class that will be rendered on the main wrapping element of the AppBar section. You could use that class to cascade styles. |
Visible |
bool ( true) |
Specifies if the section will be visible in the AppBar. |
The Telerik AppBar sections with its parameter
@* The AppBar sections with its parameters *@
<style>
.products-section-class {
font-weight: bolder;
}
</style>
<TelerikButton OnClick="@(() => isSectionVisible = !isSectionVisible)">Toggle the visibility of the Our Mission section</TelerikButton>
<br />
<TelerikAppBar>
<AppBarSection Class="products-section-class">
<span>Our Products</span>
</AppBarSection>
<AppBarSection Visible="@isSectionVisible">
<span>Our Mission</span>
</AppBarSection>
</TelerikAppBar>
@code{
private bool isSectionVisible { get; set; } = true;
}