Skip to content

Commit 9e4f490

Browse files
Docs notification component (#174)
* feat(notification): initial docs * chore(notification): add documentation on the notification component * fix(notification): fix slug in template article * chore(notification): fix broken instruction in overview * chore(notification): add to the kbnav list * chore(notification): small fixes in the appearance article * chore(notificatioN): fix the themecolor section * chore(notification): fix the formatting of a code snippet * chore(notification): add to intro list * chore(notification): improvements on the overview article * chore(notification): Appearance improvements * chore(notification): improvements on the Templates article * chore(notification): Stacked improvements * chore(notification): Open Close Hide improvements * chore(notification): add screenshots to appearance article Co-authored-by: Marin Bratanov <[email protected]>
1 parent 5b51994 commit 9e4f490

13 files changed

+638
-0
lines changed

_config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -423,6 +423,7 @@ intro_columns:
423423
"Tooltip": "tooltip-overview"
424424
"Drawer": "drawer-overview"
425425
"Tile Layout": "tilelayout-overview"
426+
"Notification": "notification-overview"
426427
-
427428
title: "Scheduling"
428429
items:

accessibility/keyboard-navigation.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ The following list shows the Telerik components that support specific keyboard c
6262

6363
* [MultiSelect](https://demos.telerik.com/blazor-ui/multiselect/keyboard-navigation)
6464

65+
* Notification - not applicable, it is a visualization component.
66+
6567
* [NumericTextBox](https://demos.telerik.com/blazor-ui/numerictextbox/keyboard-navigation)
6668

6769
* [Pager](https://demos.telerik.com/blazor-ui/pager/keyboard-navigation)

components/notification/appearance.md

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
---
2+
title: Appearance
3+
page_title: Notification Appearance
4+
description: Appearance settings of the Notification component for Blazor.
5+
slug: notification-appearance
6+
tags: telerik,blazor,notification,appearance
7+
published: True
8+
position: 5
9+
---
10+
11+
# Appearance Settings
12+
13+
The Notification component provides parameters and properties that allows you to customize its appearance. For brevity, this article will be divided in the following sections:
14+
15+
* [AnimationType](#animationtype)
16+
* [Size](#size)
17+
* [ThemeColor](#themecolor)
18+
19+
20+
You can use all three together to get the desired appearance. This article will explain their effect one by one.
21+
22+
## AnimationType
23+
24+
The `AnimationType` parameter controls the way the Notification will appear on the screen. It takes a member of the `Telerik.Blazor.AnimationType` enum:
25+
26+
* `Fade` - the default animation
27+
* `None`
28+
* `PushUp`
29+
* `PushDown`
30+
* `PushLeft`
31+
* `PushRight`
32+
* `RevealVertical`
33+
* `SlideIn`
34+
* `SlideDown`
35+
* `SlideLeft`
36+
* `SlideRight`
37+
* `ZoomIn`
38+
* `ZoomOut`
39+
40+
You can see them in action in the [Notification Animation](https://demos.telerik.com/blazor-ui//notification/animation) Live Demo.
41+
42+
>caption Set an animation for the Notification component
43+
44+
![notification animation types gif](images/notification-animationtype-gif.gif)
45+
46+
````CSHTML
47+
@* This sample uses the ZoomOut animation, you can change it *@
48+
49+
<TelerikButton OnClick="@AddNotification">Add a basic notification</TelerikButton>
50+
51+
<TelerikNotification @ref="@NotificationReference" AnimationType="@AnimationType.ZoomOut"></TelerikNotification>
52+
53+
@code {
54+
public TelerikNotification NotificationReference { get; set; }
55+
56+
public void AddNotification()
57+
{
58+
NotificationReference.Show(new NotificationModel()
59+
{
60+
Text = "Auto Closable Notification",
61+
ThemeColor = "primary"
62+
});
63+
}
64+
}
65+
````
66+
67+
## Size
68+
69+
You can control the Size of the Notification by using CSS. To make the cascading of the styles easier and target a single instance of the component you should use the `Class` parameter exposed in the the `<TelerikNotification>` tag.
70+
71+
>caption Control the size of the Notiication component
72+
73+
![resized notification](images/notification-size-changed-screenshot.png)
74+
75+
````CSHTML
76+
@* Use CSS to set the size of the notification *@
77+
78+
<style>
79+
.MyTelerikNotification .k-notification-container .k-notification-wrap {
80+
width: 300px;
81+
height: 200px;
82+
}
83+
</style>
84+
85+
<TelerikButton OnClick="@AddNotification">Add a basic notification</TelerikButton>
86+
87+
<TelerikNotification @ref="@NotificationReference" Class="MyTelerikNotification"></TelerikNotification>
88+
89+
@code {
90+
public TelerikNotification NotificationReference { get; set; }
91+
92+
public void AddNotification()
93+
{
94+
NotificationReference.Show(new NotificationModel()
95+
{
96+
Text = "Auto Closable Notification",
97+
ThemeColor = "primary",
98+
Closable = true,
99+
CloseAfter = 0
100+
});
101+
}
102+
}
103+
````
104+
105+
## ThemeColor
106+
107+
The color of the notification popup is easily controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeColor` class:
108+
109+
* `Primary`
110+
* `Secondary`
111+
* `Tertiary`
112+
* `Success`
113+
* `Info`
114+
* `Warning`
115+
* `Error`
116+
* `Dark`
117+
* `Light`
118+
* `Inverse`
119+
120+
These predefined options match the main [Telerik Theme]({%slug general-information/themes%}) and you can see that in action in the [Notification Appearance](https://demos.telerik.com/blazor-ui//notification/appearance) Live Demo.
121+
122+
>caption Built-in Theme Colors
123+
124+
![Notification Theme Colors](images/notification-themecolor-screenshot.png)
125+
126+
````CSHTML
127+
@* This sample adds a notification with each built-in theme color *@
128+
129+
<TelerikButton OnClick="@AddColoredNotifications">Add colored notifications</TelerikButton>
130+
131+
<TelerikNotification @ref="@NotificationReference" AnimationType="@AnimationType.ZoomOut"></TelerikNotification>
132+
133+
@code {
134+
public TelerikNotification NotificationReference { get; set; }
135+
136+
public void AddColoredNotifications()
137+
{
138+
var fields = typeof(Telerik.Blazor.ThemeColors)
139+
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static |
140+
System.Reflection.BindingFlags.FlattenHierarchy)
141+
.Where(fi => fi.IsLiteral && !fi.IsInitOnly).ToList();
142+
143+
for (int i = 0; i < fields.Count; i++)
144+
{
145+
var currentField = fields[i];
146+
var color = currentField.GetValue(null).ToString();
147+
148+
NotificationReference.Show(new NotificationModel()
149+
{
150+
Text = $"Notification with color theme - {color}",
151+
ThemeColor = $"{color}"
152+
});
153+
}
154+
}
155+
}
156+
````
157+
158+
The `ThemeColor` parameter renders as the `k-notification-<ThemeColor>` CSS class on the specific notification HTML element and you can set it to a custom value to cascade through, and set the color to a setting of your own without customizing the entire theme.
159+
160+
>caption Custom Notification color without customizing the Telerik Theme
161+
162+
![custom themecolor screenshot](images/notification-custom-themecolor-screenshot.png)
163+
164+
````CSHTML
165+
@* Sample of using a custom notification theme color from your own styles *@
166+
167+
<style>
168+
.k-notification-custom-color {
169+
background-color: cyan;
170+
}
171+
</style>
172+
173+
<TelerikButton OnClick="@AddNotification">Add a notification</TelerikButton>
174+
175+
<TelerikNotification @ref="@NotificationReference"></TelerikNotification>
176+
177+
@code {
178+
public TelerikNotification NotificationReference { get; set; }
179+
180+
public void AddNotification()
181+
{
182+
NotificationReference.Show(new NotificationModel()
183+
{
184+
Text = "Auto Closable Notification",
185+
ThemeColor = "custom-color"
186+
});
187+
}
188+
}
189+
````
190+
191+
## See Also
192+
193+
* [Live Demo: Notification Overview](https://demos.telerik.com/blazor-ui/notification/overview)
194+
* [Live Demo: Notification Appearance](https://demos.telerik.com/blazor-ui/notification/appearance)
195+
* [Live Demo: Notification Animation](https://demos.telerik.com/blazor-ui/notification/animation)
Loading
Loading
Loading
Loading
Loading
Loading
Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
title: Open, Close and Hide
3+
page_title: Notification - Open, Close and Hide
4+
description: Open, Close and Hide the Notification component
5+
slug: notification-open-close-hide
6+
tags: telerik,blazor,notification,open,close,hide
7+
published: True
8+
position: 20
9+
---
10+
11+
# Open, Close and Hide Notifications
12+
13+
14+
This article explains how to open, close and hide the Notification component. For brevity, it will be divided in the following sections:
15+
16+
* [Open](#open)
17+
* [Use Only the Text and ThemeColor Properties](#use-only-the-text-and-themecolor-properties)
18+
* [Pass a NotificationModel to the Method](#pass-a-notificationmodel-to-the-method)
19+
* [Close and Hide](#close-and-hide)
20+
* [Automatically Closing Notification](#automatically-closing-notification)
21+
* [Manually Closing Notification](#manually-closing-notification)
22+
23+
## Open
24+
25+
You can open (show) the Notification component by using the [`Show`]({%slug notification-overview%}#show-method) method of its reference.
26+
27+
You can use it in two ways:
28+
29+
* [Use Only the Text and ThemeColor Properties](#use-only-the-text-and-themecolor-properties)
30+
* [Pass a NotificationModel to the Method](#pass-a-notificationmodel-to-the-method)
31+
32+
33+
### Use Only the Text and ThemeColor Properties
34+
35+
If you do not need to customize the [closing](#close-and-hide) or the icon of the component you can quickly create them by passing only what text and [theme color]({%slug notification-appearance%}#themecolor) should the Notification have.
36+
37+
````CSHTML
38+
@* At minimum, you can pass a text message and a color to the Show() method *@
39+
40+
<TelerikButton OnClick="@OpenNotification">Open a notification</TelerikButton>
41+
42+
<TelerikNotification @ref="@NotificationReference" />
43+
44+
@code {
45+
public TelerikNotification NotificationReference { get; set; }
46+
47+
public void OpenNotification()
48+
{
49+
NotificationReference.Show("My notification", "success");
50+
}
51+
}
52+
````
53+
54+
### Pass a NotificationModel to the Method
55+
56+
You can pass the entire [NotificationModel]({%slug notification-overview%}#notificationmodel-class) to provide detailed information for the component - whether it should be closable or specify the icon.
57+
58+
````CSHTML
59+
@* You can pass the entire NotificationModel with all its features for complete control over the message settings *@
60+
61+
<TelerikButton OnClick="@OpenNotification">Open a notification</TelerikButton>
62+
63+
<TelerikNotification @ref="@NotificationReference" />
64+
65+
@code {
66+
public TelerikNotification NotificationReference { get; set; }
67+
68+
public void OpenNotification()
69+
{
70+
NotificationReference.Show(new NotificationModel()
71+
{
72+
Text = "My Notification",
73+
ThemeColor = "success",
74+
Icon = true,
75+
IconName = IconName.Star,
76+
Closable = false
77+
});
78+
}
79+
}
80+
````
81+
82+
## Close and Hide
83+
84+
There are two separate ways to close a notification:
85+
86+
* [Automatically Closing Notification](#automatically-closing-notification)
87+
* [Manually Closing a Notification](#manually-closing-a-notification)
88+
89+
### Automatically Closing Notification
90+
91+
By default each notification is an automatically closing one. You can define the time it stays visible by adjusting the `CloseAfter` parameter of the [NotificationModel]({%slug notification-overview%}#notificationmodel-class). It defaults to `5000ms`.
92+
93+
You can also let the user dismiss a notification message before that timer elapses through a closing button by setting the `Closable` parameter of the `NotificationModel` to `true` (its default value).
94+
95+
>caption Automatically Closing Notification
96+
97+
98+
````CSHTML
99+
@* By default, notification messages close on their own after 5 seconds *@
100+
101+
<TelerikButton OnClick="@AddAutoClosingNotification">Add Auto closing notification</TelerikButton>
102+
103+
<TelerikNotification @ref="@NotificationReference" />
104+
105+
@code {
106+
public TelerikNotification NotificationReference { get; set; }
107+
108+
public void AddAutoClosingNotification()
109+
{
110+
NotificationReference.Show(new NotificationModel()
111+
{
112+
Text = "My Notification",
113+
ThemeColor = "success",
114+
Closable = false,
115+
CloseAfter = 2000,
116+
IconName = IconName.Star
117+
});
118+
}
119+
}
120+
````
121+
122+
### Manually Closing a Notification
123+
124+
You can prevent the notification from closing automatically and let the user close it with the close button only. To do so, in the `NotificationModel` instance, set the `Closable` parameter to `true` and the `CloseAfter` parameter to `0`.
125+
126+
>caption Manually Closing Notification
127+
128+
````CSHTML
129+
@* This notification will not disappear automatically, the user must close it on their own *@
130+
131+
<TelerikButton OnClick="@AddManuallyClosingNotification">Add manually closing notification</TelerikButton>
132+
133+
<TelerikNotification @ref="@NotificationReference" />
134+
135+
@code {
136+
public TelerikNotification NotificationReference { get; set; }
137+
138+
public void AddManuallyClosingNotification()
139+
{
140+
NotificationReference.Show(new NotificationModel()
141+
{
142+
Text = "My Notification",
143+
ThemeColor = "success",
144+
Closable = true,
145+
CloseAfter = 0,
146+
IconName = IconName.Star
147+
});
148+
}
149+
}
150+
````
151+
152+
153+
## See Also
154+
155+
* [Notification Overview]({%slug notification-overview%})

0 commit comments

Comments
 (0)