https://github.com/carlosga/blatternfly

Blatternfly is a Blazor implementation of PatternFly
https://github.com/carlosga/blatternfly

blazor blazor-components blazor-webassembly component-library components csharp dotnet6 wasm

Last synced: 5 months ago
JSON representation

Blatternfly is a Blazor implementation of PatternFly

• Host: GitHub
• URL: https://github.com/carlosga/blatternfly
• Owner: carlosga
• License: mit
• Created: 2021-07-16T16:58:24.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2022-10-07T17:51:44.000Z (over 3 years ago)
• Last Synced: 2025-11-06T22:29:32.526Z (7 months ago)
• Topics: blazor, blazor-components, blazor-webassembly, component-library, components, csharp, dotnet6, wasm
• Language: C#
• Homepage:
• Size: 24 MB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Build Status](https://img.shields.io/github/workflow/status/carlosga/blatternfly/Build%20&%20Tests?color=007ec6&logo=github&style=for-the-badge)](https://github.com/carlosga/blatternfly/actions/workflows/dotnet.yml)

[![GitHub last commit](https://img.shields.io/github/last-commit/carlosga/blatternfly?color=007ec6&style=for-the-badge&logo=github)](https://github.com/carlosga/blatternfly)

[![GitHub](https://img.shields.io/github/license/carlosga/blatternfly?color=007ec6&style=for-the-badge&logo=github)](https://github.com/carlosga/blatternfly/blob/master/LICENSE)

[![Nuget version](https://img.shields.io/nuget/vpre/Blatternfly?color=007ec6&label=nuget%20version&style=for-the-badge&logo=nuget)](https://www.nuget.org/packages/Blatternfly/)

[![Nuget downloads](https://img.shields.io/nuget/dt/Blatternfly?color=007ec6&label=nuget%20downloads&style=for-the-badge&logo=nuget)](https://www.nuget.org/packages/Blatternfly/)

## Blatternfly

# !! This repository has moved !!

# New location : https://codeberg.org/carlosga/blatternfly

[View demo](https://carlosga.github.io/blatternfly/)

## About The Project

**Blazor learning project.** Blatternfly is a [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) implementation of [PatternFly](https://www.patternfly.org/v4/).

### Built With

* [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor). Some parts of the form and input base components has been copied over from Blazor source code.

* [PatternFly](https://www.patternfly.org/v4/).

## Getting started

### Prerequisites

* .NET 6.0

### Imports

Add the following to `_Imports.razor`

```razor

@using Blatternfly

@using Blatternfly.Components

@using Blatternfly.Layouts

```

### Patternfly CSS

Add the following to `index.html`

```html

```

See also the [getting started](https://www.patternfly.org/v4/get-started/develop#htmlcss) section on the PatternFly website for more details.

### PatternFly Dark Theme

To dynamically enable/disable the dark theme use the `ThemeProvider` component, to set the dark theme as the default theme add the class `pf-theme-dark` to the `` tag.

### Configuration

Example of Blatternfly configuration in `Program.cs`

```csharp

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.RootComponents.Add("#app");

builder.Services.AddScoped(sp => new HttpClient

{

    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)

});

builder.AddBlatternfly();

var webhost = builder.Build();

await webhost.UseBlatternfly();

await webhost.RunAsync();

```

### Trimming

Configure assembly trimming via XML files as explained here '[Customizing Trimming in .NET 5](https://devblogs.microsoft.com/dotnet/customizing-trimming-in-net-core-5/#preservation)'.

```xml

  

    

    

    

    

  

```

## License

Distributed under the MIT License. See `LICENSE` for more information.

## Acknowledgements

* [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor).

* [PatternFly](https://www.patternfly.org/v4/).

* [CssBuilder](https://github.com/EdCharbeneau/CssBuilder).

* [StyleBuilder](https://github.com/EdCharbeneau/CssBuilder).

* [focus-trap](https://github.com/focus-trap/focus-trap).

* [tabbable](https://github.com/focus-trap/tabbable).

* [Floating UI](https://floating-ui.com).

* [PrismJS](https://prismjs.com/).

* [Night Owl theme for PrismJS](https://github.com/SaraVieira/prism-theme-night-owl).

* [Best Readme Template](https://github.com/othneildrew/Best-README-Template).