Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/WildGums/Blorc.PatternFly

Blazor wrappers for PatternFly (see https://www.patternfly.org/)
https://github.com/WildGums/Blorc.PatternFly

blazor patternfly

Last synced: 3 months ago
JSON representation

Blazor wrappers for PatternFly (see https://www.patternfly.org/)

Lists

README 

        
# Blorc.PatternFly



Blazor wrappers for [PatternFly](https://www.patternfly.org/).



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.



![](design/image.png)



## 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



1) Create a new Blazor app with Blazor WebAssembly experience

2) Update `wwwroot/index.html` file.



        

        

            

                

                

                Blorc.PatternFly.QuickStart

                

                

                

            

            

                Loading...

                

            

        



3) 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");



                    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();

                }

            }

        }



4) Update `App.razor` file.



        @using Blorc.PatternFly.Services.Extensions

        @using Blorc.Services



        @inherits Blorc.Components.BlorcApplicationBase



        @if (Initialized)

        {

            

                

                    

                

                

                    

                        
Sorry, there's nothing at this address.


                    

                

            

        }



        @code

        {

            protected override async Task OnConfiguringDocumentAsync(IDocumentService documentService)

            {

                await documentService.InjectBlorcPatternFly();

            }

        }



5) Update `Shared\MainLayout.razor` file.



        @using Blorc.PatternFly.Layouts

        @using Blorc.PatternFly.Components.Page

        @using Blorc.PatternFly.Components.Button



        @inherits Blorc.Components.BlorcLayoutComponentBase



        

            

                Blorc.PatternFly.QuickStart

            

            

                

                    About

                

            

            

                

            

            

                @Body

            

        

        

6) 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



        

            

                

                    

                        

                        Home

                    

                

                

                    

                        

                        Counter

                    

                

                

                    

                        

                        Fetch data

                    

                

            

        



## 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.