Blorc.PatternFly

Blazor wrappers for PatternFly.

To view the latest develop branch in action, visit the GitHub pages: http://blorc-patternfly.wildgums.com/

The ultimate goal of this library is to wrap all PatternFly components and making them available as Blazor components.

Components

Done

About modal
Accordion
Alert
Application launcher
Avatar
Background image
Badge
Brand
Breadcrumb
Button
Card
Checkbox
Chip group
Clipboard copy
Dropdown
Empty state
Expandable
FormSelect
Input group
Label
List
Modal
Nav
Page
Pagination
Progress
Radio
Select
Table
Tabs
Text
Text area
Text input
Title
Tooltip

Todo

Context selector
Data list
Form
Login page
Options menu
Popover
Skip to content
Switch
Wizard

Layouts

Done

Bullseyes
Flex
Gallery
Grid
Level
Split
Stack

Todo

Toolbar

Examples

Live Demo: http://blorc-patternfly.wildgums.com/
Quick Start: https://github.com/alexfdezsauco/Blorc.PatternFly.QuickStart

Summary of quick start steps

Create a new Blazor app with Blazor WebAssembly experience

Update wwwroot/index.html file.

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
         <title>Blorc.PatternFly.QuickStart</title>
         <base href="/" />
         <script src="_content/Blorc.Core/injector.js"></script>
         <link href="css/site.css" rel="stylesheet" />
     </head>
     <body>
         <app>Loading...</app>
         <script src="_framework/blazor.webassembly.js"></script>
     </body>
 </html>

Update Program.cs file.

 namespace Blorc.PatternFly.QuickStart
 {
     using System;
     using System.Net.Http;
     using System.Threading.Tasks;

     using Blorc.PatternFly.Services.Extensions;
     using Blorc.Services;

     using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
     using Microsoft.Extensions.DependencyInjection;

     public class Program
     {
         public static async Task Main(string[] args)
         {
             var builder = WebAssemblyHostBuilder.CreateDefault(args);

             builder.RootComponents.Add<App>("app");

             builder.Services.AddBlorcCore();
             builder.Services.AddBlorcPatternFly();
             
             builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

             await builder.Build().MapComponentServices(options => options.MapBlorcPatternFly()).RunAsync();
         }
     }
 }

Update App.razor file.

 @using Blorc.PatternFly.Services.Extensions
 @using Blorc.Services

 @inherits Blorc.Components.BlorcApplicationBase

 @if (Initialized)
 {
     <Router AppAssembly="@typeof(Program).Assembly">
         <Found Context="routeData">
             <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
         </Found>
         <NotFound>
             <LayoutView Layout="@typeof(MainLayout)">
                 <p>Sorry, there's nothing at this address.</p>
             </LayoutView>
         </NotFound>
     </Router>
 }

 @code
 {
     protected override async Task OnConfiguringDocumentAsync(IDocumentService documentService)
     {
         await documentService.InjectBlorcPatternFly();
     }
 }

Update Shared\MainLayout.razor file.

 @using Blorc.PatternFly.Layouts
 @using Blorc.PatternFly.Components.Page
 @using Blorc.PatternFly.Components.Button

 @inherits Blorc.Components.BlorcLayoutComponentBase

 <Page>
     <LogoContent>
         Blorc.PatternFly.QuickStart
     </LogoContent>
     <ToolbarContent>
         <Button Component="a" Variant="ButtonVariant.Primary" Href="http://blazor.net">
             About
         </Button>
     </ToolbarContent>
     <SidebarContent>
         <NavMenu />
     </SidebarContent>
     <MainContent>
         @Body
     </MainContent>
 </Page>

Start using PatternFly components. For instance in the Shared\NavMenu.razor.

 @using Blorc.PatternFly.Components.Navigation
 @using Blorc.PatternFly.Components.Icon
 @using Blorc.PatternFly.Layouts.Split

 <Navigation>
     <Items>
         <NavigationItem Link="/">
             <Split IsGutter="true">
                 <SplitItem><HomeIcon /></SplitItem>
                 <SplitItem>Home</SplitItem>
             </Split>
         </NavigationItem>
         <NavigationItem Link="/counter">
             <Split IsGutter="true">
                 <SplitItem><PlusIcon /></SplitItem>
                 <SplitItem>Counter</SplitItem>
             </Split>
         </NavigationItem>
         <NavigationItem Link="/fetchdata">
             <Split IsGutter="true">
                 <SplitItem><ListIcon /></SplitItem>
                 <SplitItem>Fetch data</SplitItem>
             </Split>
         </NavigationItem>
     </Items>
 </Navigation>

Contributing

If you would like support for any new component, you can get in touch by:

Creating tickets.
Contributing by pull requests.
Contributing via Open Collective.

Name		Name	Last commit message	Last commit date
Latest commit History 1,093 Commits
.config		.config
.github		.github
deployment/cake		deployment/cake
design		design
src		src
tools		tools
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
GitReleaseManager.yaml		GitReleaseManager.yaml
GitVersion.yml		GitVersion.yml
README.md		README.md
build.cake		build.cake
build.ps1		build.ps1
cake.config		cake.config

WildGums/Blorc.PatternFly

Folders and files

Latest commit

History

Repository files navigation

Blorc.PatternFly

Components

Done

Todo

Layouts

Done

Todo

Examples

Summary of quick start steps

Contributing

About

Topics

Resources

Stars

Watchers

Forks

Sponsor this project

Languages