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: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/WildGums/Blorc.PatternFly
• Owner: WildGums
• Archived: true
• Created: 2019-05-24T10:56:04.000Z (over 5 years ago)
• Default Branch: develop
• Last Pushed: 2023-01-12T08:08:10.000Z (almost 2 years ago)
• Last Synced: 2024-05-27T12:32:25.742Z (5 months ago)
• Topics: blazor, patternfly
• Language: C#
• Homepage:
• Size: 158 MB
• Stars: 29
• Watchers: 11
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-blazor - Blorc.PatternFly -   Blazor wrappers for [PatternFly](https://www.patternfly.org). To view the latest develop branch in action, visit the [demo](http://blorc-patternfly.wildgums.com/) app. (Libraries & Extensions / 2D/3D Rendering engines)

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.