BlazorRamp.DialogFramework 1.0.0

Prefix Reserved
.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package BlazorRamp.DialogFramework --version 1.0.0
                    


                    

                
NuGet\Install-Package BlazorRamp.DialogFramework -Version 1.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="BlazorRamp.DialogFramework" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="BlazorRamp.DialogFramework" Version="1.0.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="BlazorRamp.DialogFramework" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add BlazorRamp.DialogFramework --version 1.0.0
                    


                    

                
#r "nuget: BlazorRamp.DialogFramework, 1.0.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package BlazorRamp.DialogFramework@1.0.0
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=BlazorRamp.DialogFramework&version=1.0.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=BlazorRamp.DialogFramework&version=1.0.0
                    


                            Install as a Cake Tool

Blazor Ramp - Modal Dialog Framework

The Blazor Ramp project aims to provide a suite of modular, accessibility-first Blazor components.

The Modal Dialog Framework component and service together make up a framework that allow you to have your content placed within a an HTML dialog element, with the framework taking care of all interactions with the HTML Dialog API.

This content is in the form of a standard blazor component and as such you just define your [Parameter] properties as normal as the means of passing data into your component. When you want to show your component in a dialog you just invoke the methods on the service providing it with the values for your component parameters.

The framework allows for nested dialogs and as it overrides the default HTML Dialog API escape key mechanism, via a subscription mechanism on the service, it gives you the ability to close the dialog when the escape key is pressed, or perhaps open another dialog asking for confirmation if the current dialog was a pop up form with unsaved changes etc.

As the HTML dialog makes everything beneath it inert, this also makes any centralised aria live regions inert. However, the announcement history component and its associated live regions react to dialog openings and are moved, so the live regions are always available via the live region service.

Requirements

It is a requirement that the Blazor Ramp Core script, Live Region Service, and associated Announcement History component are added alongside this component’s specific requirements, a stylesheet reference and service, as outlined below.

Note: Every package includes a reference to the Blazor Ramp Core project (where the aforementioned items reside) so there is no need to install this package separately (but it can be if you only require the Live Regions Service and Announcement History component).

The full documentation is available at: https://docs.blazorramp.uk

Installation

  1. Add the BlazorRamp.DialogFramework nuget package to your project using the Nuget Package Manager or the dotnet CLI.
dotnet add package BlazorRamp.DialogFramework
  1. Add the following Core and Dialog Framework stylesheet references to the <head> section of your application:
  • Blazor Web App / Blazor Server → App.razor
  • Blazor WebAssembly → wwwroot/index.html
<head>
	<link rel="stylesheet" href="_content/BlazorRamp.Core/assets/css/core.min.css" />
	<link rel="stylesheet" href="_content/BlazorRamp.DialogFramework/assets/css/dialog-framework.min.css" />
</head>
  1. Add the following Blazor Ramp Core live region script after Blazors script, as follows:
  • Blazor Web App / Blazor Server → App.razor
  • Blazor WebAssembly → wwwroot/index.html
<script src="_framework/blazor.web.js"></script>
<script type="module" src="_content/BlazorRamp.Core/assets/js/core-live-region.js"></script>
  1. Register BlazorRamp services in the Program.cs file (Both server and client if using Server and WebAssembly interactive rendermode)

Add the following lines to the service registration section for both the live region service contained in the Core project and the Modal Dialog Service contained in this package:

@using BlazorRamp.Core.Common.Extensions;
@using BlazorRamp.DialogFramework.Common.Extensions;

builder.Services.AddBlazorRampCore();
builder.Services.AddBlazorRampDialogService();
  1. Add the <AnnouncementHistory /> component with your parameter values above the Router component contained in either:
  • Blazor Web App / Blazor Server → Routes.razor
  • Blazor WebAssembly → App.razor

Note: If your project is a global Server or WebAssembly project then you can just place a single instance of the component with the appropriate render mode setting here with the Announcement History component. Please see the full documenation for more details regarding the placement of the <ModalDialogContainter /> component.

<AnnouncementHistory RefreshText="Refresh" ClearCloseText="Clear & Close" CloseText="Close" NoDataText="No announcements" 
Title="Recent Announcements" TriggerVisible="true" TriggerText="Alerts" />

<ModalDialogContainer @rendermode="InteractiveWebAssembly" />

<Router AppAssembly . . .

Using the Modal Dialog Framework

  1. Create a component that is to be the content of the modal dialog, with any [Parameter] properties that you want for data that will be passed into the dialog.
  2. Set the options for the dialogs positioning and widths.
  3. Create and poplulate a dialog parameters collection with the data for the parameters in your component.
  4. await the result of a call to your component via the dialog service.

The example below is taken from the demo on the documenataion, where <SomeForm /> is the component that is the content of the modal dialog.

        @inject ModalDialogService _dialogService

        SomePersonData somePersonData = new("John","Doe", 42,"United Kingdom");

        var dialogOptions     = new ModalDialogOptions(HorizontalAlignment.Centre, VerticalAlignment.Top);
        var dialogParameters  = new ModalDialogParameters<SomeForm>();

        dialogParameters.Add(x => x.SomePersonData, somePersonData);//The parameter/type and the data

        var dialogResult = await _dialogService.ShowDialog<SomeForm>(dialogParameters, dialogOptions);

        if (dialogResult.ButtonClicked == DialogResultButtons.Ok)
        {
            _outputMessage = "The data returned was:" + dialogResult.Data.ToString();
        }
        else
        {
            _outputMessage = "The operation was cancelled.";
        }

Full documentation available at: https://docs.blazorramp.uk

Screen Reader Browser Combination Tests:

  • On Windows 11 - JAWS, NVDA and Narrator each paired with Chrome, Edge and Firefox.
  • On macOS (Sequoia) VoiceOver was paired with Safari
  • On iPhone, VoiceOver was paired with Safari
  • On Android, TalkBack was paired with Chrome
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.0 31 2/15/2026

Initial release of the Blazor Ramp modal dialog framework