Skip to content

Commit 7387c34

Browse files
author
Sebastian-Debian
committed
Added support for global options.
Updated Readme and tests.
1 parent 9a95d2a commit 7387c34

6 files changed

Lines changed: 337 additions & 49 deletions

File tree

‎README.md‎

Lines changed: 56 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ A modern, lightweight Blazor component library for creating **CSS Grid Layouts**
1818

1919
---
2020

21+
## Live Demo
22+
> Explore all features and live examples here:
23+
[https://codingcodeseb.github.io/Blazor.SimpleGrid/](https://codingcodeseb.github.io/Blazor.SimpleGrid/)
24+
25+
---
26+
2127
## Installation
2228

2329
1. Install the package via NuGet:
@@ -55,21 +61,56 @@ A modern, lightweight Blazor component library for creating **CSS Grid Layouts**
5561

5662
---
5763

58-
## Configuration
59-
60-
### SimpleGrid (Container)
61-
- Columns: string (e.g., "1fr 100px")
62-
- Rows: string (optional)
63-
- Gap: string (combined shorthand)
64-
- TemplateAreas: string (separated by |)
65-
- Horizontal: HorizontalAlignment Enum
66-
- AutoFlow: GridAutoFlow Enum
67-
68-
### SimpleGridItem (Element)
69-
- Area: string (assigned area name)
70-
- ColumnSpan: int (span count)
71-
- RowSpan: int (span count)
72-
- Horizontal: HorizontalAlignment (Self)
64+
## Global Configuration (Optional)
65+
66+
You can define project-wide defaults for your grids using the SimpleGridOptions. This is useful for maintaining consistent spacing and alignment across your entire application without repeating parameters on every component.
67+
68+
### 1. Registration in Program.cs
69+
70+
You can register the services in your Program.cs file.:
71+
72+
Custom Global Defaults
73+
This allows you to override any property for all grids in your app.
74+
```csharp
75+
builder.Services.AddSimpleGrid(options => { options.HorizontalGap = "20px"; options.VerticalGap = "20px"; options.ItemHorizontalAlignment = HorizontalAlignment.Center; options.Columns = "1fr 1fr"; // All grids will default to 2 columns });
76+
```
77+
78+
### 2. Priority Order
79+
80+
The components follow a strict priority logic to determine which value to use:
81+
1. Local Parameter: Value set directly on the <SimpleGrid> or <SimpleGridItem> tag.
82+
2. Global Options: Value set in Program.cs via AddSimpleGrid.
83+
3. Library Defaults: Hardcoded fallbacks in the SimpleGridOptions class.
84+
85+
---
86+
87+
## API Reference
88+
#### SimpleGrid (Container)
89+
90+
| Property | Type | Default | Description |
91+
| :--- | :--- | :--- | :--- |
92+
| Columns | string | Options.Columns | Defines grid columns (e.g., "1fr 2fr"). |
93+
| Rows | string | "none" | Defines explicit grid rows. |
94+
| TemplateAreas| string | null | Named areas using &vert; as row separator. |
95+
| AutoFlow | GridAutoFlow| Row | Controls the auto-placement algorithm. |
96+
| AutoColumns | string | "auto" | Size of implicitly created columns. |
97+
| AutoRows | string | "auto" | Size of implicitly created rows. |
98+
| Gap | string | null | Shorthand for both Horizontal and Vertical gap. |
99+
| Width | string | "auto" | Width of the grid container. |
100+
| Height | string | "auto" | Height of the grid container. |
101+
| HorizontalAlignment | HorizontalAlignment | Start | Align grid content (justify-content). |
102+
| VerticalAlignment | VerticalAlignment | Stretch | Align items (align-items). |
103+
#### SimpleGridItem (Element)
104+
105+
| Property | Type | Default | Description |
106+
| :--- | :--- | :--- | :--- |
107+
| Area | string | "" | Name of the target grid area. |
108+
| Column | string | "auto" | Starting column position. |
109+
| Row | string | "auto" | Starting row position. |
110+
| ColumnSpan | int | 1 | Number of columns to span. |
111+
| RowSpan | int | 1 | Number of rows to span. |
112+
| HorizontalAlignment | HorizontalAlignment | Stretch | justify-self. |
113+
| VerticalAlignment | VerticalAlignment | Stretch | align-self. |
73114

74115
---
75116

‎src/Blazor.SimpleGrid/Components/SimpleGrid.razor‎

Lines changed: 61 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
@using Blazor.SimpleGrid.Enums
22
@using Blazor.SimpleGrid.Extensions
3+
@using Blazor.SimpleGrid.Models
4+
@using Microsoft.Extensions.DependencyInjection
5+
@inject IServiceProvider ServiceProvider
36

4-
<div @attributes="AdditionalAttributes" style="@getFullStyle()">
7+
<div @attributes="AdditionalAttributes" style="@GetFullStyle()">
58
@ChildContent
69
</div>
710

@@ -22,37 +25,37 @@
2225
/// Defines the columns of the grid (e.g., "1fr 2fr" or "repeat(3, 1fr)").
2326
/// </summary>
2427
[Parameter]
25-
public string Columns { get; set; } = "repeat(auto-fit, minmax(200px, 1fr))";
28+
public string? Columns { get; set; }
2629

2730
/// <summary>
2831
/// Defines named grid areas. Use the pipe symbol '|' to separate rows (e.g., "header header | sidebar content").
2932
/// </summary>
3033
[Parameter]
31-
public string TemplateAreas { get; set; } = "";
34+
public string? TemplateAreas { get; set; }
3235

3336
/// <summary>
3437
/// Controls the auto-placement algorithm (e.g., Row, Column, Dense).
3538
/// </summary>
3639
[Parameter]
37-
public GridAutoFlow AutoFlow { get; set; } = GridAutoFlow.Row;
40+
public GridAutoFlow? AutoFlow { get; set; }
3841

3942
/// <summary>
4043
/// Sets the size of implicitly created grid rows.
4144
/// </summary>
4245
[Parameter]
43-
public string AutoRows { get; set; } = "auto";
46+
public string? AutoRows { get; set; }
4447

4548
/// <summary>
4649
/// Spacing between columns.
4750
/// </summary>
4851
[Parameter]
49-
public string HorizontalGap { get; set; } = "1rem";
52+
public string? HorizontalGap { get; set; }
5053

5154
/// <summary>
5255
/// Spacing between rows.
5356
/// </summary>
5457
[Parameter]
55-
public string VerticalGap { get; set; } = "1rem";
58+
public string? VerticalGap { get; set; }
5659

5760
/// <summary>
5861
/// Sets both HorizontalGap and VerticalGap to the same value.
@@ -64,19 +67,39 @@
6467
/// The height of the grid container.
6568
/// </summary>
6669
[Parameter]
67-
public string Height { get; set; } = "auto";
70+
public string? Height { get; set; }
71+
72+
/// <summary>
73+
/// The width of the grid container.
74+
/// </summary>
75+
[Parameter]
76+
public string? Width { get; set; }
6877

6978
/// <summary>
7079
/// Aligns the entire grid content horizontally.
7180
/// </summary>
7281
[Parameter]
73-
public HorizontalAlignment Horizontal { get; set; } = HorizontalAlignment.Start;
82+
public HorizontalAlignment? HorizontalAlignment { get; set; }
7483

7584
/// <summary>
7685
/// Aligns items within their grid areas vertically.
7786
/// </summary>
7887
[Parameter]
79-
public VerticalAlignment Vertical { get; set; } = VerticalAlignment.Stretch;
88+
public VerticalAlignment? VerticalAlignment { get; set; }
89+
90+
/// <summary>
91+
/// Defines the explicit rows of the grid (e.g., "100px auto 1fr").
92+
/// If not set, grid-template-rows will be "none" or controlled by AutoRows.
93+
/// </summary>
94+
[Parameter]
95+
public string? Rows { get; set; }
96+
97+
/// <summary>
98+
/// Sets the size of implicitly created grid columns.
99+
/// Useful when AutoFlow is set to Column.
100+
/// </summary>
101+
[Parameter]
102+
public string? AutoColumns { get; set; }
80103

81104
/// <summary>
82105
/// Custom CSS styles to be appended to the inline style attribute.
@@ -87,7 +110,7 @@
87110
/// <summary>
88111
/// Formats the TemplateAreas string by converting the pipe '|' separator into valid CSS syntax.
89112
/// </summary>
90-
private string formatAreas(string areas)
113+
private string FormatAreas(string? areas)
91114
{
92115
if (string.IsNullOrWhiteSpace(areas))
93116
return "none";
@@ -99,24 +122,39 @@
99122
/// <summary>
100123
/// Compiles all parameters into a single CSS inline style string.
101124
/// </summary>
102-
private string getFullStyle()
125+
private string GetFullStyle()
103126
{
104-
// Shorthand logic: If 'Gap' is provided, it overrides Horizontal/VerticalGap.
105-
// If 'Gap' is null, we use the individual gap values.
106-
string effectiveHorizontal = !string.IsNullOrEmpty(Gap) ? Gap : HorizontalGap;
107-
string effectiveVertical = !string.IsNullOrEmpty(Gap) ? Gap : VerticalGap;
127+
var options = ServiceProvider.GetService<SimpleGridOptions>() ?? new SimpleGridOptions();
128+
129+
// Priority: Parameter > Global Service Options
130+
string cols = Columns ?? options.Columns;
131+
string rows = Rows ?? options.Rows;
132+
string autoCols = AutoColumns ?? options.AutoColumns;
133+
string autoRows = AutoRows ?? options.AutoRows;
134+
string w = Width ?? options.Width;
135+
string h = Height ?? options.Height;
136+
var flow = AutoFlow ?? options.AutoFlow;
137+
var hAlign = HorizontalAlignment ?? options.HorizontalAlignment;
138+
var vAlign = VerticalAlignment ?? options.VerticalAlignment;
139+
140+
// Gap Logic: Shorthand 'Gap' overrides specific gaps
141+
string effectiveHorizontal = !string.IsNullOrEmpty(Gap) ? Gap : (HorizontalGap ?? options.HorizontalGap);
142+
string effectiveVertical = !string.IsNullOrEmpty(Gap) ? Gap : (VerticalGap ?? options.VerticalGap);
108143

109144
return $@"
110145
display: grid;
111-
grid-template-columns: {Columns};
112-
grid-template-areas: {formatAreas(TemplateAreas)};
113-
grid-auto-flow: {AutoFlow.ToCss()};
114-
grid-auto-rows: {AutoRows};
146+
width: {w};
147+
height: {h};
148+
grid-template-columns: {cols};
149+
grid-template-rows: {rows};
150+
grid-template-areas: {FormatAreas(TemplateAreas)};
151+
grid-auto-flow: {flow.ToCss()};
152+
grid-auto-columns: {autoCols};
153+
grid-auto-rows: {autoRows};
115154
column-gap: {effectiveHorizontal};
116155
row-gap: {effectiveVertical};
117-
justify-content: {Horizontal.ToCss()};
118-
align-items: {Vertical.ToCss()};
119-
height: {Height};
156+
justify-content: {hAlign.ToCss()};
157+
align-items: {vAlign.ToCss()};
120158
{Style}";
121159
}
122160
}

‎src/Blazor.SimpleGrid/Components/SimpleGridItem.razor‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
@using Blazor.SimpleGrid.Enums
22
@using Blazor.SimpleGrid.Extensions
3+
@using Blazor.SimpleGrid.Models
4+
@using Microsoft.Extensions.DependencyInjection
5+
@inject IServiceProvider ServiceProvider
36

4-
<div @attributes="AdditionalAttributes" style="@getFullStyle()">
7+
<div @attributes="AdditionalAttributes" style="@GetFullStyle()">
58
@ChildContent
69
</div>
710

@@ -52,13 +55,13 @@
5255
/// Aligns this specific item horizontally within its cell (justify-self).
5356
/// </summary>
5457
[Parameter]
55-
public HorizontalAlignment Horizontal { get; set; } = HorizontalAlignment.Stretch;
58+
public HorizontalAlignment? HorizontalAlignment { get; set; }
5659

5760
/// <summary>
5861
/// Aligns this specific item vertically within its cell (align-self).
5962
/// </summary>
6063
[Parameter]
61-
public VerticalAlignment Vertical { get; set; } = VerticalAlignment.Stretch;
64+
public VerticalAlignment? VerticalAlignment { get; set; }
6265

6366
/// <summary>
6467
/// Custom CSS styles to be appended to the item's inline style.
@@ -69,11 +72,17 @@
6972
/// <summary>
7073
/// Compiles item parameters into a single CSS inline style string.
7174
/// </summary>
72-
private string getFullStyle()
75+
private string GetFullStyle()
7376
{
77+
var options = ServiceProvider.GetService<SimpleGridOptions>() ?? new SimpleGridOptions();
78+
79+
// Nutze den gesetzten Parameter oder den globalen Standardwert aus dem Service
80+
var hAlign = HorizontalAlignment ?? options.ItemHorizontalAlignment;
81+
var vAlign = VerticalAlignment ?? options.ItemVerticalAlignment;
82+
7483
var baseStyle = $@"
75-
justify-self: {Horizontal.ToCss()};
76-
align-self: {Vertical.ToCss()};
84+
justify-self: {hAlign.ToCss()};
85+
align-self: {vAlign.ToCss()};
7786
{Style}";
7887

7988
if (!string.IsNullOrWhiteSpace(Area))

‎src/Blazor.SimpleGrid/Extensions/ServiceCollectionExtensions.cs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using Blazor.SimpleGrid.Models;
2+
using Microsoft.Extensions.DependencyInjection;
3+
4+
namespace Blazor.SimpleGrid.Extensions;
5+
6+
/// <summary>
7+
/// Provides extension methods to register SimpleGrid services.
8+
/// </summary>
9+
public static class SimpleGridServiceCollectionExtensions
10+
{
11+
/// <summary>
12+
/// Adds SimpleGrid configuration options to the service collection.
13+
/// </summary>
14+
/// <param name="services">The service collection.</param>
15+
/// <param name="configure">An optional delegate to configure the global defaults.</param>
16+
/// <returns>The updated service collection.</returns>
17+
public static IServiceCollection AddSimpleGrid(this IServiceCollection services, Action<SimpleGridOptions>? configure = null)
18+
{
19+
var options = new SimpleGridOptions();
20+
21+
// Execute the user's configuration if provided
22+
configure?.Invoke(options);
23+
24+
// Register as Singleton so it's available everywhere in the app
25+
services.AddSingleton(options);
26+
27+
return services;
28+
}
29+
}

0 commit comments

Comments
 (0)