Just hover on marked blue text to show tooltips
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using 'Lorem Ipsum' is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Coding will be like this
<ToolTip>
<span class="text-primary">some text...</Span>
</ToolTip>
Just simple way to create toast and show it
@inject ToastService Toaster;
<button @onclick=ShowToast class='btn btn-primary'>Click to show toast</button>
@code {
private async void ShowToast()
{
var toast = await Toaster.CreateToastAsync();
toast.Message = "Just simple toast";
toast.Title = "EBlazor Toast";
toast.ToastType = ToastTypes.Info;
toast.Options.Position = ToastPositions.TopRight;
// Optional you can set custom closing animation keyframes
toast.ClosingKeyFrames = "close-toast-animation";
// OnClick event fired when toast clicked. It takes parameter ToastClickEventArgs
toast.OnClick = (e)=> { // Do something with e };
toast.Show();
}
}
Dialog box for showing components in dialog and retrieve actions from them
@inject DialogService Dialog;
@inject IJSRuntime Js;
<button @onclick=ShowDialog class='btn btn-primary'>Click to show dialog</button>
@code {
private void ShowDialog()
{
var dialog = Dialog.CreateDialog<Counter>();
dialog.Title = "Counter dialog";
dialog.ShowFooter = true;
dialog.AddParameter("NumberStarter", 100);
dialog.FooterConfirmOnClicked = () =>
{
Js.InvokeVoidAsync("alert", "You just confirmed the dialog");
};
dialog.OnClosed = (str) =>
{
Js.InvokeVoidAsync("alert", str);
};
dialog.Show();
}
}
Note: to use OnClosed you need to add parameter DialogRef to the dialog component and use Close function and send any type of values, like this
[Parameter]
public DialogReference DialogRef {get; set;}
@code{
private void CloseCurrentDialog()
{
DialogRef.Close("Counter dialog closed");
}
}
Some templated cards with cool design
It is the largest city in Palestine in terms of area, population, and the most important islamic and economic importance. It is known by other names in the Arabic language, such as: Bayt Al-Maqdis, Al-Quds Al-Sharif, the first of the two Qiblahs
Coding will be like this
<Card>
<HeaderTemplate>
<h3>Header</h3>
</HeaderTemplate>
<BodyTemplate>
<div>Body content...</div>
</BodyTemplate>
<ActionsTemplate>
<ActionLink>
Read omre
</ActionLink>
</ActionsTemplate>
<FooterTemplate>
<small>Footer content</small>
</FooterTemplate>
</Card>