Blazor Window

A draggable HTML container that sits ontop of the page.

Features:

JavaScript Usage: Enables dynamic functionality with JavaScript.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component features

Simple window

<BlazorWindow InitialVisibility="false" Token="window-1">
    <BlazorWindowTitle>
        <div>Drag me</div>
        <BlazorWindowCloseButton Variants="new[] {BaseVariants.Danger}">Close</BlazorWindowCloseButton>
    </BlazorWindowTitle>
    <BlazorWindowContent>Window content</BlazorWindowContent>
</BlazorWindow>
<BlazorWindowOpenButton Variants="new[] {BaseVariants.Success}" TargetToken="window-1">Open</BlazorWindowOpenButton>
<BlazorWindowCloseButton Variants="new[] {BaseVariants.Danger}" TargetToken="window-1">Close</BlazorWindowCloseButton>

Button outside window

<BlazorWindow InitialVisibility="false" Token="window-token-2">
    <BlazorWindowTitle>Drag me</BlazorWindowTitle>
    <BlazorWindowContent>Window content</BlazorWindowContent>
</BlazorWindow>
<BlazorWindowOpenButton Variants="new[] {BaseVariants.Success}" TargetToken="window-token-2">Open</BlazorWindowOpenButton>
<BlazorWindowCloseButton Variants="new[] {BaseVariants.Danger}" TargetToken="window-token-2">Close</BlazorWindowCloseButton>

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorWindow border border-3 d-flex flex-column
BlazorWindow.primary border-primary
BlazorWindow.secondary border-secondary
BlazorWindow.success border-success
BlazorWindow.danger border-danger
BlazorWindow.warning border-warning
BlazorWindow.info border-info
BlazorWindowTitle grabbable d-flex flex-row
BlazorWindowTitle.primary text-bg-primary
BlazorWindowTitle.secondary text-bg-secondary
BlazorWindowTitle.success text-bg-success
BlazorWindowTitle.danger text-bg-danger
BlazorWindowTitle.warning text-bg-warning
BlazorWindowTitle.info text-bg-info
BlazorButton btn
BlazorButton.small btn-sm
BlazorButton.large btn-lg
BlazorButton.primary btn-primary
BlazorButton.secondary btn-secondary
BlazorButton.success btn-success
BlazorButton.danger btn-danger
BlazorButton.warning btn-warning
BlazorButton.info btn-info

Parameters

BlazorWindow

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Token string Establishes a unique identifier for components within Blazor Library. It enables association and coordination between related elements.
InitialVisibility bool Set the initial invisibility of the window.

BlazorWindowCloseButton

Name Type Description
TargetToken string Identifies the target component for interaction. It establishes connections and enables actions on specific targets.
OnClick EventCallback The method to be executed after the user click.
Variants string[] Specifies the variant of the component.
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorWindowOpenButton

Name Type Description
TargetToken string Identifies the target component for interaction. It establishes connections and enables actions on specific targets.
OnClick EventCallback The method to be executed after the user click.
Variants string[] Specifies the variant of the component.
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorWindowContent

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorWindowTitle

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Token string Establishes a unique identifier for components within Blazor Library. It enables association and coordination between related elements.
Variants string[] Specifies the variant of the component.

Methods

BlazorWindow

Name Description
CloseWindow() Close the window.
OpenWindow() Open the window.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙