Excubo.Blazor.Grids is a native-Blazor grid and dashboard component library.
Demo on github.io using Blazor Webassembly
- Convenient usage of a css grid
- Aspect ratio
- Movable elements
- Resizable elements
- Easy way to add rows and columns, either individually or in bulk
- Events on move or resize of elements
Excubo.Blazor.Grids is distributed via nuget.org.
Install-Package Excubo.Blazor.Gridsdotnet add package Excubo.Blazor.Grids<PackageReference Include="Excubo.Blazor.Grids" />@using Excubo.Blazor.Grids
<Grid RowGap="1em" ColumnGap="1em">
<RowDefinition Height="1fr" />
<RowDefinition Height="1fr" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<Element Column="0" Row="0">
<div style="background-color: purple; min-width: 2em; min-height: 2em"></div>
</Element>
<Element Column="0" Row="1">
<div style="background-color: pink; min-width: 2em; min-height: 2em"></div>
</Element>
<Element Column="1" Row="0">
<div style="background-color: gray; min-width: 2em; min-height: 2em"></div>
</Element>
<Element Column="1" Row="1">
<div style="background-color: green; min-width: 2em; min-height: 2em"></div>
</Element>
</Grid>or create a dashboard:
@using Excubo.Blazor.Grids
<Dashboard AspectRatio="1.5" ColumnCount="6">
<Element Column="0" Row="0" Title="A heading">
I'm in a dashboard, therefore movable and resizable.
</Element>
</Dashboard>Have a look at the fully working examples provided in the sample project.
- Blazor API
The API should feel like you're using Blazor, not a javascript library.
- Minimal js, minimal css, lazy-loaded only when you use the component
The non-C# part of the code of the library should be as tiny as possible. We set ourselves a maximum amount of 10kB for combined js+css. The current payload is less than 1kB, and only gets loaded dynamically when the component is actually used.
Events were changed such that the callback parameter is not an Element anymore, but ElementMoveArgs or ElementResizeArgs. To upgrade your code, apply the changes like this:
- private void OnMove(Element element)
- {
- GridEvents.Add(("moved", element.Title, element.Row, element.Column));
- }
+ private void OnMove(ElementMoveArgs args)
+ {
+ GridEvents.Add(("moved", args.Element.Title, args.NewRow, args.NewColumn));
+ }
- private void OnResize(Element element)
- {
- GridEvents.Add(("moved", element.Title, element.Row, element.Column));
- }
+ private void OnResize(ElementMoveArgs args)
+ {
+ GridEvents.Add(("moved", args.Element.Title, args.NewRow, args.NewColumn));
+ }