A component library and a design system – Blazor in depth (W8, lesson 5)

What you learn in this lesson

create and reference a Razor class library and explain what sets it apart from an ordinary class library

keep design values as custom properties in SCSS and ship component styles with CSS isolation

build components with templates (RenderFragment<T>) and type parameters and enforce the required parameters

write a library without a render mode and show that it runs in static SSR and interactively

record accessibility as a contract with tests

use DynamicComponent with a list of known types

After a year, every application has three buttons that look almost the same and four tables, one of which forgot the caption element. So the Kladde now moves its building blocks into a library of its own, Kladde.UI, with fixed design values, and states what a building block promises to everyone who uses it. The goal is small: button, field, dialog and table. Packaging, versioning and publishing at scale belong to the later architecture course W11; here you only learn how the library is built and how to tell that it keeps what it promises.

Where the Kladde stands

The lesson assumes K2: components, parameters and ChildContent from 0602, isolated stylesheets as .razor.scss from the same chapter, the building blocks for fields from 0605 and the rules for keyboard and screen readers from 0613. New is the project src/Kladde.UI, which Kladde.Web (and later every further project) references. It is added to Kladde.slnx and is part of the case study from here on. Keep your own names and carry the steps over. The components from K2 that appear on only one page (PageHeader, ContactCard) stay in Kladde.Web; what moves into the library is what more than one page needs.

What you learn in this lesson

Where the Kladde stands

This lesson belongs to course W8