https://github.com/sjefvanleeuwen/nl-design-system-blazor

NL Design System for Blazor The NL Design System is a collection of reusable components, with which you can easily develop digital services as a designer or developer. Think of buttons, form elements and page templates. This project adapts the system so the components can be used from .NET Core Blazor (Web Assembly is supported).
https://github.com/sjefvanleeuwen/nl-design-system-blazor

blazor component-library design-system gebruiker-centraal government nl-design-system wasm web-assembly web-components

Last synced: about 1 year ago
JSON representation

NL Design System for Blazor The NL Design System is a collection of reusable components, with which you can easily develop digital services as a designer or developer. Think of buttons, form elements and page templates. This project adapts the system so the components can be used from .NET Core Blazor (Web Assembly is supported).

• Host: GitHub
• URL: https://github.com/sjefvanleeuwen/nl-design-system-blazor
• Owner: sjefvanleeuwen
• License: mit
• Created: 2020-06-27T15:13:58.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-02-11T16:39:19.000Z (over 5 years ago)
• Last Synced: 2025-04-12T01:17:50.912Z (about 1 year ago)
• Topics: blazor, component-library, design-system, gebruiker-centraal, government, nl-design-system, wasm, web-assembly, web-components
• Language: C#
• Homepage:
• Size: 8.45 MB
• Stars: 7
• Watchers: 2
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![nl design system for blazor](docs/img/nl-design-system-blazor.svg)

[![nuget](https://img.shields.io/nuget/v/Blazorized.NLDesignSystem)](https://www.nuget.org/packages/Blazorized.NLDesignSystem/) ![.NET Core](https://github.com/sjefvanleeuwen/nl-design-system-blazor/workflows/.NET%20Core/badge.svg)

# What is it?

The NL Design System is a collection of reusable components, with which you can easily develop digital services as a designer or developer. Think of buttons, form elements and page templates. This project adapts the system so the components can be used from .NET Core Blazor (Web Assembly is supported).

For the look and feel and feel of the design system visit:

[NL Design System](https://nl-design-system.gitlab.io/nl-design-system/index.html) version 0.1.1.

# Status

**This project is now in maintenance mode until the next release by the Core Team of NL Design System. NL Design System is being overhauled to HTML WebComponents framework.**

You can follow the project here: https://github.com/nl-design-system

This project componentized mostly all of the components available for NL-DESIGN-SYSTEM.

For a complete up to date status, please visit:

[Available Components](./src/Blazor.NLDesignSystem/Components/readme.md)

# Installation

## Nuget

Start a new Blazor APP and simply install the nuget package.

```

dotnet add package Blazorized.NLDesignSystem --version 1.0.1

```

Or go to the nuget page for more installation options: https://www.nuget.org/packages/Blazorized.NLDesignSystem/

## Index

Depending on running WASM or Server, change your index.html or _Host.cshtml. As a starting point:

```html

    

    

    Blazor.NLDesignSystem.Wasm

    

    

    

    

    

    

    

    

        System.config({

            packages: {

                '/': {

                    defaultExtension: 'js'

                }

            }

        });

    

    Loading...

    


        An unhandled error has occurred.

        Reload

        🗙

    

    

    navigator.serviceWorker.register('service-worker.js');

    


```

Contents from the Blazor Component Library are served from : _content/Blazor.NLDesignSystem/

# Serve the WASM sample.

Clone the repo and open it up in VS CODE. CWD to ./src/Blazor.NLDesignSystem.Wasm/

Execute the following command:

```

dotnet run

```

Point your favourite browser to https://localhost:5001/