Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/excubo-ag/Blazor.Grids
https://github.com/excubo-ag/Blazor.Grids
blazor dashboard grid-layout
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/excubo-ag/Blazor.Grids
- Owner: excubo-ag
- License: mit
- Created: 2020-07-17T10:13:28.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-13T10:36:35.000Z (4 months ago)
- Last Synced: 2024-07-14T10:53:55.926Z (4 months ago)
- Topics: blazor, dashboard, grid-layout
- Language: C#
- Homepage: https://excubo-ag.github.io/Blazor.Grids/
- Size: 5.86 MB
- Stars: 38
- Watchers: 4
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazor - Blazor.Grids -  Component library for CSS grids with extra features, such as moving and resizing interactively. Create your own dashboard with ease. ([Demo](https://excubo-ag.github.io/Blazor.Grids/)). (Libraries & Extensions / 2D/3D Rendering engines)
README
## Excubo.Blazor.Grids
[](https://www.nuget.org/packages/Excubo.Blazor.Grids/)
[](https://www.nuget.org/packages/Excubo.Blazor.Grids/)
[](https://github.com/excubo-ag/Blazor.Grids)
Excubo.Blazor.Grids is a native-Blazor grid and dashboard component library.
[Demo on github.io using Blazor Webassembly](https://excubo-ag.github.io/Blazor.Grids/)
## Key features
- 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
## How to use
### 1. Install the nuget package Excubo.Blazor.Grids
Excubo.Blazor.Grids is distributed [via nuget.org](https://www.nuget.org/packages/Excubo.Blazor.Grids/).
[](https://www.nuget.org/packages/Excubo.Blazor.Grids/)
#### Package Manager:
```ps
Install-Package Excubo.Blazor.Grids
```
#### .NET Cli:
```cmd
dotnet add package Excubo.Blazor.Grids
```
#### Package Reference
```xml
```
### 2. Add the `Grid` (or a `Dashboard`) component to your app
```html
@using Excubo.Blazor.Grids
```
or create a dashboard:
```html
@using Excubo.Blazor.Grids
I'm in a dashboard, therefore movable and resizable.
```
Have a look at the fully working examples provided in [the sample project](https://github.com/excubo-ag/Blazor.Grids/tree/main/TestProject_Components).
## Design principles
- 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.
## Breaking changes
### Version 3.X.Y
Targets net6.0 exclusively from now on.
### Version 2.X.Y
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:
```diff
- 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));
+ }
```