{"id":24151358,"url":"https://github.com/xaviersolau/blazorlayout","last_synced_at":"2025-10-19T04:05:01.118Z","repository":{"id":50203681,"uuid":"352772055","full_name":"xaviersolau/BlazorLayout","owner":"xaviersolau","description":"The BlazorLayout project provides components to handle layout in your Blazor applications.","archived":false,"fork":false,"pushed_at":"2025-01-30T22:43:45.000Z","size":2699,"stargazers_count":18,"open_issues_count":1,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-03T21:42:50.501Z","etag":null,"topics":["blazor","component","css-grid","dotnet","html","layout","responsivelayout-component","style","web"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xaviersolau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-29T20:12:03.000Z","updated_at":"2025-05-11T14:56:59.000Z","dependencies_parsed_at":"2024-08-28T19:04:19.780Z","dependency_job_id":"9c3536a2-3c1d-4cf9-90db-1a841e5894f0","html_url":"https://github.com/xaviersolau/BlazorLayout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xaviersolau/BlazorLayout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviersolau%2FBlazorLayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviersolau%2FBlazorLayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviersolau%2FBlazorLayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviersolau%2FBlazorLayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xaviersolau","download_url":"https://codeload.github.com/xaviersolau/BlazorLayout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviersolau%2FBlazorLayout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275982502,"owners_count":25564149,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-19T02:00:09.700Z","response_time":108,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","component","css-grid","dotnet","html","layout","responsivelayout-component","style","web"],"created_at":"2025-01-12T09:15:17.447Z","updated_at":"2025-10-19T04:05:01.110Z","avatar_url":"https://github.com/xaviersolau.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BlazorLayout\nThe BlazorLayout project provides components to handle layout in your Blazor applications.\n\nThe BlazorLayout project provides Blazor components to help you to write your layout with\ndedicated basic layout elements. Behind the scene it is generating standard HTML code so it can\neasily be used in combination of other design system resources.\n\nBehind the scene, it is making a massive use of CSS Grid.\n\nThe idea of this project is that with a set of simple layout components we can cover a big part of the needs.\n\nDon't hesitate to post issues, pull requests on the project or to fork and improve the project.\n\n## Project dashboard\n\n[![Build - CI](https://github.com/xaviersolau/BlazorLayout/actions/workflows/build-ci.yml/badge.svg)](https://github.com/xaviersolau/BlazorLayout/actions/workflows/build-ci.yml)\n[![Coverage Status](https://coveralls.io/repos/github/xaviersolau/BlazorLayout/badge.svg?branch=main)](https://coveralls.io/github/xaviersolau/BlazorLayout?branch=main)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n\n| Package                                    | Nuget.org | Pre-release |\n|--------------------------------------------|-----------|-------------|\n|**SoloX.BlazorLayout**            |[![NuGet](https://img.shields.io/nuget/v/SoloX.BlazorLayout.svg)](https://www.nuget.org/packages/SoloX.BlazorLayout)|[![NuGet Beta](https://img.shields.io/nuget/vpre/SoloX.BlazorLayout.svg)](https://www.nuget.org/packages/SoloX.BlazorLayout)|\n\n## License and credits\n\nBlazorLayout project is written by Xavier Solau. It's licensed under the MIT license.\n\n * * *\n\n## Installation\n\nYou can checkout this Github repository or you can use the NuGet packages:\n\n**Install using the command line from the Package Manager:**\n```bash\nInstall-Package SoloX.BlazorLayout -version 1.0.0-alpha.16\n```\n\n**Install using the .Net CLI:**\n```bash\ndotnet add package SoloX.BlazorLayout --version 1.0.0-alpha.16\n```\n\n**Install editing your project file (csproj):**\n```xml\n\u003cPackageReference Include=\"SoloX.BlazorLayout\" Version=\"1.0.0-alpha.16\" /\u003e\n```\n\nOnce the package is referenced, you can add in you project **_Imports.razor** file all using directives to\nuse the components.\n\n```razor\n@using SoloX.BlazorLayout.Core\n@using SoloX.BlazorLayout.Containers\n@using SoloX.BlazorLayout.Containers.Dock\n@using SoloX.BlazorLayout.Containers.Grid\n@using SoloX.BlazorLayout.Layouts\n```\n\nMake sure that your application project CSS file defines the **box-sizing** property to **border-box**:\n\n```css\n* {\n    box-sizing: border-box;\n}\n```\n\nAnd you should also set width and height to 100% for the html and body elements:\n\n```css\nhtml, body {\n    width: 100%;\n    height: 100%;\n}\n```\n\n\n## How to use it\n\nNote that you can find code examples in this repository at this location: `src/examples`.\n\n### The ResponsiveLayout component\n\nThe ResponsiveLayout component can be used in your MainLayout.razor file. It provides a responsive main\nlayout implementation with a navigation menu, header, footer and outline view.\n\nHere is a screen from one of the repository example:\n\n![Full Sample](documents/FullSample.gif)\n\nThe component is designed with several parameters:\n\n| Parameter                                      | Description |\n|------------------------------------------------|-------------|\n| NavigationHeader (RenderFragment)              | Navigation menu Header |\n| NavigationMenu (RenderFragment)                | Navigation menu (HTML ul and li element should be used as children) |\n| SmallNavigationHeader (RenderFragment)         | Navigation menu Header (Small version) |\n| SmallNavigationMenu (RenderFragment)           | Navigation menu (Small version) |\n| Header (RenderFragment)                        | Main layout Header |\n| Footer (RenderFragment)                        | Main layout Footer |\n| Outline (RenderFragment)                       | Outline view |\n| ChildContent (RenderFragment)                  | Main layout Body |\n| UseSmallNavigation  (bool)                     | Force use of small navigation view |\n| EnableOutline (bool)                           | Enable/Disable outline view |\n| EnableContentScroll (bool)                     | Change scrolling behavior to force main layout view to fit the display view and to enable scrolling in the child view |\n| DisableHorizontalNavigationMenuScrollX (bool)  | Disable scroll on horizontal navigation menu and wrap content |\n| HideHeader (bool)                              | Hide header panel |\n| HideFooter (bool)                              | Hide footer panel |\n\nThe small navigation view is used depending on the size of the display view.\n\nSome cascading parameter are available in the child component of the ResponsiveLayout:\n\n| CascadingParameter       | Description |\n|--------------------------|-------------|\n| ScreenSize (ScreenSize)  | [The screen size](src\\libs\\SoloX.BlazorLayout\\Layouts\\ScreenSize.cs) |\n| ScrollInfo (ScrollInfo)  | [The main screen scroll info](src\\libs\\SoloX.BlazorLayout\\Core\\ScrollInfo.cs) |\n\n\n### Base layout components\n\n#### The containers\n\nAll containers are based on a `AContainer` abstract component that provides a `Fill` parameter. It allows you\nto define how the component is going to be sized:\n\n- **None**: Sized to fit its own content;\n- **Horizontal**: Sized to fill its parent space horizontally;\n- **Vertical**: Sized to fill its parent space vertically;\n- **Full**: Sized to fill its parent space both vertically and horizontally;\n\nHere is the list of available containers:\n\n| Component                              | Description               |\n|----------------------------------------|---------------------------|\n| BoxContainer      | A simple container that stack child elements vertically.    |\n| InlineContainer   | A simple container that stack child elements horizontally.    |\n| ResizeContainer   | A re-sizable container.    |\n| ResizeContainer   | A re-sizable container.    |\n| DockContainer   | A container that can dock a panel on a given side.    |\n| GridContainer   | A container that place its child cells along the grid definition.    |\n\n#### The panels\n\nAll panels are based on a `APanel` abstract component that provides a set of parameters like Class, Style,\nId that are basically mapped to the corresponding HTML element attributes.\n\n\u003e Note that all container are also based on `APanel` abstract component.\n\nFull list of `APanel` parameters:\n\n- **Class**: The HTML element `class` attribute;\n- **Style**: The HTML element `style` attribute;\n- **Id**: The HTML element `id` attribute;\n- **ChildContent**: The panel child `RenderFragment`;\n\nThe `APanel` also provides a ElementReference property that is referencing the HTML element associated to\n the panel instance once initialized and rendered.\n\nHere is the list of available panels:\n\n| Panel                              | Description               |\n|----------------------------------------|---------------------------|\n| DockPanel      | A simple container that stack child elements vertically.    |\n| GridCell   | A simple container that stack child elements horizontally.    |\n\n### The services\n\n#### Set up\nIn order to use the BlazorLayout services in your application, you have to register the services in your Startup.cs file or your Program.cs.\nA ServiceCollection extension method is available for that purpose:\n\n```csharp\nusing SoloX.BlazorLayout;\n\n// ...\n\n// Service collection setup method.\npublic void ConfigureServices(IServiceCollection services)\n{\n    services.AddBlazorLayout();\n}\n```\n\n#### The resize observer service\n\nLet's say that you need to follow the size changed event of a component in your page. The project provides\n you with some help to setup such observer: the `IResizeObserverService`.\n\nYou can inject the `IResizeObserverService` in your components.\n\nFor example we can define a ResizeCallback page that will register a resize callback with a `BoxContainer`:\n\n```razor\n@page \"/ResizeCallback\"\n\n@inject IResizeObserverService sizeObserverService\n\n@implements IResizeCallback\n\n@implements IAsyncDisposable\n\n\u003cBoxContainer @ref=\"ContainerReference\" Fill=\"Fill.Full\"\u003e\n    @* ... *@\n\u003c/BoxContainer\u003e\n```\n\nNote that:\n- We use `@ref` in order to get a reference on the component instance.\n- We implement `IResizeCallback` in order to use this as callback in the `IResizeObserverService`.\n- We implement `IAsyncDisposable` in order to dispose callback resources.\n\nHere is the C# part of the component:\n\n```csharp\n    // The BoxContainer reference used in the @ref property.\n    private BoxContainer ContainerReference { get; set; }\n\n    // The call back disposable returned by the callback registration.\n    private IAsyncDisposable callbackDisposable;\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (firstRender)\n        {\n            // Register the callback to the IResizeObserverService once the ContainerReference is set\n            // after the first render.\n            // Note that it returns a disposable callback object that must be disposed to properly\n            // unregister the service resources.\n            callbackDisposable = await sizeObserverService\n                .RegisterResizeCallbackAsync(this, ContainerReference.ElementReference);\n        }\n\n        await base.OnAfterRenderAsync(firstRender);\n    }\n\n    // Implement the IResizeCallback interface.\n    public ValueTask ResizeAsync(int width, int height)\n    {\n        // Callback code....\n\n        return ValueTask.CompletedTask;\n    }\n\n    // Dispose the callback resources.\n    public async ValueTask DisposeAsync()\n    {\n        await callbackDisposable.DisposeAsync();\n    }\n```\n\n#### The scroll observer service\n\nNow we are going to follow the scroll changed event of a component in your page. The project provides\n you with some help to setup such observer: the `IScrollObserverService`.\n\nYou can inject the `IScrollObserverService` in your components.\n\nFor example we can define a ScrollCallback page that will register a scroll callback with a `BoxContainer`:\n\n```razor\n@page \"/ScrollCallback\"\n\n@inject IScrollObserverService scrollObserverService\n\n@implements IScrollCallback\n\n@implements IAsyncDisposable\n\n\u003cBoxContainer @ref=\"ContainerReference\" Fill=\"Fill.Full\"\u003e\n    @* ... *@\n\u003c/BoxContainer\u003e\n```\n\nNote that:\n- We use `@ref` in order to get a reference on the component instance.\n- We implement `IScrollCallback` in order to use this as callback in the `IScrollObserverService`.\n- We implement `IAsyncDisposable` in order to dispose callback resources.\n\nHere is the C# part of the component:\n\n```csharp\n    // The BoxContainer reference used in the @ref property.\n    private BoxContainer ContainerReference { get; set; }\n\n    // The call back disposable returned by the callback registration.\n    private IAsyncDisposable callbackDisposable;\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (firstRender)\n        {\n            // Register the callback to the IScrollObserverService once the ContainerReference is set\n            // after the first render.\n            // Note that it returns a disposable callback object that must be disposed to properly\n            // unregister the service resources.\n            callbackDisposable = await scrollObserverService\n                .RegisterScrollCallbackAsync(this, ContainerReference.ElementReference);\n        }\n\n        await base.OnAfterRenderAsync(firstRender);\n    }\n\n    // Implement the IResizeCallback interface.\n    public ValueTask ScrollAsync(ScrollInfo scrollInfo)\n    {\n        // Callback code....\n\n        return ValueTask.CompletedTask;\n    }\n\n    // Dispose the callback resources.\n    public async ValueTask DisposeAsync()\n    {\n        await callbackDisposable.DisposeAsync();\n    }\n```\n\n#### The ResponsiveLayout service\n\nThe `IResponsiveLayoutService` is provided to allow you to dynamically hide the header or the footer panel.\n\nFor exemple you can inject the service in your component:\n\n```csharp\n[Inject]\npublic IResponsiveLayoutService ResponsiveLayoutService { get; set; }\n```\n\nAnd you can hide or show the header in your scroll call back method:\n\n```csharp\npublic ValueTask ScrollAsync(ScrollInfo scrollInfo)\n{\n    ResponsiveLayoutService.HideHeader(scrollInfo.Top \u003e 0);\n\n    return ValueTask.CompletedTask;\n}\n```\n\nNote that you should restore the Hide header/footer when your page is destroyed:\n\n```csharp\npublic async ValueTask DisposeAsync()\n{\n    ResponsiveLayoutService.HideHeader(false);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxaviersolau%2Fblazorlayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxaviersolau%2Fblazorlayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxaviersolau%2Fblazorlayout/lists"}