Resizable

import { Resizable, ResizablePanel } from "@grassroot/ui-react";
 
<Resizable defaultSize={50} className="h-[200px] w-full">
  <ResizablePanel label="Editor">Drag the handle to split.</ResizablePanel>
  <ResizablePanel label="Preview" className="bg-sunken">
    Arrow keys nudge the handle when focused.
  </ResizablePanel>
</Resizable>

<script setup lang="ts">
import { ResizablePanel, Resizable } from "@grassroot/ui-vue";
</script>
 
<template>
  <Resizable
    :default-size="50"
    class-name="h-[200px] w-full"
  >
    <ResizablePanel
    label="Editor"
  >Drag the handle to split.</ResizablePanel>
    <ResizablePanel
    label="Preview"
    class-name="bg-sunken"
  >
      Arrow keys nudge the handle when focused.
    </ResizablePanel>
  </Resizable>
</template>

import { Component } from "@angular/core";
import { GrassrootResizablePanel, GrassrootResizable } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootResizablePanel, GrassrootResizable],
  template: `
    <grassroot-resizable
      [defaultSize]="50"
      className="h-[200px] w-full"
    >
      <grassroot-resizable-panel
      label="Editor"
    >Drag the handle to split.</grassroot-resizable-panel>
      <grassroot-resizable-panel
      label="Preview"
      className="bg-sunken"
    >
        Arrow keys nudge the handle when focused.
      </grassroot-resizable-panel>
    </grassroot-resizable>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { ResizablePanel, Resizable } from "@grassroot/ui-svelte";
</script>
 
<Resizable
  defaultSize={50}
  className="h-[200px] w-full"
>
  <ResizablePanel label="Editor">Drag the handle to split.</ResizablePanel>
  <ResizablePanel
  label="Preview"
  className="bg-sunken"
>
    Arrow keys nudge the handle when focused.
  </ResizablePanel>
</Resizable>

import { ResizablePanel, Resizable } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Resizable
        defaultSize={50}
        className="h-[200px] w-full"
      >
        <ResizablePanel label="Editor">Drag the handle to split.</ResizablePanel>
        <ResizablePanel
        label="Preview"
        className="bg-sunken"
      >
          Arrow keys nudge the handle when focused.
        </ResizablePanel>
      </Resizable>
    </>
  );
}