Pixata.Blazor 5.4.0

Pixata.Blazor

Like many developers, I find myself writing the same Blazor components over and over again. I have gathered some of those components together in one place, and am making them available for anyone else who might find them useful.

A Nuget package is available for these components.

Version 5.4.0 lets you theme the audit viewer, Confirm, Inform and the notifications through the CSS variables in pixata.css, lets notifications show formatted messages (such as a list), and changes the notifications' default icons to ones in Font Awesome's free set. Some class names and ids have changed, so if you styled any of these yourself, see styling changes in v5.4.0 below.

Version 5.3.0 makes some changes that help when moving from Telerik's components...

• PixataDropDownList has an icon-only mode, set with the new Icon (or IconTemplate) parameter. See the drop-downs documentation
• The content of a PixataGridCommandColumn is now given the row's item, so its buttons can depend on the row. If a template inside the column also uses context, add Context="row" to the column. See the grid documentation
• Behaviour change: when you set PixataTabStrip.ActiveTabId one way and handle ActiveTabIdChanged yourself, the tab now only changes when you set ActiveTabId, as in Telerik, so you can load a tab's data before it is shown. @bind-ActiveTabId works as before. See the tab strip documentation
• Leaving a page while a date picker, calendar or VirtualiseWithState is starting up no longer crashes the circuit

Version 5.2.0 adds PixataDateRangePicker, for picking the start and end of a range of dates, and gives PixataCalendar a range selection mode and the Views parameter for showing more than one month side by side. See the date picker documentation for details.

Version 5.1.0 adds typed grid columns (PixataTextGridColumn, PixataNumericGridColumn, PixataDateGridColumn and PixataEnumGridColumn) with short lists of filter operators, the FilterOperators and ShowFilterCellButtons column parameters, and PixataGridBoolFilter, a three-state checkbox filter for bool columns. See the grid documentation for details.

Version 5.0.0 adds a large set of new components: PixataGrid (with Excel export in the separate Pixata.Blazor.Grid.Excel package), the date picker, drop-downs, tab strip, editor, file select and upload, dialogs, window, wizard and stepper, radio group, switch, charts, drop-down and split buttons, scheduler, and the FormRowDate form row. See the documentation pages below for details.

Styling changes in v5.4.0

These only affect you if you wrote CSS of your own for these components, or relied on their default look.

• Audit viewer classes. The viewer's styles have moved from a <style> block inside the component into pixata.css, and every class now starts with pixata-blazor-audit-, followed by the old name without any audit- it started with. So view-btn is now pixata-blazor-audit-view-btn, and audit-timeline is now pixata-blazor-audit-timeline. The old names were global, so they could clash with your own CSS, and the block's rules (for .filters, .spinner, .user and so on) applied to the rest of your page while the viewer was on it. The colours now come from the --pixata-* variables, so the viewer follows your theme, and it uses your page's font rather than the system font. See styling the audit viewer.
• Confirm and Inform ids. The confirmOverlay, confirmOverlayContent, informOverlay and informOverlayContent ids are now the classes pixata-blazor-confirm-overlay, pixata-blazor-confirm-content, pixata-blazor-inform-overlay and pixata-blazor-inform-content, so you can have more than one on a page. The pop-up has a softer shadow and smaller corners, and both can be changed with variables. See Containers.
• Notification icons. The default icons are now Font Awesome's solid (fas) ones, which are in the free set, rather than the regular (far) ones, most of which are Pro only. The icon colours now come from CSS variables, so NotificationHelper.GetIcon() is obsolete. See Notifications.

I sometimes waffle on about these components in my blog. No-one reads it, but it satisfies my deeply buried desire to be a writer. If you read the blog, you'll realize why the desire is still deeply buried!

There is a complementary package, which contains additional components for those who have a subscription to Telerik.

Sample project

I have added a Blazor web project to the repository, and use that to try out and demonstrate the components. It doesn't contain samples for all the components yet, but I hope to add more over time. It is deployed at test.pixata.co.uk.

Documentation

The documentation is split over the following pages...

Registering dependencies

Some components in this package require services to be registered in the DI container. To make this easier, you can use the AddPixataBlazor extension method in your Program.cs file...

builder.Services.AddPixataBlazor();

This registers the following services (all from this package)...

PersistentStateHelper<T> does the same job as the [PersistentState] attribute added in .NET 10. This one was written around .NET 8, and is still useful for projects targetting .NET versions before 10.

It also registers Blazored.LocalStorage, which ScrollStateService needs. This package has always referenced Blazored.LocalStorage, but until v2.34.0 it left you to register it, so unless you knew to add builder.Services.AddBlazoredLocalStorage() yourself, your app fell over at startup when the container was validated. If you have already registered it (with your own options, for example), your registration is left alone.

Note that you need to do this in any Program.cs file, so if you have a mixed rendering mode (both server-side and client-side), you'll need to call AddPixataBlazor in both Program.cs files.

It is a good idea to add this line after your own service registrations, as it checks for duplicate registrations. Therefore, if you have already registered any of the services, you will see a message in your console...

A service of type TemplateHelper has already been registered

This isn't actually a problem, but removing the duplicate registration will keep the code file a bit cleaner.

The audit viewer and the payload encryption have their own registration methods, as most apps don't want them. See the pages listed above.

The dialog host

If you want to show the alert, confirm and prompt dialogs from code (with PixataDialogFactory), add the host component to your layout, inside an interactively rendered component...

@using Pixata.Blazor.Components

<PixataDialogHost />

If you ask for one of these dialogs without a host on the page, you get an exception telling you to add it. If your layout is rendered statically and only some pages are interactive, put the host in those pages instead, as it has to share a DI scope with the code that shows the dialogs. See Dialogs for more.

Styling

Don't forget to add the stylesheet, or the components will render unstyled...

<link rel="stylesheet" href="_content/Pixata.Blazor/pixata.css" />

See Styling for what's in it, and how to fit it to your own theme.