Skip to content

Commit 1a823b5

Browse files
JeremyJ78JeremyJ78
authored
Merge pull request #106 from Community-Toolkit-for-Fluent-UI-Blazor/fix/fluentcxtilegrid
enhance the tilegrid
2 parents fb88ca5 + d69d14a commit 1a823b5

9 files changed

Lines changed: 248 additions & 102 deletions

File tree

‎examples/demo/FluentUI.Demo.Shared/FluentUI.Blazor.Community.Components.xml‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10730,13 +10730,12 @@
1073010730
</summary>
1073110731
<param name="items">Items to add.</param>
1073210732
</member>
10733-
<member name="M:FluentUI.Blazor.Community.Components.GridLayoutBase.Add``1(System.String,System.Int32)">
10733+
<member name="M:FluentUI.Blazor.Community.Components.GridLayoutBase.Add``1(``0)">
1073410734
<summary>
1073510735
Adds an item into the layout.
1073610736
</summary>
1073710737
<typeparam name="T">Type of the item.</typeparam>
10738-
<param name="key">Key of the item.</param>
10739-
<param name="index">Index of the item.</param>
10738+
<param name="item">Item to add.</param>
1074010739
</member>
1074110740
<member name="M:FluentUI.Blazor.Community.Components.GridLayoutBase.Remove(System.Int32)">
1074210741
<summary>
@@ -11582,6 +11581,12 @@
1158211581
<member name="P:FluentUI.Blazor.Community.Components.Internal.TileGridSettings.RowHeight">
1158311582
<inheritdoc />
1158411583
</member>
11584+
<member name="P:FluentUI.Blazor.Community.Components.Internal.TileGridSettings.RowGap">
11585+
<inheritdoc />
11586+
</member>
11587+
<member name="P:FluentUI.Blazor.Community.Components.Internal.TileGridSettings.ColumnGap">
11588+
<inheritdoc />
11589+
</member>
1158511590
<member name="P:FluentUI.Blazor.Community.Components.Internal.TileGridSettings.Width">
1158611591
<inheritdoc />
1158711592
</member>
@@ -11631,6 +11636,22 @@
1163111636
Gets the height of the row.
1163211637
</summary>
1163311638
</member>
11639+
<member name="P:FluentUI.Blazor.Community.Components.ITileGridSettings.RowGap">
11640+
<summary>
11641+
Gets or sets the vertical spacing between rows, typically specified as a CSS length value.
11642+
</summary>
11643+
<remarks>Set this property to control the gap between rows in a grid or layout. Common values include
11644+
pixel (e.g., "10px"), em (e.g., "1em"), or percentage units. If the value is <c>null</c> or an empty string, no
11645+
additional row gap will be applied.</remarks>
11646+
</member>
11647+
<member name="P:FluentUI.Blazor.Community.Components.ITileGridSettings.ColumnGap">
11648+
<summary>
11649+
Gets or sets the gap size between columns, typically specified as a CSS length value.
11650+
</summary>
11651+
<remarks>Set this property to control the spacing between columns in a multi-column layout. Common
11652+
values include pixel (e.g., "16px"), em (e.g., "1em"), or other valid CSS units. If the value is null or empty,
11653+
the default column gap will be used.</remarks>
11654+
</member>
1163411655
<member name="P:FluentUI.Blazor.Community.Components.ITileGridSettings.Width">
1163511656
<summary>
1163611657
Gets the width of the tile grid.
@@ -17849,6 +17870,21 @@
1784917870
Gets or sets the height of the grid.
1785017871
</summary>
1785117872
</member>
17873+
<member name="P:FluentUI.Blazor.Community.Components.FluentCxTileGrid`1.RowGap">
17874+
<summary>
17875+
Gets or sets the vertical spacing between rows in the layout, specified as a CSS length value.
17876+
</summary>
17877+
<remarks>Set this property to control the space between rows when rendering content in a grid or flex
17878+
container. Acceptable values include standard CSS units such as "10px", "1em", or "2rem". If not set, the
17879+
default spacing defined by the component or stylesheet will be used.</remarks>
17880+
</member>
17881+
<member name="P:FluentUI.Blazor.Community.Components.FluentCxTileGrid`1.ColumnGap">
17882+
<summary>
17883+
Gets or sets the CSS column gap value that defines the spacing between columns in the layout.
17884+
</summary>
17885+
<remarks>Set this property to specify the distance between columns using any valid CSS length or
17886+
keyword, such as "16px", "1em", or "normal". If not set, the default browser styling will be applied.</remarks>
17887+
</member>
1785217888
<member name="P:FluentUI.Blazor.Community.Components.FluentCxTileGrid`1.PersistenceEnabled">
1785317889
<summary>
1785417890
Gets or sets a value indicating if the layout will be stored in the local storage of the app or not.
@@ -17954,6 +17990,16 @@
1795417990
Gets or sets the parent of the component.
1795517991
</summary>
1795617992
</member>
17993+
<member name="P:FluentUI.Blazor.Community.Components.FluentCxTileGridItem`1.OnResized">
17994+
<summary>
17995+
Gets or sets the callback that is invoked when the component is resized.
17996+
</summary>
17997+
</member>
17998+
<member name="P:FluentUI.Blazor.Community.Components.FluentCxTileGridItem`1.ShowOverflow">
17999+
<summary>
18000+
Gets or sets a value indicating whether content that exceeds the available space is visible.
18001+
</summary>
18002+
</member>
1795718003
<member name="P:FluentUI.Blazor.Community.Components.FluentCxTileGridItem`1.InternalStyle">
1795818004
<summary>
1795918005
Gets the computed CSS style string with enforced layout constraints for internal use.

‎src/Community.Components/Components/GridLayoutBase.cs‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,10 @@ internal void AddRange(IEnumerable<GridLayoutBaseItem> items)
7171
/// Adds an item into the layout.
7272
/// </summary>
7373
/// <typeparam name="T">Type of the item.</typeparam>
74-
/// <param name="key">Key of the item.</param>
75-
/// <param name="index">Index of the item.</param>
76-
internal void Add<T>(string key, int index) where T : GridLayoutBaseItem, new()
74+
/// <param name="item">Item to add.</param>
75+
internal void Add<T>(T item) where T : GridLayoutBaseItem, new()
7776
{
78-
_items.Add(new T()
79-
{
80-
Index = index,
81-
Key = key
82-
});
77+
_items.Add(item);
8378
}
8479

8580
/// <summary>

‎src/Community.Components/Components/Internal/DropZone/ITileGridSettings.cs‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,23 @@ public interface ITileGridSettings
2323
/// <summary>
2424
/// Gets the height of the row.
2525
/// </summary>
26-
string RowHeight { get; }
26+
string? RowHeight { get; }
27+
28+
/// <summary>
29+
/// Gets or sets the vertical spacing between rows, typically specified as a CSS length value.
30+
/// </summary>
31+
/// <remarks>Set this property to control the gap between rows in a grid or layout. Common values include
32+
/// pixel (e.g., "10px"), em (e.g., "1em"), or percentage units. If the value is <c>null</c> or an empty string, no
33+
/// additional row gap will be applied.</remarks>
34+
string? RowGap { get; set; }
35+
36+
/// <summary>
37+
/// Gets or sets the gap size between columns, typically specified as a CSS length value.
38+
/// </summary>
39+
/// <remarks>Set this property to control the spacing between columns in a multi-column layout. Common
40+
/// values include pixel (e.g., "16px"), em (e.g., "1em"), or other valid CSS units. If the value is null or empty,
41+
/// the default column gap will be used.</remarks>
42+
string? ColumnGap { get; set; }
2743

2844
/// <summary>
2945
/// Gets the width of the tile grid.

‎src/Community.Components/Components/Internal/DropZone/TileGridSettings.cs‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,13 @@ internal class TileGridSettings
1919
public int? Columns { get; set; }
2020

2121
/// <inheritdoc />
22-
public string RowHeight { get; set; } = "1fr";
22+
public string? RowHeight { get; set; } = "1fr";
23+
24+
/// <inheritdoc />
25+
public string? RowGap { get; set; } = "10px";
26+
27+
/// <inheritdoc />
28+
public string? ColumnGap { get; set; } = "10px";
2329

2430
/// <inheritdoc />
2531
public string? Width { get; set; } = "100%";
@@ -101,9 +107,11 @@ private string GetColumns()
101107
return new StyleBuilder()
102108
.AddStyle("display", "grid")
103109
.AddStyle("grid-template-columns", GetColumns())
104-
.AddStyle("grid-auto-rows", GetRows())
110+
.AddStyle("grid-auto-rows", GetRows(), !string.IsNullOrEmpty(RowHeight))
105111
.AddStyle("width", Width, !string.IsNullOrEmpty(Width))
106112
.AddStyle("height", Height, !string.IsNullOrEmpty(Height))
113+
.AddStyle("grid-row-gap", RowGap, !string.IsNullOrEmpty(RowGap))
114+
.AddStyle("grid-column-gap", ColumnGap, !string.IsNullOrEmpty(ColumnGap))
107115
.Build();
108116
}
109117
}

‎src/Community.Components/Components/TileGrid/FluentCxTileGrid.cs‎

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,9 @@ public FluentCxTileGrid() : base()
5656
MinimumColumnWidth = MinimumColumnWidth,
5757
RowHeight = RowHeight,
5858
Width = Width,
59-
MinimumRowHeight = MinimumRowHeight
59+
MinimumRowHeight = MinimumRowHeight,
60+
ColumnGap = ColumnGap,
61+
RowGap = RowGap
6062
};
6163

6264
[Inject]
@@ -179,6 +181,23 @@ public FluentCxTileGrid() : base()
179181
[Parameter]
180182
public string? Height { get; set; } = "100%";
181183

184+
/// <summary>
185+
/// Gets or sets the vertical spacing between rows in the layout, specified as a CSS length value.
186+
/// </summary>
187+
/// <remarks>Set this property to control the space between rows when rendering content in a grid or flex
188+
/// container. Acceptable values include standard CSS units such as "10px", "1em", or "2rem". If not set, the
189+
/// default spacing defined by the component or stylesheet will be used.</remarks>
190+
[Parameter]
191+
public string? RowGap { get; set; }
192+
193+
/// <summary>
194+
/// Gets or sets the CSS column gap value that defines the spacing between columns in the layout.
195+
/// </summary>
196+
/// <remarks>Set this property to specify the distance between columns using any valid CSS length or
197+
/// keyword, such as "16px", "1em", or "normal". If not set, the default browser styling will be applied.</remarks>
198+
[Parameter]
199+
public string? ColumnGap { get; set; }
200+
182201
/// <summary>
183202
/// Gets or sets a value indicating if the layout will be stored in the local storage of the app or not.
184203
/// </summary>
@@ -214,7 +233,13 @@ internal void AddLayoutItem(FluentCxTileGridItem<TItem>? value, int? index)
214233
{
215234
if (index.HasValue && value is not null && ItemKey is not null)
216235
{
217-
_layout.Add<TileGridLayoutItem>(ItemKey(value.Value), index.Value);
236+
_layout.Add(new TileGridLayoutItem()
237+
{
238+
ColumnSpan = value.ColumnSpan,
239+
RowSpan = value.RowSpan,
240+
Key = ItemKey(value.Value),
241+
Index = index.Value
242+
});
218243
}
219244
}
220245

@@ -305,25 +330,25 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
305330
base.BuildRenderTree(builder);
306331

307332
builder.OpenComponent<CascadingValue<FluentCxTileGrid<TItem>>>(0);
308-
builder.AddComponentParameter(1, nameof(CascadingValue<FluentCxDropZoneContainer<TItem>>.Value), this);
309-
builder.AddComponentParameter(2, nameof(CascadingValue<FluentCxDropZoneContainer<TItem>>.IsFixed), true);
333+
builder.AddComponentParameter(1, nameof(CascadingValue<>.Value), this);
334+
builder.AddComponentParameter(2, nameof(CascadingValue<>.IsFixed), true);
310335
builder.AddChildContent(3, __builder2 =>
311336
{
312337
__builder2.OpenComponent<FluentCxDropZoneContainer<TItem>>(4);
313-
__builder2.AddComponentParameter(5, nameof(FluentCxDropZoneContainer<TItem>.Immediate), RuntimeHelpers.TypeCheck(Immediate));
314-
__builder2.AddComponentParameter(6, nameof(FluentCxDropZoneContainer<TItem>.CloneItem), CloneItem);
315-
__builder2.AddComponentParameter(7, nameof(FluentCxDropZoneContainer<TItem>.IsDragAllowed), IsDragAllowed);
316-
__builder2.AddComponentParameter(8, nameof(FluentCxDropZoneContainer<TItem>.IsDropAllowed), IsDropAllowed);
317-
__builder2.AddComponentParameter(9, nameof(FluentCxDropZoneContainer<TItem>.IsDragEnabled), CanReorder);
318-
__builder2.AddComponentParameter(10, nameof(FluentCxDropZoneContainer<TItem>.Items), Items);
319-
__builder2.AddComponentParameter(11, nameof(FluentCxDropZoneContainer<TItem>.ItemCss), ItemCss);
320-
__builder2.AddComponentParameter(12, nameof(FluentCxDropZoneContainer<TItem>.Id), Id);
321-
__builder2.AddComponentParameter(13, nameof(FluentCxDropZoneContainer<TItem>.ChildContent), ChildContent);
322-
__builder2.AddComponentParameter(14, nameof(FluentCxDropZoneContainer<TItem>.ItemContent), ItemContent);
323-
__builder2.AddComponentParameter(15, nameof(FluentCxDropZoneContainer<TItem>.TileGridSettings), GridSettings);
324-
__builder2.AddComponentParameter(16, nameof(FluentCxDropZoneContainer<TItem>.CanOverflow), CanOverflow);
325-
__builder2.AddComponentParameter(17, nameof(FluentCxDropZoneContainer<TItem>.Layout), _layout);
326-
__builder2.AddComponentParameter(18, nameof(FluentCxDropZoneContainer<TItem>.ItemKey), ItemKey);
338+
__builder2.AddComponentParameter(5, nameof(FluentCxDropZoneContainer<>.Immediate), RuntimeHelpers.TypeCheck(Immediate));
339+
__builder2.AddComponentParameter(6, nameof(FluentCxDropZoneContainer<>.CloneItem), CloneItem);
340+
__builder2.AddComponentParameter(7, nameof(FluentCxDropZoneContainer<>.IsDragAllowed), IsDragAllowed);
341+
__builder2.AddComponentParameter(8, nameof(FluentCxDropZoneContainer<>.IsDropAllowed), IsDropAllowed);
342+
__builder2.AddComponentParameter(9, nameof(FluentCxDropZoneContainer<>.IsDragEnabled), CanReorder);
343+
__builder2.AddComponentParameter(10, nameof(FluentCxDropZoneContainer<>.Items), Items);
344+
__builder2.AddComponentParameter(11, nameof(FluentCxDropZoneContainer<>.ItemCss), ItemCss);
345+
__builder2.AddComponentParameter(12, nameof(Id), Id);
346+
__builder2.AddComponentParameter(13, nameof(FluentCxDropZoneContainer<>.ChildContent), ChildContent);
347+
__builder2.AddComponentParameter(14, nameof(FluentCxDropZoneContainer<>.ItemContent), ItemContent);
348+
__builder2.AddComponentParameter(15, nameof(FluentCxDropZoneContainer<>.TileGridSettings), GridSettings);
349+
__builder2.AddComponentParameter(16, nameof(FluentCxDropZoneContainer<>.CanOverflow), CanOverflow);
350+
__builder2.AddComponentParameter(17, nameof(FluentCxDropZoneContainer<>.Layout), _layout);
351+
__builder2.AddComponentParameter(18, nameof(FluentCxDropZoneContainer<>.ItemKey), ItemKey);
327352
__builder2.AddComponentParameter(19, nameof(PersistenceEnabled), PersistenceEnabled);
328353
__builder2.AddComponentReferenceCapture(20, (__value) =>
329354
{

‎src/Community.Components/Components/TileGrid/FluentCxTileGridItem.razor.cs‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,26 @@ public partial class FluentCxTileGridItem<TItem>
5959
[CascadingParameter]
6060
private FluentCxTileGrid<TItem>? Parent { get; set; }
6161

62+
/// <summary>
63+
/// Gets or sets the callback that is invoked when the component is resized.
64+
/// </summary>
65+
[Parameter]
66+
public EventCallback<ResizedEventArgs> OnResized { get; set; }
67+
68+
/// <summary>
69+
/// Gets or sets a value indicating whether content that exceeds the available space is visible.
70+
/// </summary>
71+
[Parameter]
72+
public bool ShowOverflow { get; set; }
73+
6274
/// <summary>
6375
/// Gets the computed CSS style string with enforced layout constraints for internal use.
6476
/// </summary>
6577
private string? InternalStyle => new StyleBuilder(Style)
6678
.AddStyle("width", "100%")
6779
.AddStyle("height", "100%")
6880
.AddStyle("max-width", "100%")
69-
.AddStyle("overflow", "hidden")
81+
.AddStyle("overflow", "hidden", !ShowOverflow)
7082
.Build();
7183

7284
/// <summary>
@@ -84,6 +96,11 @@ private async Task OnResizedAsync(ResizedEventArgs e)
8496
await Parent.UpdateLayoutAsync(this);
8597
}
8698

99+
if (OnResized.HasDelegate)
100+
{
101+
await OnResized.InvokeAsync(e);
102+
}
103+
87104
await InvokeAsync(StateHasChanged);
88105
}
89106

0 commit comments

Comments
 (0)