ToolTip

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>

Toast

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

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");
        }
}

Cards

Some templated cards with cool design

Areas of Palestine

Card image cap
Jerusalem

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>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙