Blazor Dismissible

Enables developers to create interactive and user-friendly dismissible elements but also serves as a versatile solution for handling empty components.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Learn about core component features

Simple dismissible

Hello Blazor School!
<div>Hello Blazor School!</div>
<BlazorDismissibleToggler Context="Toggler">
    <BlazorButton type="button" Variants="new[] {BaseVariants.Success}" @onclick="Toggler.Open">Open</BlazorButton>
    <BlazorButton type="button" Variants="new[] {BaseVariants.Danger}" @onclick="Toggler.Close">Close</BlazorButton>
    <BlazorButton type="button" Variants="new[] {BaseVariants.Primary}" @onclick="Toggler.Toggle">Toggle</BlazorButton>
</BlazorDismissibleToggler>

Independent dismissible toggler

Hello Blazor School!
<BlazorDismissible Token="my-blazor-dismissible">
    <div>Hello Blazor School!</div>
</BlazorDismissible>
<BlazorDismissibleToggler TargetToken="my-blazor-dismissible" Context="Toggler">
    <BlazorButton type="button" Variants="new[] {BaseVariants.Success}" @onclick="Toggler.Open">Open</BlazorButton>
    <BlazorButton type="button" Variants="new[] {BaseVariants.Danger}" @onclick="Toggler.Close">Close</BlazorButton>
    <BlazorButton type="button" Variants="new[] {BaseVariants.Primary}" @onclick="Toggler.Toggle">Toggle</BlazorButton>
</BlazorDismissibleToggler>

Control visible state

BlazorDismissble can also be used to handle empty contents.

<BlazorDismissible Token="my-blazor-dismissible2" VisibleState="false">
    <div>Hello Blazor School!</div>
</BlazorDismissible>
<BlazorDismissibleToggler TargetToken="my-blazor-dismissible2" Context="Toggler">
    <BlazorButton type="button" Variants="new[] {BaseVariants.Success}" @onclick="Toggler.Open">Open</BlazorButton>
    <BlazorButton type="button" Variants="new[] {BaseVariants.Danger}" @onclick="Toggler.Close">Close</BlazorButton>
    <BlazorButton type="button" Variants="new[] {BaseVariants.Primary}" @onclick="Toggler.Toggle">Toggle</BlazorButton>
</BlazorDismissibleToggler>

Parameters

BlazorDismissible

Name Type Description
Token string Establishes a unique identifier for components within Blazor Library. It enables association and coordination between related elements.
VisibleState bool Control the visible state.

BlazorDismissibleToggler

Name Type Description
TargetToken string Identifies the target component for interaction. It establishes connections and enables actions on specific targets.

Methods

BlazorDismissible

Name Description
Open() Set the visibility to true.
Close() Set the visibility to false.
Toggle() Toggling the visibility.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙