The source code of the Getting started with Blorc.PatternFly tutorial published in the PatternFly Medium Publication.
-
Create a new Blazor app with Blazor WebAssembly experience
-
Update
wwwroot/index.htmlfile.<!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.csfile.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.razorfile.@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>