https://github.com/aeagle/blazor-book

A Storybook like UI for Blazor components
https://github.com/aeagle/blazor-book

blazor components layout net storybook ui wasm webassembly

Last synced: 2 months ago
JSON representation

A Storybook like UI for Blazor components

• Host: GitHub
• URL: https://github.com/aeagle/blazor-book
• Owner: aeagle
• License: mit
• Created: 2022-02-17T23:17:47.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T18:54:36.000Z (9 months ago)
• Last Synced: 2024-05-01T15:11:57.728Z (9 months ago)
• Topics: blazor, components, layout, net, storybook, ui, wasm, webassembly
• Language: CSS
• Homepage:
• Size: 221 KB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# blazor-book

A Storybook like UI for hosting Blazor components



## Installation

The `BlazorBook` nuget package needs to be added to your Blazor WASM/Server app and your Razor Class library project containing your individual stories.

`Install-Package BlazorBook -ProjectName MyProject`

## Setup

In the startup of your Blazor WASM/Server app:

`app.RegisterAllStories(Assembly.Load("<>"));`

- In `_Imports.razor`

Add `@using BlazorBook.Components`

- In `App.razor`

  1. Add  to the top

  2. Add an AdditionalAssemblies prop on the  component as follows:

```html

  ...

```

The stories will be registered and the UI available on the path `/blazorbook`

## Stories

Create a Razor Class Library to contain your stories. This should also have the `BlazorBook` nuget package as a dependency.

For example a story can be as follows:

### HelloWorld.razor

```

@inherits BlazorBook.StoryComponent

@attribute [DisplayName("Story name")]

Hello @(world)!


@code {

    string world = "World!";

}

```