Closed ghostdevv closed 6 months ago
It shouldn't need a slot to function. You just need to give it a height or width depending on the direction it's being rendered in!
After trying to confirm I'm not going crazy I confirmed I am going crazy. At the moment you do need a slot but I want to say this is a bug and you shouldn't need one.
Will investigate this further to confirm why/if the slot is truly needed. If it is, I'll update the docs to reflect, if not this is a bug that will be fixed 😁
Thanks for raising the issue!
Alright, was able to confirm a slot is not needed.
Here's an example (with tailwind styles) of it working without a slot:
<script lang="ts">
import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>
<PaneGroup direction="horizontal" class="w-full rounded-lg">
<Pane defaultSize={50} class="bg-gray-800 rounded-lg">
<div class="flex h-[400px] items-center justify-center p-6">
<span class="font-semibold">Left</span>
</div>
</Pane>
<PaneResizer class="bg-black min-h-full w-2" />
<Pane defaultSize={50} class="bg-gray-800 rounded-lg">
<div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Right</span>
</div>
</Pane>
</PaneGroup>
I'd assume the reason you don't need a slot is because of those styles, so I think it still makes sense to update the docs with them
Change Type
Addition
Proposed Changes
I was confused about why it wasn't working for me, but I discovered that in order for the draggable area to show up you need an element in the
PaneResizer
component. It wasn't clear from my quick docs readthrough that I needed this until I looked in the code examples in the repo.