WIP Splitter component

[stsrki]

The first version of Splitter component #1360

The idea is to have a component that can be placed between any two elements(components) and it will resize them based on the mouse or touch move.

Usage

<SomeComponent1 />

<Splitter Orientation="Orientation.Horizontal" />

<SomeComponent2 />

@Jinjinov can you test this feature on your side so we can reuse it for DataGridColumn? I tried to place it in between table header cells but it's not working as expected. so far.

[Jinjinov]

I will take a look when I find some free time :)

[Jinjinov]

There might be a problem:

https://stackoverflow.com/questions/7051219/div-into-a-tr-is-it-correct

it is not valid. tr elements can only contain th and td elements. From the HTML4 specification:

[stsrki]

I suspected it already. 🤔 I will need to find a different way

[Jinjinov]

another problem: if you use prev & next sibling then you can't resize the last column of the table

the solution that I used doesn't use siblings : https://htmldom.dev/resize-columns-of-a-table/

here is a solution that uses siblings: https://www.brainbell.com/javascript/making-resizable-table-js.html
but it first checks if the sibling exists

I checked again - actually it uses the sibling of the parent

[stsrki]

The solution for the last element is just to have a simple if statement and skip if it's null, the same thing for the first element.

Thank you for the link I will look at them :)