BxBlazor 0.0.1-CI-20200322-214955

BxBlazor (Carbon Design System) Components

Blazor components using IBM's Carbon Design System components

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

• dotnetcore 3.1 sdk
• aspnetcore 3.1 runtime

Installing

First, install the BxBlazor component in our project:

$: dotnet add package BxBlazor

Next we add the required tags to our index.html in web assembly project or _Host.cshtml in a server project:

.....

<link href="https://unpkg.com/carbon-components/css/carbon-components.min.css" rel="stylesheet" />

<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/prismjs@1.19.0/prism.min.js"></script>

<script>
    window.InitComponent = (component) => {
        CarbonComponents[component].init();
    };

    window.highlightAll = function () {
        Prism.highlightAll();
    };

    window.bxModal_show = function (id) {
        var element = document.getElementById(id);
        window.modal = CarbonComponents.Modal.create(element);
        window.modal.show();
    };

    window.bxNotification_show = function (id) {    
        var element = document.getElementById(id);
        element.classList.add("show");
        this.setTimeout(() => element.classList.remove("show"), 3000);    
    };
</script>

<script src="_framework/blazor.server.js"></script>

Finally add the using sections to _imports.razor:

@using BxBlazor
@using BxBlazor.Components.Grid
@using BxBlazor.Components
@using BxBlazor.Components.UIShell
@using BxBlazor.Models

the next step is to use the UIShell in the main layout:

MainLayout.razor

@inherits LayoutComponentBase

<div id="root">
    <ShellLayout>
        @Body
    </ShellLayout>
</div>

ShellLayout.razor

@using BxBlazor.Components.UIShell

<BxUIShell
    HeaderNavLinks="HeaderNavLinks"
    HeaderActions="HeaderActions"
    SwitcherLinks="SwitcherLinks"
    NavSections="Sections"
    SideNavFixed="true">
    <div class="bx--content">
        @ChildContent
    </div>
</BxUIShell>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    
    IEnumerable<HeaderNavLink> HeaderNavLinks
        = new List<HeaderNavLink> {
            new HeaderNavLink
            {
                Title = "test",
                Uri = "/"
            } ,
            new HeaderNavLink
            {
                Title = "with child items",
                ChildItems = new List<HeaderNavLink>
            {
                    new HeaderNavLink
                    {
                        Title = "item1",
                        Uri = "/",
                        ChildItems = new List<HeaderNavLink>
                    {
                            new HeaderNavLink
                            {
                                Title = "item1",
                                Uri = "/"
                            }
                        }
                    }
                }
            }
        };

    IEnumerable<SwitcherLink> SwitcherLinks;

    IEnumerable<NavMenuSection> Sections
        = new List<NavMenuSection> {
            new NavMenuSection()
            {
                NavMenuItems = new List<NavMenuItem>
            {
                    new NavMenuItem
                    {
                        Title = "Home",
                        Type = "link",
                        Uri = "/"
                    },
                    new NavMenuItem
                    {
                        Title = "Counter",
                        Type = "link",
                        Uri = "/counter"
                    },
                    new NavMenuItem
                    {
                        Title = "Fetch Data",
                        Type = "link",
                        Uri = "/fetchdata"
                    }
                }
            }

            };

    IEnumerable<HeaderAction> HeaderActions
        = new List<HeaderAction> {
            new HeaderAction {
                Title = "Products",
                SwitchIdSuffix = "products"
            } };
}