Skip to content

Commit 775f7e4

Browse files
svdimitrdimodiyordan-mitev
authored
AppBar documentation (#1749)
* docs(appbar): overview and docs structure * docs(appbar): position article * docs(appbar): sections article * docs(appbar): separators article * docs(appbar): use the correct snippet in the separators article * docs(appbar): appearance article * docs(appbar): add the component to the config file * Update components/appbar/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(appbar): remove the position step from overview * Update components/appbar/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/appbar/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/appbar/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/appbar/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/appbar/appearance.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/appbar/position.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/appbar/position.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(appbar): link the API from AppBar parameters * Update components/appbar/sections.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/appbar/sections.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/appbar/sections.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(appbar): beautify the snippet in the overview article * docs(appbar): move the class, width, and height to style table * docs(appbar): fix the next steps * Update components/appbar/separators.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/appbar/separators.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update components/appbar/separators.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(appbar): use singular in both columns * docs(appbar): improve positions article * docs(appbar): imrpove Spacer docs * Update components/appbar/overview.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/appbar/overview.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/appbar/separators.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/appbar/separators.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/appbar/separators.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/appbar/separators.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/appbar/overview.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
1 parent a26985a commit 775f7e4

File tree

6 files changed

+410
-0
lines changed

6 files changed

+410
-0
lines changed

‎_config.yml

+3
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,8 @@ navigation:
266266
title: "Spreadsheet"
267267
"*gauges/arc":
268268
title: "Arc"
269+
"*appbar":
270+
title: "AppBar"
269271
"*autocomplete":
270272
title: "AutoComplete"
271273
"*avatar":
@@ -603,6 +605,7 @@ intro_columns:
603605
-
604606
title: "Layout"
605607
items:
608+
"AppBar": "appbar-overview"
606609
"Animation Container": "components/animationcontainer/overview"
607610
"Card": "card-overview"
608611
"Carousel": "carousel-overview"

‎components/appbar/appearance.md

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: Appearance
3+
page_title: AppBar Appearance
4+
description: Appearance settings of the AppBar for Blazor.
5+
slug: appbar-appearance
6+
tags: telerik,blazor,appbar,navbar,appearance
7+
published: True
8+
position: 35
9+
---
10+
11+
# Appearance Settings
12+
13+
This article outlines the available AppBar parameters, which control its appearance.
14+
15+
## ThemeColor
16+
17+
You can change the color of the AppBar by setting the `ThemeColor` parameter to a member of the `Telerik.Blazor.ThemeConstants.AppBar.ThemeColor` class:
18+
19+
| Class members | Manual declarations |
20+
|---------------|--------|
21+
| `Base` | `base` |
22+
| `Primary` | `primary`|
23+
| `Secondary` | `secondary`|
24+
| `Tertiary` | `tertiary`|
25+
| `Info` | `info` |
26+
| `Success` | `success`|
27+
| `Warning` | `warning`|
28+
| `Error` | `error` |
29+
| `Dark` | `dark` |
30+
| `Light` | `light` |
31+
| `Inverse` | `inverse`|
32+
33+
>caption The built-in AppBar colors
34+
35+
````CSHTML
36+
<TelerikDropDownList Data="@ThemeColors" @bind-Value="@SelectedColor" Width="150px"></TelerikDropDownList>
37+
38+
<TelerikAppBar ThemeColor="@SelectedColor">
39+
<AppBarSection>
40+
<span>Our Logo</span>
41+
</AppBarSection>
42+
43+
<AppBarSpacer Size="25%"></AppBarSpacer>
44+
45+
<AppBarSection>
46+
<span>Our Products</span>
47+
</AppBarSection>
48+
49+
<AppBarSpacer Size="50px"></AppBarSpacer>
50+
51+
<AppBarSection>
52+
<span>Our Mission</span>
53+
</AppBarSection>
54+
55+
<AppBarSpacer></AppBarSpacer>
56+
57+
<AppBarSection>
58+
<TelerikSvgIcon Icon="@SvgIcon.User"></TelerikSvgIcon>
59+
</AppBarSection>
60+
61+
<AppBarSeparator></AppBarSeparator>
62+
63+
<AppBarSection>
64+
<TelerikSvgIcon Icon="@SvgIcon.Logout"></TelerikSvgIcon>
65+
</AppBarSection>
66+
</TelerikAppBar>
67+
68+
@code {
69+
private string SelectedColor { get; set; } = "base";
70+
71+
private List<string> ThemeColors { get; set; } = new List<string>()
72+
{
73+
"base",
74+
"primary",
75+
"secondary",
76+
"tertiary",
77+
"info",
78+
"success",
79+
"warning",
80+
"error",
81+
"dark",
82+
"light",
83+
"inverse"
84+
};
85+
}
86+
````

‎components/appbar/overview.md

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
title: Overview
3+
page_title: AppBar Overview
4+
description: Discover the AppBar component for Blazor. Learn how to add the component to your app and explore its features like sections, dividers, positioning, and various styling options.
5+
slug: appbar-overview
6+
tags: telerik,blazor,appbar,navbar
7+
published: True
8+
position: 0
9+
---
10+
11+
# Blazor AppBar Overview
12+
13+
The <a href = "https://www.telerik.com/blazor-ui/appbar" target="_blank">Blazor AppBar component</a> helps you build navigation bars for your application seamlessly. This article explains how to start using the component and describes its features.
14+
15+
## Creating Blazor AppBar
16+
17+
1. Add the `<TelerikAppBar>` tag to a Razor file.
18+
1. Use the `<AppBarSection>` child tag to add content to the AppBar component.
19+
1. (optional) Use [spacers or separators](#content-dividers) to add visual distinction between the sections in the AppBar.
20+
21+
>caption Basic configuration of the Telerik AppBar
22+
23+
````CSHTML
24+
<TelerikAppBar>
25+
<AppBarSection>
26+
<span>Company Logo</span>
27+
</AppBarSection>
28+
29+
<AppBarSpacer></AppBarSpacer>
30+
31+
<AppBarSection>
32+
<span>Our Products</span>
33+
</AppBarSection>
34+
35+
<AppBarSeparator></AppBarSeparator>
36+
37+
<AppBarSection>
38+
<span>Our Mission</span>
39+
</AppBarSection>
40+
41+
<AppBarSeparator></AppBarSeparator>
42+
43+
<AppBarSection>
44+
<span>Contact Us</span>
45+
</AppBarSection>
46+
47+
<AppBarSpacer></AppBarSpacer>
48+
49+
<AppBarSection>
50+
<TelerikSvgIcon Icon="@SvgIcon.User"></TelerikSvgIcon>
51+
</AppBarSection>
52+
53+
<AppBarSeparator></AppBarSeparator>
54+
55+
<AppBarSection>
56+
<TelerikSvgIcon Icon="@SvgIcon.Logout"></TelerikSvgIcon>
57+
</AppBarSection>
58+
</TelerikAppBar>
59+
````
60+
61+
## AppBar Sections
62+
63+
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-sections%})
64+
65+
## Content Dividers
66+
67+
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%}).
68+
69+
## Positioning
70+
71+
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%}).
72+
73+
## AppBar Parameters
74+
75+
The Blazor AppBar provides parameters to configure the component. Also check the [AppBar API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikAppBar) for a full list of properties.
76+
77+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
78+
79+
| Parameter | Type | Description |
80+
| ----------- | ----------- | ----------- |
81+
| `Position` | `AppBarPosition` <br /> (`None`) | The position of the AppBar on the page. [Read more about AppBar positioning.]({%slug appbar-position%}) |
82+
| `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%}) |
83+
84+
### Styling and Appearance
85+
86+
The following parameters enable you to customize the appearance of the Blazor AppBar:
87+
88+
| Parameter | Type | Description |
89+
| --- | --- | --- |
90+
| `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%}). |
91+
| `Height` | `string` | The height of the AppBar. |
92+
| `ThemeColor` | `Telerik.Blazor.ThemeConstants.AppBar.ThemeColor` | Adjust the color of the AppBar |
93+
| `Width` | `string` | The width of the AppBar. |
94+
95+
You can find more information for customizing the AppBar appearance in the [Appearance article]({%slug appbar-appearance%}).
96+
97+
## AppBar Reference and Methods
98+
99+
To execute AppBar methods, obtain reference to the component instance with `@ref`.
100+
101+
| Method | Description |
102+
|---------|-------------|
103+
| `Refresh` | Use the method to programmatically re-render the AppBar. |
104+
105+
<div class="skip-repl"></div>
106+
107+
````CSHTML
108+
<TelerikButton OnClick="@RefreshAppBar">Refresh AppBar</TelerikButton>
109+
110+
<TelerikAppBar @ref="AppBarRef" />
111+
112+
@code {
113+
private TelerikAppBar AppBarRef { get; set; }
114+
115+
private void RefreshAppBar()
116+
{
117+
AppBarRef.Refresh();
118+
}
119+
}
120+
````
121+
122+
## Next Steps
123+
124+
* [Explore the AppBar Sections]({%slug appbar-sections%})
125+
* [Use the AppBar Sections]({%slug appbar-separators%})
126+
* [Customize the AppBar position]({%slug appbar-position%})
127+
128+
## See Also
129+
130+
* [Live AppBar Demos](https://demos.telerik.com/blazor-ui/appbar/overview)
131+
* [AppBar API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikAppBar)

‎components/appbar/position.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Position
3+
page_title: AppBar Position
4+
description: Position settings of the AppBar for Blazor.
5+
slug: appbar-position
6+
tags: telerik,blazor,appbar,navbar,position
7+
published: True
8+
position: 35
9+
---
10+
11+
# Position Settings
12+
13+
This article outlines the available AppBar parameters, which control its position.
14+
15+
>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 works.
16+
17+
## Position
18+
19+
The `Position` parameter accepts a member of the `AppBarPosition` enum and sets the `top` and `bottom` CSS properties:
20+
21+
| Enum member | Description |
22+
|---------------|--------|
23+
| `None` <br /> (default) | Does not set any values for the `top` and `bottom` CSS properties. |
24+
| `Top` | Sets the `top: 0` and `bottom: auto` CSS properties. |
25+
| `Bottom` | Sets the `top: auto` and `bottom: 0` CSS properties. |
26+
27+
>info The `Position` parameter takes effect when used with fixed [PositionMode](#positionmode).
28+
29+
## PositionMode
30+
31+
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):
32+
33+
| Enum member | Description |
34+
|---------------|--------|
35+
| `Static` <br /> default value | The AppBar displays at the position where it is defined and scrolls together with the other page content. |
36+
| `Fixed` | The AppBar displays at a fixed place, which depends on the `Position` parameter. The component doesn't scroll with the other page content. |
37+
| `Sticky` | The AppBar displays at the position where it is defined. It scrolls together with the other page content, until it reaches the top of the browser viewport. Then the component will remain there. Use the `Sticky` `PositionMode` together with `Top` `Position` .|
38+
39+
## See Also
40+
41+
* [Live Demo: AppBar Position](https://demos.telerik.com/blazor-ui/appbar/position)

‎components/appbar/sections.md

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: Sections
3+
page_title: AppBar - Sections
4+
description: Add Content in the AppBar Component
5+
slug: appbar-sections
6+
tags: telerik,blazor,appbar,sections,section,content
7+
published: True
8+
position: 1
9+
---
10+
11+
# Sections
12+
13+
The `<AppBarSection>` is a template-based component that allows you to render HTML content or Razor components in the AppBar component.
14+
15+
>note Render content only inside the `<AppBarSection>` tag, otherwise it will display outside the AppBar component.
16+
17+
## AppBar Section Parameters
18+
19+
The nested `AppBarSection` tag exposes parameters:
20+
21+
| Parameter | Type and Default Value | Description |
22+
| ----------- | ----------- | ----------- |
23+
| `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. |
24+
| `Visible` | `bool` <br /> (`true`) | Specifies if the section will be visible in the AppBar. |
25+
26+
>caption The Telerik AppBar sections with its parameter
27+
28+
````CSHTML
29+
@* The AppBar sections with its parameters *@
30+
31+
<style>
32+
.products-section-class {
33+
font-weight: bolder;
34+
}
35+
</style>
36+
37+
<TelerikButton OnClick="@(() => isSectionVisible = !isSectionVisible)">Toggle the visibility of the Our Mission section</TelerikButton>
38+
39+
<br />
40+
41+
<TelerikAppBar>
42+
<AppBarSection Class="products-section-class">
43+
<span>Our Products</span>
44+
</AppBarSection>
45+
46+
<AppBarSection Visible="@isSectionVisible">
47+
<span>Our Mission</span>
48+
</AppBarSection>
49+
</TelerikAppBar>
50+
51+
@code{
52+
private bool isSectionVisible { get; set; } = true;
53+
}
54+
````
55+
56+
## See Also
57+
58+
* [Live Demo: AppBar Overview](https://demos.telerik.com/blazor-ui/appbar/overview)
59+
* [AppBar Overview]({%slug appbar-overview%})

0 commit comments

Comments
 (0)