blazored / toast Goto Github PK
View Code? Open in Web Editor NEWA JavaScript free toast library for Blazor and Razor Component applications
Home Page: https://blazored.github.io/Toast/
License: MIT License
A JavaScript free toast library for Blazor and Razor Component applications
Home Page: https://blazored.github.io/Toast/
License: MIT License
Add option to prevent duplicate toasts from showing.
Hi,
I think that the toast settings should be reworked to allow greater customization.
There should be global and per toast settings which the latter can override. Both of which should mirror one another.
For global settings one possible option is this:
/* register with some global defaults */
services.AddBlazoredToast();
/* or customize the global defaults via */
services.AddBlazoredToast(conf => {
conf.Option1="xxx",
conf.Option2="yyy",
conf.Option3="zzz"
...
conf.Option10="qqq"
});
For per toast settings two possible options are:
/* override some of the global defaults in the method invocation */
_toastService.ShowInfo("added ok", new Settings() {
Option1="XXX",
Option3="ZZZ"
});
Then the actual options passed would be the result of a merge of the global settings and the toast settings from the method call.
/* override some of the global defaults in the method invocation */
_toastService.ShowInfo("added ok", conf => {
conf.Option1="XXX",
conf.Option3="ZZZ"
});
Then the method would be given a copy of the global settings via a lambda of which any of the options can be overriden.
All the current (and future) global toast settings should be made possible to be overriden on per toast basis.
I have personally wanted to customize some aspects of the toasts (on per toast basis), but with the current implementation many of the options can only be specified globally for all the toast types (same problem discussed in #75). The above approach would nicely fix it allowing to override any of the current (and future) options on per toast basis.
If I make a new ToastService and try to push a message through nothing happens if it's done from within the cs file. Is it possible to implement this?
Is it possible to include icons similar to this project? I'm using Blazored Toast because it supports Server side :)
https://blazor-toaster.sotsera.com/
Is options.Timeout
supposed to control how many seconds a toast should be displayed in the browser before it is going away?
If so, I put options.Timeout = 20 but the toast is still dissapearing to fast?
Can we control the time a toast is displayed?
Hi,
I'm running blazor webassembly 3.2.0 and toast 3.1.2.
But i have some issue, the first time i run my blazor application, there is an issue with the toast.
If i refresh the page, it will working fine.
This is at the left top corner instead of the right top corner and red toast.
Thank you for your help !
Is your feature request related to a problem? Please describe.
No.
Describe the solution you'd like
Ship minified css.
Describe alternatives you've considered
None.
Additional context
None.
Currently the fade-in time of a toast is 1.5 seconds, hard coded in the CSS file:
.blazored-toast {
display: flex;
flex-direction: row;
animation: fadein 1.5s;
margin-bottom: 1rem;
padding: 1rem 1.25rem;
color: #fff;
width: 30rem;
border-radius: .25rem;
font-family: monospace;
box-shadow: rgba(0,0,0,0.25) 0px 10px 40px;
}
Is it possible to make it configurable with the use of dynamic CSS, something like this?
Right now in the BlazoredToasts component there are a number of parameters that users can set including a class to apply styles to each of the different toast levels:
Right now these parameters set additional classes on each of the toast instances, but they don't remove the default styling.
This means that a consumer needs to find out the base css class of each warning and create selectors more specific than those classes.
Could we change this so that setting the above parameters replaces the default styles rather than adds CSS classes in addition to?
One example use case would be styling the cards using Boostrap (or a similar CSS framework) by applying various alert classes to the toast instance.
Note that changing this to be a "replace" rather than "in addition to" would be a breaking change for folks that implemented their CSS with the assumption of the blazor-toast-warning/blazor-toast-error etc..
I cannot run Toaster in server-side blazor.
This is the csproj file of the client.app:
<Project Sdk="Microsoft.NET.Sdk.Razor"> <PropertyGroup> <TargetFramework>netstandard2.0</TargetFramework> <LangVersion>7.3</LangVersion> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Components.Browser" Version="3.0.0-preview-19075-0444" /> <PackageReference Include="Microsoft.AspNetCore.Components.Build" Version="3.0.0-preview-19075-0444" PrivateAssets="all" /> <PackageReference Include="Sotsera.Blazor.Toaster" Version="0.8.0-preview-2" /> </ItemGroup> </Project>
I tried:
`
@page "/counter"
@Inject IToastService toastService
Current count: @currentCount
Click me
@functions {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
toastService.ShowToast(ToastLevel.Info, "Now at " + currentCount.ToString());
}
}
`
In the counter component.
Currently, the only option to change the style of the toast is to edit the blazored-toast.css
file.
I would like to see some parameters in <BlazoredToasts />
component. I think that there can be a parameter for CSS class/classes for every type of toast, for example:
<BlazoredToasts InfoClass = "my-custom-info-css-class" SuccessClass = "my-custom-success-css-class" WarningClass = "my-custom-warning-css-class" ErrorClass = "my-custom-error-css-class" />
(If you don't want to override style of the specific type of toast then you just don't use parameter that is responsible for this. For example you can remove InfoClass = "my-custom-info-css-class"
so then Info Toast will have only it's default style.)
It shouldn't replace original css class but instead combine this two parts into something like this:
<div class= "blazored-toast warning my-custom-warning-css-class>
...
</div>
So in the end my-custom-warning-css-class
will override some (or all) blazored-toast warning
CSS settings with it's own.
I am using Blazored.Toast in my webassembly Project.
I have referenced the css in index.html as below.
Before updating to WebAssembly 3.2.0 Preview 1 it was working but after updating the blazor to WebAssembly 3.2.0 Preview 1 it is not working .
issue is Css file is not found at the path.
When a page contains a route parameter, Toast is not injected.
In the following example, toast works fine on /Page
, however it is not displaying on /Page/foo
@page "/Page"
@page "/Page/{routeparameter}"
more on route parameters https://docs.microsoft.com/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-3.1#route-parameters
Describe the bug
If you set the timeout the amount of time it takes for the toast to dissappear is always longer than expected.
To Reproduce
Steps to reproduce the behavior:
In the WebAssembly sample set a timeout of 2 seconds, you will see the toast takes much longer to dissappear. In my machine it takes around 5 seconds.
Suggestion
The resolution timer en Blazor (specially in WebAssembly) is not granular enough to handle such short times.
In this Gist
https://gist.github.com/pablopioli/f7da61e490c575a306501067bfd0fca1
I propose an non breaking improvement that can alleviate this problem.
Please be sure to check the readme file before raising an issue.
Hi is it possible to have the notifications anchored to the left? I am developing for mobile and have some non responsive grids that enable the users to scroll along to read all the information but this makes the canvas off the screen and hence notifications anchored right they do not see.
Tried to copy paste the guide - and it gave error due to the spelling error :)
Currently the close button is pretty basic:
<button>x</button>
an alternative could be:
<a tabindex="0" class="blazored-toast-close">
<i aria-label="icon: close" class="blazored-toast-close-icon">
<svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z">
</path>
</svg>
</i>
</a>
Notice the use of :
I'm willing to PR this: (notes to self):
Todo:
Do note that this could be a breaking change if the client uses the following css selector:
.blazored-toast-header button
Service class
public class ServiceA
{
private readonly IToastService _toastService;
public ServiceA(IToastService toastService)
{
_toastService = toastService;
}
public void showMessage()
{
_toastService.ShowSuccess("I'm a SUCCESS message with a custom title", "Congratulations!");
}
}
Startup
services.AddBlazoredToast(options => {
options.Timeout = 5;
options.Position = ToastPosition.BottomRight;
});
services.AddSingleton<ServiceA>();
Index.razor
@page "/"
@inject ServiceA ServiceA
<h1>Hello, world!</h1>
@functions{
protected override void OnInit()
{
ServiceA.showMessage();
}
}
Hi,
Should the toast notification be sending over 200 Blazor requests to the server during the 5 seconds while it is open?
I can see 215 requests for the 5 seconds while the notification is open, these start as soon as it opens then stop as soon as it closes.
Thanks
Is your feature request related to a problem? Please describe.
No
Describe the solution you'd like
Add a progress bar to the bottom of the Toast. Control whether it's enabled/disabled via parameter.
Describe alternatives you've considered
None
Additional context
https://codeseven.github.io/toastr/demo.html
Steps to reproduce:
In a Web Assembly App, I added to the index.html page, as described in the documentation.
Toast messages appear as desired in the local dev environment. After publishing the app to an App Service on Azure, the blazored-toast.css does not load correctly. This warning appears in the browser console:
Resource interpreted as Stylesheet but transferred with MIME type text/html
When I inspect the call to load the css file, response contains the html of the index.html page.
The build and the deployment was done with Azure Dev Ops Pipelines. My current theory is that the _content folder does not exist after deployment.
Version one has a fixed timeout of 5 seconds for a toast. Also, the location of the toast is fixed to the top right corner of the screen. It would be much nicer for users to be able to configure these type of settings.
Can we support the releases with their notes on the GitHub Releases tab?
Hey,
Not really an issue but i wanted to get in contact with you. I have used your Toast as a base and modified it to work more like a snackbar and added a new type for background jobs where the snackbar does not close until job is done and with loader animations etc. Upon close it destroys the worker info snackbar and shows Success/Error.
Is it okay with you if i upload it to my github? and of course give you full credit for all the base work.
Is your feature request related to a problem? Please describe.
I have two projects in which I would like to use Blazored.Toast. They make use of the Open Iconic Glyphs and Material Design icons. My preference is not to add FontAwesome just to get icons on toast popups.
Describe the solution you'd like
I believe that adding parameters to BlazoredToasts.razor.cs would be an effective way of specifying icons from these two sources. I've implemented a POC by adding InfoIconMatName, ErrorIconMatName (plus success and warning). I extended the ToastSettings to include IconMatName as a property and updated the constructor. Finally, in BlazorToast.razor I added
@if (!string.IsNullOrWhiteSpace(ToastSettings.IconMatName))
{
<div class="blazored-toast-icon">
<i class="material-icons mdc-button__icon" aria-hidden="true">@ToastSettings.IconMatName</i>
</div>
}
below the existing icon code.
Describe alternatives you've considered
An alternative would be to add an IconType for each of the four states as an enumeration of Class, MatIcon, OpenIconic and make the use of IconClass be the class if type class, or the font selector if MatIcon or OpenIconic. It feels a little funny to use the className for the icon name but it beats having a breaking change to get a better name IMO.
I think it would be useful if this assembly was strong-named.
I'd like to use this library in my Blazor Server-side project, but I have constraints that the assemblies I'm building must be strong-named, which means I can't use this as-is.
I can fork and pull request a version with an *.snk
file included and the project properties updated if that works best.
-or-
If you have time to fit it in that would work as well.
I know there is some debate on this subject so I'm open to alternative solutions as well, though I'd like to avoid maintaining my own separate fork with a strong name if possible.
It would be nice to use the close event for some custom operations.
E.g.: We use the toasts to give the user information about WebAPI responses. We keep track of all displayed messages and the user have to "confirm" that they have read it. So the most outputs are kept quite simple and short, and the user could "confirm" them with clicking the close button at the time when they read the toast message.
Having access to the close event would give us the opportunity to mark the message as read.
Is your feature request related to a problem? Please describe.
No.
Describe the solution you'd like
I would like to have the option to prevent a toast from showing that is already showing. Similar to how MatBlazor does it. https://www.matblazor.com/Toast When you click the info button multiple times for example, it only shows the toast once.
Describe alternatives you've considered
None
Additional context
Example at https://www.matblazor.com/Toast
Thank you for this component.
I had an issue showing a toast from an other thread than the main thread.
I have fixed this in BlazoredToasts.razor.cs:
private void ShowToast(ToastLevel level, string message, string heading) by using InvokeAsync
InvokeAsync(() => StateHasChanged());
This solved the problem for me.
If my page has a lots of information and and I'm at bottom of page (after scrolling ), When clicking on show message from bottom of the page , it does show message but it show that message like I'm on top of page.
First of all, great job!
I setup a quick test using the default Blazor App and Toast. Everything went ok and is working, except for a minor thing. When a toast is visible, if I change to another page, the toast is still visible. It would be great to have all the visible toasts cleared on page change or at least have a Clear() method so that I could do it manually.
Have you seen this behavior?
Thanks!
Is it possible to disable the timeout?
Is your feature request related to a problem? Please describe.
Not exactly. The toasts are just really big and if the window is small can obstruct some text.
Describe the solution you'd like
I would like to be able to specify a specific size, or have different size options to choose from such as a more compact view.
Describe alternatives you've considered
I've thought about trying to override the css myself, but that seems like a bad solution. Alternatively, being able to remove the header could help.
Additional context
Additionally providing an offset could be nice.
Right now in the Toast stylesheet we set the header to uppercase with the following selector/style:
blazored-toast-body .blazored-toast-header h5
/text-transform: uppercase;
.
We also set the font-family to monospace
in .blazored-toast
.
Could we allow consumers to make these determinations separately with their own CSS overrides?
Hi,
Great sample!
But it has been made over C# 7.3 and we all know the .Net Core 3 will use C# 8. Setting the project to C# 8, by using the preview keyword or write it directly as:
<PropertyGroup>
<LangVersion>preview</LangVersion>
</PropertyGroup>
or
<PropertyGroup>
<LangVersion>8</LangVersion>
</PropertyGroup>
It insert the new C# 8 rules who are not compatible with your beautiful code like:
<button class="btn btn-info" @onclick="@(() => toastService.ShowInfo("I'm an INFO message"))">Info Toast</button>
Show a warning message as:
Error CS1660 Cannot convert lambda expression to type 'object' because it is not a delegate type BlazorServerSideSample
If we try to insert an Action delegate :
<button class="btn btn-info" @onclick="@(() => (Action<ToastService>)toastService.ShowInfo("I'm an INFO message"))">Info Toast</button>
It don't work too...
In certain apps, the Z-Index of the Toast Container is higher than the default z-Index.
Let's document this behavior or add some docs on how to adjust it:
Todo:
I am using Blazor Hosted WebAssembly and getting this Error on the startup.
blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Invalid value '0' for parameter 'interval'.
System.ArgumentException: Invalid value '0' for parameter 'interval'.
at System.Timers.Timer..ctor (System.Double interval) <0x2ce4bf0 + 0x0004e> in :0
at Blazored.Toast.CountdownTimer.SetupTimer () <0x2ce07e0 + 0x0000a> in :0
at Blazored.Toast.CountdownTimer..ctor (System.Int32 timeout) <0x2ce03f8 + 0x00036> in :0
at Blazored.Toast.BlazoredToast.OnInitialized () <0x2ce0288 + 0x0000a> in :0
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync () <0x2ba63f0 + 0x00030> in :0
Add a parameter to only show x amount of toasts at the same time.
For example, sometimes the user can get spammed with notifications. It would be handy to only show the last item.
It seems the _content folder items are not being referenced correctly for anything other than the Development environment:
To Repro:
Please, allow html content is needed, like
tags.
I have created an example to demonstrate the issue I am seeing: https://github.com/dahln/Toast-PossibleIssue
In my app, I created an "ApiLibrary", to contain all my outgoing Api calls. I want to display a toast message if a server ever returns a 500 response message, and I want to use the IToastService in the injected "ApiLibrary" to invoke the message. If I call IToastService.ShowError on the page, it will display as expected. If I try to call the same method in the "ApiLibrary" it doesn't work. The ApiLibrary is injected into page. I verified that the method in the "ApiLibrary" is being called successfully, but the toast isn't being displayed.
Describe the bug
We use TFS for source control and when I install the Blazored.Toast v3.1.1 NuGet package I am presented with the dialog shown in the attachment. It wants to add a bundleconfig.json to my project, but the path to that file is in the .nuget/packages/blazored-toast folder. No matter which selection I choose - "Add the item" or "Cancel add" - I get a bundleconfig.json file in the root of my project that I cannot remove. If I attempt to remove it I get an error: "Cannot modify an evaluated object originating in an imported file."
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The bundleconfig.json file should probably not be included in the distribution.
Hosting Model (is this issue happening with a certain hosting model?):
Hi.
Trying Blazored on an app running in Docker (Linux) throws error as soon as I install the extension.
It's not even necessary to set it up.
Just install it and try to run.
It throws error with message "The path must be absolute".
Currently I have a toast that e.g. says:
ITEM DELETED SUCCESSFULLY
Now I want to give the user a chance to undo his action.
For this I am looking for a way to output something like:
ITEM DELETED SUCCESSFULLY
[Undo]
Where the [Undo]
could be a button or a link.
I've seen the example where you add formatting like <strong>
to the message, but I cannot deduce a way for me to add a Blazor link and bind its click
to a C# method of mine.
Is there any way to add a link/button and bind it to a C# method I can provide?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.