Add a TileGrid FluentComponent

[JeremyJ78]

It could be very useful to have a TileGrid Component...
The idea of a tile grid is to have a number of columns, a size for Column and Row and be able to extand an item with ColumnSpan and RowSpan properties.
The tile should be able to be reordered or resized... And the spacing around the tile could be specified (like the default FluentGrid component)

ColumnSpan : int
RowSpan: int
Spacing : int
ColumnWidth : string
Columns : int
RowHeight : string
Resizable : boolean
Reorderable : boolean
OnResize : EventCallback (maybe with FluentTileGridEventArgs to keep the track of the item to resize ?)

The Design of the FluentTileGridItem could be a simple card with a divider between Header and Content

As the other Fluent components, Header could be templated with a HeaderTemplate Parameter.

For example, a thing like this code (I paste the code directly because it seems that the code component has some issue with rendering) :

will render things like this :

What do you think about such component ?

[vnbaaij]

I see this more as an extension component that could be offered by an external source. Not as a part of the library per se.

About the resizing, how would that work? Is that per tile element? If so, how does that relate to the Colspan then?

Ps: for codeblocks use 3 tickmarks (`)

[JeremyJ78]

Hi vnbaaij,

I created a prototype for the idea of the TileGrid...
The source code can be found here: (feel free to take it and make it better :))

https://github.com/JeremyJ78/FluentUIPrototypeExtensions

I'm using the FluentDragDropContainer | FluentDropZone components for reordering elements
For the resizing of the elements, I used a bit of javascript...

The idea for resizing is this:

I take the size of the tilegrid element. I divide the width by the number of the columns to have the real size of 1 column.
For RowHeight, I use the real height of the element divide by the number of rowspan...

I take the original size of the element, and with the new size, I do a small operation to find the number of colspan or rowspan...

I'm not an expert in HTML, javascript and CSS, so a lot can be improved...

I've added a preview for resizing, but it's not perfect...

I have a bug with the spacing of elements (Spacing property: it is not dynamically changeable, maybe the spacing property of the div needs to be used inside javascript, but I don't know)

Maybe the idea is good, but I don't have enough knowledge of the javascript, css, html to do better, unfortunately...

[vnbaaij]

See #3637