Horizontally spanned panel

[sachnk]

Hey --

So, I'd like to create a 2x1 where the first two panels are horizontally adjacent to each other, and the third panel horizontally spans both panels at the bottom. In other words, something like this:

I can obviously create this manually by moving the panels to the right place with my mouse. The question is, if I want this as my default layout, how do I use Dockview's API to accomplish this? I tried digging through examples/docs, but don't see how to achieve a "horizontal span". Since I can do it manually, I feel like the API must support it, but just not sure how?

Thanks!

[mathuo]

There are some docs on the addPanel method you may find useful here

https://dockview.dev/docs/next/components/dockview#add-panel

To briefly explain, you can provide a position object which takes a couple of arguments which help position the panel. You can position the new panel relative to an existing panel by providing referencePanel or an existing group by providing referenceGroup. You can also provide a direction which will be relative to the referencePanel or referenceGroup if provided and if not provided the direction is absolute.

Here is a quick sandbox showing the layout you mention created using addPanel and a variety of positioning options, you could achieve the same layout with many alternative positioning configurations but this is one of them.

Let me know if that helps and if you have any other questions.