Notification controls

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 19 Nov 2020 12:22 by ADMIN

Release 2.20.0

Tyler

Created on: 12 Aug 2019 17:07

Category: UI for Blazor

Type: Feature Request

Notification controls

The Notifications component I think would be a great addition to UI for Blazor!
Use it quite often with SPAs

Duplicated Items

5 comments

Emran

Posted on: 28 Sep 2020 05:17

A perfect example of what we want for the standalone Toast control is like this one: https://github.com/Blazored/Toast

I am using Blazored Toast control which is an open source, so no problem about that. But, it will be nice to stick to one library rather than using many different nuget packages for UI purpose. So, I would like to see such control in Telerik Suite.

Ryan

Posted on: 04 Oct 2019 18:55

Additional features I'd like to see are:

A Duration parameter that indicates how long the notification should be visible.

The notification should automatically disappear after the duration is reached. This would save us from having to call HideAsync().
Ability to stack multiple notifications and have them float to the top as ones above it disappear.

Currently the only way to position notifications is to use the Top and Left parameters and I suppose we'd have to do some CSS calculation to stack them dynamically.

ADMIN

Marin Bratanov

Posted on: 13 Aug 2019 15:38

Hello Tyler,

You can use the font icons from the Kendo suite in Blazor as well, as the SASS themes are shared. Here's an example:

@using Telerik.Blazor

@using Telerik.Blazor.Components.AnimationContainer

@using Telerik.Blazor.Components.Button

<TelerikButton OnClick="@Show">Show Notification</TelerikButton>

<div style="position: absolute; top: 50%; left: 50%">

<TelerikAnimationContainer @ref="@AnimationContainer" Width="300px" Height="200px" AnimationType=@AnimationType.Fade>

<div class="k-widget k-popup k-notification k-notification-info">

<div class="new-mail">

<h3><span class="k-icon k-i-info"></span>New E-mail</h3>

<p>

<span class="k-icon k-i-info"></span>

You have 1 new mail message!

</p>

</div>

</TelerikAnimationContainer>

</div>

@code {

public TelerikAnimationContainer AnimationContainer { get; set; }

public async void Show(UIMouseEventArgs args)

{

await AnimationContainer.ShowAsync();

StateHasChanged();

await Task.Delay(2000);

await AnimationContainer.HideAsync();

StateHasChanged();

}

<style type="text/css">

.new-mail .k-icon {

font-size: inherit;

/* this will make the icon large as its text container

and you may want to tweak this further with different/more specific rules

*/

}

</style>

On a close button - you just need to add an element whose click will call AnimationContainer.HideAsync().

I hope this helps you move forward for the time being.

Considering that most of these features can easily be achieved with the current components, I am not sure if this will be implemented soon, or if at all, yet I am going to keep it open so we can gather the community feedback and interest. As usual, if sufficient public interest is accrued, its priority will rise.

Regards,
Marin Bratanov
Progress Telerik UI for Blazor

Tyler

Posted on: 13 Aug 2019 13:34

That could work.
I think it would be nice to have some of the styling built-in like the Title Icon, Title Bar & Close button.
https://docs.telerik.com/devtools/aspnet-ajax/controls/notification/getting-started/structure
This be an optional element.

ADMIN

Marin Bratanov

Posted on: 13 Aug 2019 05:38

Hi Tyler,

You can use the AnimationContainer component for this, as shown in this demo: https://demos.telerik.com/blazor-ui/animationcontainer/notification.

What are the other features you would like to see in a standalone component of this type that cannot be done with this approach?

Regards,
Marin Bratanov
Progress Telerik UI for Blazor