AppBar documentation

_config.yml

@@ -266,6 +266,8 @@ navigation:
  title: "Spreadsheet"
  "*gauges/arc":
  title: "Arc"
+ "*appbar":
+ title: "AppBar"
  "*autocomplete":
  title: "AutoComplete"
  "*avatar":
@@ -603,6 +605,7 @@ intro_columns:
  -
  title: "Layout"
  items:
+ "AppBar": "appbar-overview"
  "Animation Container": "components/animationcontainer/overview"
  "Card": "card-overview"
  "Carousel": "carousel-overview"

components/appbar/appearance.md

@@ -0,0 +1,86 @@
+---
+title: Appearance
+page_title: AppBar Appearance
+description: Appearance settings of the AppBar for Blazor.
+slug: appbar-appearance
+tags: telerik,blazor,appbar,navbar,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+This article outlines the available AppBar parameters, which control its appearance.
+
+## Size
+
+You can change the color of the AppBar by setting the `ThemeColor` parameter to a member of the `Telerik.Blazor.ThemeConstants.AppBar.ThemeColor` class:
+
+| Class members | Manual declarations |
+|---------------|--------|
+| `Base` | `base` |
+| `Primary` | `primary`|
+| `Secondary` | `secondary`|
+| `Tertiary` | `tertiary`|
+| `Info` | `info` |
+| `Success` | `success`|
+| `Warning` | `warning`|
+| `Error` | `error` |
+| `Dark` | `dark` |
+| `Light` | `light` |
+| `Inverse` | `inverse`|
+
+>caption The built-in AppBar colors
+
+````CSHTML
+<TelerikDropDownList Data="@ThemeColors" @bind-Value="@SelectedColor" Width="150px"></TelerikDropDownList>
+
+<TelerikAppBar ThemeColor="@SelectedColor">
+ <AppBarSection>
+ <span>Our Logo</span>
+ </AppBarSection>
+
+ <AppBarSpacer Size="25%"></AppBarSpacer>
+
+ <AppBarSection>
+ <span>Our Products</span>
+ </AppBarSection>
+
+ <AppBarSpacer Size="50px"></AppBarSpacer>
+
+ <AppBarSection>
+ <span>Our Mission</span>
+ </AppBarSection>
+
+ <AppBarSpacer></AppBarSpacer>
+
+ <AppBarSection>
+ <TelerikSvgIcon Icon="@SvgIcon.User"></TelerikSvgIcon>
+ </AppBarSection>
+
+ <AppBarSeparator></AppBarSeparator>
+
+ <AppBarSection>
+ <TelerikSvgIcon Icon="@SvgIcon.Logout"></TelerikSvgIcon>
+ </AppBarSection>
+</TelerikAppBar>
+
+@code {
+ private string SelectedColor { get; set; } = "base";
+
+ private List<string> ThemeColors { get; set; } = new List<string>()
+ {
+ "base",
+ "primary",
+ "secondary",
+ "tertiary",
+ "info",
+ "success",
+ "warning",
+ "error",
+ "dark",
+ "light",
+ "inverse"
+ };
+}
+````

components/appbar/overview.md

@@ -0,0 +1,132 @@
+---
+title: Overview
+page_title: AppBar Overview
+description: Overview of the AppBar component for Blazor.
+slug: appbar-overview
+tags: telerik,blazor,appbar,navbar
+published: True
+position: 0
+---
+
+# Blazor AppBar Overview
+
+The <a href = "https://www.telerik.com/blazor-ui/appbar" target="_blank">Blazor AppBar component</a> helps you build navigation bars for your application seemingly. This article explains the available features.
+
+## Creating Blazor AppBar
+
+1. Add the `<TelerikAppBar>` tag to a Razor file.
+1. Use the `<AppBarSection>` child tag to add content to the AppBar component.
+1. (optional) Use [spacers or separators](#content-dividers) to add visual distinction between the sections in the AppBar.
+1. (optional) Set the [position](#positioning) of the AppBar.
+
+>caption Basic configuration of the Telerik AppBar
+
+````CSHTML
+<TelerikAppBar>
+ <AppBarSection>
+ <span>Our Logo</span>
+ </AppBarSection>
+
+ <AppBarSpacer Size="25%"></AppBarSpacer>
+
+ <AppBarSection>
+ <span>Our Products</span>
+ </AppBarSection>
+
+ <AppBarSpacer Size="50px"></AppBarSpacer>
+
+ <AppBarSection>
+ <span>Our Mission</span>
+ </AppBarSection>
+
+ <AppBarSpacer Size="5vw"></AppBarSpacer>
+
+ <AppBarSection>
+ <span>Contact Us</span>
+ </AppBarSection>
+
+ <AppBarSpacer></AppBarSpacer>
+
+ <AppBarSection>
+ <TelerikSvgIcon Icon="@SvgIcon.User"></TelerikSvgIcon>
+ </AppBarSection>
+
+ <AppBarSeparator></AppBarSeparator>
+
+ <AppBarSection>
+ <TelerikSvgIcon Icon="@SvgIcon.Logout"></TelerikSvgIcon>
+ </AppBarSection>
+</TelerikAppBar>
+````
+
+## AppBar Sections
+
+Use the AppBar Sections to render arbitrary HTML content to match the UI and UX needs of your application. [Read more about the Blazor AppBar sections]({%slug appbar-section%}).
+
+## Content Dividers
+
+The AppBar features separators and spacers that can visually divide the component items. [Read more about the Blazor AppBar separators and spacers.]({%slug appbar-separators%}).
+
+## Positioning
+
+You can control the position of the AppBar and how the component behaves according to the flow of the page. [Read more about the Blazor AppBar positioning.]({%slug appbar-position%}).
+
+## AppBar Parameters
+
+The Blazor AppBar provides parameters to configure the component:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Description |
+| ----------- | ----------- | ----------- |
+| `Class` | `string` | The CSS class to be rendered on the main wrapping element of the AppBar component, which is `<div class="k-appbar">`. Use for [styling customizations]({%slug themes-override%}). |
+| `Height` | `string` | The height of the AppBar. |
+| `Position` | `AppBarPosition` <br /> (`None`) | The position of the AppBar on the page. [Read more about AppBar positioning.]({%slug appbar-position%}) |
+| `PositionMode` | `AppBarPosition` <br /> (`Static`) | Sets how the AppBar is positioned according to the flow of the document. [Read more about AppBar positioning.]({%slug appbar-position%}) |
+| `Width` | `string` | The width of the AppBar |
+
+### Styling and Appearance
+
+The following parameters enable you to customize the appearance of the Blazor AppBar:
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `ThemeColor` | `Telerik.Blazor.ThemeConstants.AppBar.ThemeColor` | Adjust the color of the AppBar |
+
+You can find more information for customizing the AppBar appearance in the [Appearance article]({%slug appbar-appearance%}).
+
+## AppBar Reference and Methods
+
+To execute AppBar methods, obtain reference to the component instance via `@ref`.
+
+| Method | Description |
+|---------|-------------|
+| `Refresh` | Use the method to programmatically re-render the AppBar. |
+
+<div class="skip-repl"></div>
+
+````CSHTML
+<TelerikButton OnClick="@RefreshAppBar">Refresh AppBar</TelerikButton>
+
+<TelerikAppBar @ref="AppBarRef" />
+
+@code {
+private TelerikAppBar AppBarRef { get; set; }
+
+private void RefreshAppBar()
+{
+AppBarRef.Refresh();
+}
+}
+````
+
+## Next Steps
+
+* [Explore the AppBar Sections]({%slug appbar-sections%})
+* [Use the AppBar Content]({%slug appbar-separators%})
+* [Customize the AppBar positioning options]({%slug appbar-position%})
+
+## See Also
+
+* [Live AppBar Demos](https://demos.telerik.com/blazor-ui/appbar/overview)
+* [AppBar API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikAppBar)

components/appbar/position.md

@@ -0,0 +1,41 @@
+---
+title: Position
+page_title: AppBar Position
+description: Position settings of the AppBar for Blazor.
+slug: appbar-position
+tags: telerik,blazor,appbar,navbar,position
+published: True
+position: 35
+---
+
+# Position Settings
+
+This article outlines the available AppBar parameters, which control its position.
+
+>note Read the [CSS positioning MDN documentation article](https://developer.mozilla.org/en-US/docs/Web/CSS/position) to get a better understanding of how the AppBar component positioning work.
+
+## Position
+
+The `Position` parameter accepts a member of the `AppBarPosition` enum and sets the `top` and `bottom` CSS properties:
+
+| Enum members | Description |
+|---------------|--------|
+| `None` <br /> default value | Does not set any values for the `top` and `bottom` CSS properties. |
+| `Top` | Sets the `top: 0` and `bottom: auto` CSS properties. |
+| `Bottom` | Sets the `top: auto` and `bottom: 0` CSS properties. | 
+
+>info The `Position` parameter takes effect when used with fixed [PositionMode](#positionmode).
+
+## PositionMode
+
+The `PositionMode` parameter accepts a member of the `AppBarPositionMode` enum and sets how the AppBar is positioned according to the [flow of the document](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow):
+
+| Enum members | Description |
+|---------------|--------|
+| `Static` <br /> default value | The AppBar is positioned according to the normal flow of the document. |
+| `Fixed` | The AppBar is removed from the normal document flow, and no space is created for the element in the page layout. The component is positioned relatively to the viewport of the application. |
+| `Sticky` | The AppBar is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor | 
+
+## See Also
+
+ * [Live Demo: AppBar Position](https://demos.telerik.com/blazor-ui/appbar/position)

components/appbar/sections.md

@@ -0,0 +1,59 @@
+---
+title: Sections
+page_title: AppBar - Sections
+description: Add Content in the AppBar Component
+slug: appbar-sections
+tags: telerik,blazor,appbar,sections,section,content
+published: True
+position: 1
+---
+
+# Sections
+
+The `<AppBarSection>` is a template-based component that allows you to render arbitrary HTML content in the AppBar component.
+
+>note Render content only inside the `<AppBarSection>` tag, otherwise it will render 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` <br /> `true` | Specifies if the section will be visible in the AppBar. |
+
+>caption The Telerik AppBar sections with its parameter
+
+````CSHTML
+@* 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;
+}
+````
+
+## See Also
+
+ * [Live Demo: AppBar Overview](https://demos.telerik.com/blazor-ui/appbar/overview)
+ * [AppBar Overview]({%slug appbar-overview%})