Skip to content
UI

Floating Panel

A draggable and resizable floating panel component.

<script setup lang="ts">
import { FloatingPanel } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <FloatingPanel.Root>
      <FloatingPanel.Trigger>
        Toggle Panel
      </FloatingPanel.Trigger>
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header>
              <FloatingPanel.Title>
                Floating Panel
              </FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group">
                <FloatingPanel.MinimizeTrigger>
                  _
                </FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger>
                  +
                </FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger>
                  &#9633;
                </FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger>
                  x
                </FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body>
            <p>Some content</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" />
          <FloatingPanel.ResizeTrigger axis="e" />
          <FloatingPanel.ResizeTrigger axis="w" />
          <FloatingPanel.ResizeTrigger axis="s" />
          <FloatingPanel.ResizeTrigger axis="ne" />
          <FloatingPanel.ResizeTrigger axis="se" />
          <FloatingPanel.ResizeTrigger axis="sw" />
          <FloatingPanel.ResizeTrigger axis="nw" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.Root>
  </main>
</template>

import { FloatingPanel } from '@destyler-ui/react'

export function Basic() {
  return (
    <main className="p-10">
      <FloatingPanel.Root>
        <FloatingPanel.Trigger className="px-4 py-2 bg-blue-500 text-white rounded">
          Toggle Panel
        </FloatingPanel.Trigger>
        <FloatingPanel.Dock className="fixed bottom-4 left-1/2 -translate-x-1/2 bg-gray-100 border rounded-lg shadow-lg" />
        <FloatingPanel.Positioner>
          <FloatingPanel.Content className="bg-white border rounded-lg shadow-lg overflow-hidden">
            <FloatingPanel.DragTrigger className="cursor-move">
              <FloatingPanel.Header className="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
                <FloatingPanel.Title className="text-sm font-medium">
                  Floating Panel
                </FloatingPanel.Title>
                <div data-scope="floating-panel" data-part="trigger-group" className="flex gap-1">
                  <FloatingPanel.MinimizeTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    -
                  </FloatingPanel.MinimizeTrigger>
                  <FloatingPanel.MaximizeTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    +
                  </FloatingPanel.MaximizeTrigger>
                  <FloatingPanel.RestoreTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    &#9633;
                  </FloatingPanel.RestoreTrigger>
                  <FloatingPanel.CloseTrigger className="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">
                    x
                  </FloatingPanel.CloseTrigger>
                </div>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body className="p-4 relative">
              <p>Some content</p>
            </FloatingPanel.Body>

            <FloatingPanel.ResizeTrigger axis="n" className="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize" />
            <FloatingPanel.ResizeTrigger axis="e" className="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize" />
            <FloatingPanel.ResizeTrigger axis="w" className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize" />
            <FloatingPanel.ResizeTrigger axis="s" className="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize" />
            <FloatingPanel.ResizeTrigger axis="ne" className="absolute top-0 right-0 w-2 h-2 cursor-ne-resize" />
            <FloatingPanel.ResizeTrigger axis="se" className="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize" />
            <FloatingPanel.ResizeTrigger axis="sw" className="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize" />
            <FloatingPanel.ResizeTrigger axis="nw" className="absolute top-0 left-0 w-2 h-2 cursor-nw-resize" />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </FloatingPanel.Root>
    </main>
  )
}

import { FloatingPanel } from '@destyler-ui/solid'

export function Basic() {
  return (
    <main class="p-10">
      <FloatingPanel.Root>
        <FloatingPanel.Trigger class="px-4 py-2 bg-blue-500 text-white rounded">
          Toggle Panel
        </FloatingPanel.Trigger>
        <FloatingPanel.Dock class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-gray-100 border rounded-lg shadow-lg" />
        <FloatingPanel.Positioner>
          <FloatingPanel.Content class="bg-white border rounded-lg shadow-lg overflow-hidden">
            <FloatingPanel.DragTrigger class="cursor-move">
              <FloatingPanel.Header class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
                <FloatingPanel.Title class="text-sm font-medium">
                  Floating Panel
                </FloatingPanel.Title>
                <div data-scope="floating-panel" data-part="trigger-group" class="flex gap-1">
                  <FloatingPanel.MinimizeTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    -
                  </FloatingPanel.MinimizeTrigger>
                  <FloatingPanel.MaximizeTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    +
                  </FloatingPanel.MaximizeTrigger>
                  <FloatingPanel.RestoreTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    &#9633;
                  </FloatingPanel.RestoreTrigger>
                  <FloatingPanel.CloseTrigger class="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">
                    x
                  </FloatingPanel.CloseTrigger>
                </div>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body class="p-4 relative">
              <p>Some content</p>
            </FloatingPanel.Body>

            <FloatingPanel.ResizeTrigger
              axis="n"
              class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="e"
              class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="w"
              class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="s"
              class="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="ne"
              class="absolute top-0 right-0 w-2 h-2 cursor-ne-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="se"
              class="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="sw"
              class="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="nw"
              class="absolute top-0 left-0 w-2 h-2 cursor-nw-resize"
            />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </FloatingPanel.Root>
    </main>
  )
}

<script lang="ts">
  import { FloatingPanel } from '@destyler-ui/svelte'
</script>

<main class="p-10">
  <FloatingPanel.Root>
    <FloatingPanel.Trigger class="px-4 py-2 bg-blue-500 text-white rounded">Toggle Panel</FloatingPanel.Trigger>
    <FloatingPanel.Dock class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-gray-100 border rounded-lg shadow-lg" />
    <FloatingPanel.Positioner>
      <FloatingPanel.Content class="bg-white border rounded-lg shadow-lg overflow-hidden">
        <FloatingPanel.DragTrigger class="cursor-move">
          <FloatingPanel.Header class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
            <FloatingPanel.Title class="text-sm font-medium">Floating Panel</FloatingPanel.Title>
            <div data-scope="floating-panel" data-part="trigger-group" class="flex gap-1">
              <FloatingPanel.MinimizeTrigger aria-label="Minimize" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">-</FloatingPanel.MinimizeTrigger>
              <FloatingPanel.MaximizeTrigger aria-label="Maximize" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">+</FloatingPanel.MaximizeTrigger>
              <FloatingPanel.RestoreTrigger aria-label="Restore" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">□</FloatingPanel.RestoreTrigger>
              <FloatingPanel.CloseTrigger aria-label="Close" class="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">x</FloatingPanel.CloseTrigger>
            </div>
          </FloatingPanel.Header>
        </FloatingPanel.DragTrigger>
        <FloatingPanel.Body class="p-4 relative"><p>Some content</p></FloatingPanel.Body>
        <FloatingPanel.ResizeTrigger axis="n" class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize" />
        <FloatingPanel.ResizeTrigger axis="e" class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize" />
        <FloatingPanel.ResizeTrigger axis="w" class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize" />
        <FloatingPanel.ResizeTrigger axis="s" class="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize" />
        <FloatingPanel.ResizeTrigger axis="ne" class="absolute top-0 right-0 w-2 h-2 cursor-ne-resize" />
        <FloatingPanel.ResizeTrigger axis="se" class="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize" />
        <FloatingPanel.ResizeTrigger axis="sw" class="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize" />
        <FloatingPanel.ResizeTrigger axis="nw" class="absolute top-0 left-0 w-2 h-2 cursor-nw-resize" />
      </FloatingPanel.Content>
    </FloatingPanel.Positioner>
  </FloatingPanel.Root>
</main>

Anatomy

Section titled “Anatomy”
<script setup lang="ts">
import { FloatingPanel } from '@destyler-ui/vue'
</script>


<template>
  <FloatingPanel.Root>
    <FloatingPanel.Trigger />
    <FloatingPanel.Positioner>
      <FloatingPanel.Content>
        <FloatingPanel.Header>
          <FloatingPanel.Title />
          <FloatingPanel.DragTrigger />
          <FloatingPanel.MinimizeTrigger />
          <FloatingPanel.MaximizeTrigger />
          <FloatingPanel.RestoreTrigger />
          <FloatingPanel.CloseTrigger />
        </FloatingPanel.Header>
        <FloatingPanel.Body />
        <FloatingPanel.ResizeTrigger />
      </FloatingPanel.Content>
    </FloatingPanel.Positioner>
    <FloatingPanel.Dock />
  </FloatingPanel.Root>
</template>
import { FloatingPanel } from '@destyler-ui/react'


export default function Basic() {
  return (
    <FloatingPanel.Root>
      <FloatingPanel.Trigger />
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.Header>
            <FloatingPanel.Title />
            <FloatingPanel.DragTrigger />
            <FloatingPanel.MinimizeTrigger />
            <FloatingPanel.MaximizeTrigger />
            <FloatingPanel.RestoreTrigger />
            <FloatingPanel.CloseTrigger />
          </FloatingPanel.Header>
          <FloatingPanel.Body />
          <FloatingPanel.ResizeTrigger />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
      <FloatingPanel.Dock />
    </FloatingPanel.Root>
  )
}
import { FloatingPanel } from '@destyler-ui/solid'


export default function Basic() {
  return (
    <FloatingPanel.Root>
      <FloatingPanel.Trigger />
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.Header>
            <FloatingPanel.Title />
            <FloatingPanel.DragTrigger />
            <FloatingPanel.MinimizeTrigger />
            <FloatingPanel.MaximizeTrigger />
            <FloatingPanel.RestoreTrigger />
            <FloatingPanel.CloseTrigger />
          </FloatingPanel.Header>
          <FloatingPanel.Body />
          <FloatingPanel.ResizeTrigger axis="se" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
      <FloatingPanel.Dock />
    </FloatingPanel.Root>
  )
}
<script lang="ts">
  import { FloatingPanel } from '@destyler-ui/svelte'
</script>


<main class="p-10">
  <FloatingPanel.Root>
    <FloatingPanel.Trigger class="px-4 py-2 bg-blue-500 text-white rounded">Toggle Panel</FloatingPanel.Trigger>
    <FloatingPanel.Dock class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-gray-100 border rounded-lg shadow-lg" />
    <FloatingPanel.Positioner>
      <FloatingPanel.Content class="bg-white border rounded-lg shadow-lg overflow-hidden">
        <FloatingPanel.DragTrigger class="cursor-move">
          <FloatingPanel.Header class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
            <FloatingPanel.Title class="text-sm font-medium">Floating Panel</FloatingPanel.Title>
            <div data-scope="floating-panel" data-part="trigger-group" class="flex gap-1">
              <FloatingPanel.MinimizeTrigger aria-label="Minimize" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">-</FloatingPanel.MinimizeTrigger>
              <FloatingPanel.MaximizeTrigger aria-label="Maximize" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">+</FloatingPanel.MaximizeTrigger>
              <FloatingPanel.RestoreTrigger aria-label="Restore" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">□</FloatingPanel.RestoreTrigger>
              <FloatingPanel.CloseTrigger aria-label="Close" class="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">x</FloatingPanel.CloseTrigger>
            </div>
          </FloatingPanel.Header>
        </FloatingPanel.DragTrigger>
        <FloatingPanel.Body class="p-4 relative"><p>Some content</p></FloatingPanel.Body>
        <FloatingPanel.ResizeTrigger axis="n" class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize" />
        <FloatingPanel.ResizeTrigger axis="e" class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize" />
        <FloatingPanel.ResizeTrigger axis="w" class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize" />
        <FloatingPanel.ResizeTrigger axis="s" class="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize" />
        <FloatingPanel.ResizeTrigger axis="ne" class="absolute top-0 right-0 w-2 h-2 cursor-ne-resize" />
        <FloatingPanel.ResizeTrigger axis="se" class="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize" />
        <FloatingPanel.ResizeTrigger axis="sw" class="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize" />
        <FloatingPanel.ResizeTrigger axis="nw" class="absolute top-0 left-0 w-2 h-2 cursor-nw-resize" />
      </FloatingPanel.Content>
    </FloatingPanel.Positioner>
  </FloatingPanel.Root>
</main>

Examples

Section titled “Examples”

Basic

Section titled “Basic”
<script setup lang="ts">
import { FloatingPanel } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <FloatingPanel.Root>
      <FloatingPanel.Trigger>
        Toggle Panel
      </FloatingPanel.Trigger>
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header>
              <FloatingPanel.Title>
                Floating Panel
              </FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group">
                <FloatingPanel.MinimizeTrigger>
                  _
                </FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger>
                  +
                </FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger>
                  &#9633;
                </FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger>
                  x
                </FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body>
            <p>Some content</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" />
          <FloatingPanel.ResizeTrigger axis="e" />
          <FloatingPanel.ResizeTrigger axis="w" />
          <FloatingPanel.ResizeTrigger axis="s" />
          <FloatingPanel.ResizeTrigger axis="ne" />
          <FloatingPanel.ResizeTrigger axis="se" />
          <FloatingPanel.ResizeTrigger axis="sw" />
          <FloatingPanel.ResizeTrigger axis="nw" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.Root>
  </main>
</template>

import { FloatingPanel } from '@destyler-ui/react'

export function Basic() {
  return (
    <main className="p-10">
      <FloatingPanel.Root>
        <FloatingPanel.Trigger className="px-4 py-2 bg-blue-500 text-white rounded">
          Toggle Panel
        </FloatingPanel.Trigger>
        <FloatingPanel.Dock className="fixed bottom-4 left-1/2 -translate-x-1/2 bg-gray-100 border rounded-lg shadow-lg" />
        <FloatingPanel.Positioner>
          <FloatingPanel.Content className="bg-white border rounded-lg shadow-lg overflow-hidden">
            <FloatingPanel.DragTrigger className="cursor-move">
              <FloatingPanel.Header className="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
                <FloatingPanel.Title className="text-sm font-medium">
                  Floating Panel
                </FloatingPanel.Title>
                <div data-scope="floating-panel" data-part="trigger-group" className="flex gap-1">
                  <FloatingPanel.MinimizeTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    -
                  </FloatingPanel.MinimizeTrigger>
                  <FloatingPanel.MaximizeTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    +
                  </FloatingPanel.MaximizeTrigger>
                  <FloatingPanel.RestoreTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    &#9633;
                  </FloatingPanel.RestoreTrigger>
                  <FloatingPanel.CloseTrigger className="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">
                    x
                  </FloatingPanel.CloseTrigger>
                </div>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body className="p-4 relative">
              <p>Some content</p>
            </FloatingPanel.Body>

            <FloatingPanel.ResizeTrigger axis="n" className="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize" />
            <FloatingPanel.ResizeTrigger axis="e" className="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize" />
            <FloatingPanel.ResizeTrigger axis="w" className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize" />
            <FloatingPanel.ResizeTrigger axis="s" className="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize" />
            <FloatingPanel.ResizeTrigger axis="ne" className="absolute top-0 right-0 w-2 h-2 cursor-ne-resize" />
            <FloatingPanel.ResizeTrigger axis="se" className="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize" />
            <FloatingPanel.ResizeTrigger axis="sw" className="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize" />
            <FloatingPanel.ResizeTrigger axis="nw" className="absolute top-0 left-0 w-2 h-2 cursor-nw-resize" />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </FloatingPanel.Root>
    </main>
  )
}

import { FloatingPanel } from '@destyler-ui/solid'

export function Basic() {
  return (
    <main class="p-10">
      <FloatingPanel.Root>
        <FloatingPanel.Trigger class="px-4 py-2 bg-blue-500 text-white rounded">
          Toggle Panel
        </FloatingPanel.Trigger>
        <FloatingPanel.Dock class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-gray-100 border rounded-lg shadow-lg" />
        <FloatingPanel.Positioner>
          <FloatingPanel.Content class="bg-white border rounded-lg shadow-lg overflow-hidden">
            <FloatingPanel.DragTrigger class="cursor-move">
              <FloatingPanel.Header class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
                <FloatingPanel.Title class="text-sm font-medium">
                  Floating Panel
                </FloatingPanel.Title>
                <div data-scope="floating-panel" data-part="trigger-group" class="flex gap-1">
                  <FloatingPanel.MinimizeTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    -
                  </FloatingPanel.MinimizeTrigger>
                  <FloatingPanel.MaximizeTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    +
                  </FloatingPanel.MaximizeTrigger>
                  <FloatingPanel.RestoreTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    &#9633;
                  </FloatingPanel.RestoreTrigger>
                  <FloatingPanel.CloseTrigger class="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">
                    x
                  </FloatingPanel.CloseTrigger>
                </div>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body class="p-4 relative">
              <p>Some content</p>
            </FloatingPanel.Body>

            <FloatingPanel.ResizeTrigger
              axis="n"
              class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="e"
              class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="w"
              class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="s"
              class="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="ne"
              class="absolute top-0 right-0 w-2 h-2 cursor-ne-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="se"
              class="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="sw"
              class="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="nw"
              class="absolute top-0 left-0 w-2 h-2 cursor-nw-resize"
            />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </FloatingPanel.Root>
    </main>
  )
}

<script lang="ts">
  import { FloatingPanel } from '@destyler-ui/svelte'
</script>

<main class="p-10">
  <FloatingPanel.Root>
    <FloatingPanel.Trigger class="px-4 py-2 bg-blue-500 text-white rounded">Toggle Panel</FloatingPanel.Trigger>
    <FloatingPanel.Dock class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-gray-100 border rounded-lg shadow-lg" />
    <FloatingPanel.Positioner>
      <FloatingPanel.Content class="bg-white border rounded-lg shadow-lg overflow-hidden">
        <FloatingPanel.DragTrigger class="cursor-move">
          <FloatingPanel.Header class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
            <FloatingPanel.Title class="text-sm font-medium">Floating Panel</FloatingPanel.Title>
            <div data-scope="floating-panel" data-part="trigger-group" class="flex gap-1">
              <FloatingPanel.MinimizeTrigger aria-label="Minimize" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">-</FloatingPanel.MinimizeTrigger>
              <FloatingPanel.MaximizeTrigger aria-label="Maximize" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">+</FloatingPanel.MaximizeTrigger>
              <FloatingPanel.RestoreTrigger aria-label="Restore" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">□</FloatingPanel.RestoreTrigger>
              <FloatingPanel.CloseTrigger aria-label="Close" class="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">x</FloatingPanel.CloseTrigger>
            </div>
          </FloatingPanel.Header>
        </FloatingPanel.DragTrigger>
        <FloatingPanel.Body class="p-4 relative"><p>Some content</p></FloatingPanel.Body>
        <FloatingPanel.ResizeTrigger axis="n" class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize" />
        <FloatingPanel.ResizeTrigger axis="e" class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize" />
        <FloatingPanel.ResizeTrigger axis="w" class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize" />
        <FloatingPanel.ResizeTrigger axis="s" class="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize" />
        <FloatingPanel.ResizeTrigger axis="ne" class="absolute top-0 right-0 w-2 h-2 cursor-ne-resize" />
        <FloatingPanel.ResizeTrigger axis="se" class="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize" />
        <FloatingPanel.ResizeTrigger axis="sw" class="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize" />
        <FloatingPanel.ResizeTrigger axis="nw" class="absolute top-0 left-0 w-2 h-2 cursor-nw-resize" />
      </FloatingPanel.Content>
    </FloatingPanel.Positioner>
  </FloatingPanel.Root>
</main>

Controlled

Section titled “Controlled”

Control the floating panel state programmatically.

<script setup lang="ts">
import { ref } from 'vue'
import { FloatingPanel } from '@destyler-ui/vue'

const open = ref(false)
</script>

<template>
  <main>
    <button @click="open = !open">
      External Toggle: {{ open ? 'Close' : 'Open' }}
    </button>

    <FloatingPanel.Root v-model:open="open">
      <FloatingPanel.Trigger>
        Toggle Panel
      </FloatingPanel.Trigger>
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header>
              <FloatingPanel.Title>
                Controlled Panel
              </FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group">
                <FloatingPanel.MinimizeTrigger>
                  _
                </FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger>
                  +
                </FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger>
                  &#9633;
                </FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger>
                  x
                </FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body>
            <p>This panel is controlled via v-model</p>
            <p>Open state: {{ open }}</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" />
          <FloatingPanel.ResizeTrigger axis="e" />
          <FloatingPanel.ResizeTrigger axis="w" />
          <FloatingPanel.ResizeTrigger axis="s" />
          <FloatingPanel.ResizeTrigger axis="ne" />
          <FloatingPanel.ResizeTrigger axis="se" />
          <FloatingPanel.ResizeTrigger axis="sw" />
          <FloatingPanel.ResizeTrigger axis="nw" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.Root>
  </main>
</template>

import { useState } from 'react'
import { FloatingPanel } from '@destyler-ui/react'

export function Controlled() {
  const [open, setOpen] = useState(false)

  return (
    <main className="p-10">
      <button
        onClick={() => setOpen(!open)}
        className="mb-4 px-4 py-2 bg-green-500 text-white rounded"
      >
        External Toggle:
        {open ? ' Close' : ' Open'}
      </button>

      <FloatingPanel.Root open={open} onOpenChange={({ open }) => setOpen(open)}>
        <FloatingPanel.Trigger className="px-4 py-2 bg-blue-500 text-white rounded">
          Toggle Panel
        </FloatingPanel.Trigger>
        <FloatingPanel.Positioner>
          <FloatingPanel.Content className="bg-white border rounded-lg shadow-lg overflow-hidden">
            <FloatingPanel.DragTrigger className="cursor-move">
              <FloatingPanel.Header className="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
                <FloatingPanel.Title className="text-sm font-medium">
                  Controlled Panel
                </FloatingPanel.Title>
                <div data-scope="floating-panel" data-part="trigger-group" className="flex gap-1">
                  <FloatingPanel.MinimizeTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    -
                  </FloatingPanel.MinimizeTrigger>
                  <FloatingPanel.MaximizeTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    +
                  </FloatingPanel.MaximizeTrigger>
                  <FloatingPanel.RestoreTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    &#9633;
                  </FloatingPanel.RestoreTrigger>
                  <FloatingPanel.CloseTrigger className="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">
                    x
                  </FloatingPanel.CloseTrigger>
                </div>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body className="p-4 relative">
              <p>This panel is controlled via state</p>
              <p>
                Open state:
                {open ? 'true' : 'false'}
              </p>
            </FloatingPanel.Body>

            <FloatingPanel.ResizeTrigger axis="n" className="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize" />
            <FloatingPanel.ResizeTrigger axis="e" className="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize" />
            <FloatingPanel.ResizeTrigger axis="w" className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize" />
            <FloatingPanel.ResizeTrigger axis="s" className="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize" />
            <FloatingPanel.ResizeTrigger axis="ne" className="absolute top-0 right-0 w-2 h-2 cursor-ne-resize" />
            <FloatingPanel.ResizeTrigger axis="se" className="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize" />
            <FloatingPanel.ResizeTrigger axis="sw" className="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize" />
            <FloatingPanel.ResizeTrigger axis="nw" className="absolute top-0 left-0 w-2 h-2 cursor-nw-resize" />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </FloatingPanel.Root>
    </main>
  )
}

import { createSignal } from 'solid-js'
import { FloatingPanel } from '@destyler-ui/solid'

export function Controlled() {
  const [open, setOpen] = createSignal(false)

  return (
    <main class="p-10">
      <button
        type="button"
        onClick={() => setOpen(value => !value)}
        class="mb-4 px-4 py-2 bg-green-500 text-white rounded"
      >
        External Toggle: {open() ? 'Close' : 'Open'}
      </button>

      <FloatingPanel.Root open={open()} onOpenChange={({ open }) => setOpen(open)}>
        <FloatingPanel.Trigger class="px-4 py-2 bg-blue-500 text-white rounded">
          Toggle Panel
        </FloatingPanel.Trigger>
        <FloatingPanel.Positioner>
          <FloatingPanel.Content class="bg-white border rounded-lg shadow-lg overflow-hidden">
            <FloatingPanel.DragTrigger class="cursor-move">
              <FloatingPanel.Header class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
                <FloatingPanel.Title class="text-sm font-medium">
                  Controlled Panel
                </FloatingPanel.Title>
                <div data-scope="floating-panel" data-part="trigger-group" class="flex gap-1">
                  <FloatingPanel.MinimizeTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    -
                  </FloatingPanel.MinimizeTrigger>
                  <FloatingPanel.MaximizeTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    +
                  </FloatingPanel.MaximizeTrigger>
                  <FloatingPanel.RestoreTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                    &#9633;
                  </FloatingPanel.RestoreTrigger>
                  <FloatingPanel.CloseTrigger class="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">
                    x
                  </FloatingPanel.CloseTrigger>
                </div>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body class="p-4 relative">
              <p>This panel is controlled via state</p>
              <p>Open state: {open() ? 'true' : 'false'}</p>
            </FloatingPanel.Body>

            <FloatingPanel.ResizeTrigger
              axis="n"
              class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="e"
              class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="w"
              class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="s"
              class="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="ne"
              class="absolute top-0 right-0 w-2 h-2 cursor-ne-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="se"
              class="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="sw"
              class="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize"
            />
            <FloatingPanel.ResizeTrigger
              axis="nw"
              class="absolute top-0 left-0 w-2 h-2 cursor-nw-resize"
            />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </FloatingPanel.Root>
    </main>
  )
}

<script lang="ts">
  import { FloatingPanel } from '@destyler-ui/svelte'

  let open = $state(false)
</script>

<main class="p-10">
  <button
    type="button"
    onclick={() => (open = !open)}
    class="mb-4 px-4 py-2 bg-green-500 text-white rounded"
  >
    External Toggle: {open ? 'Close' : 'Open'}
  </button>

  <FloatingPanel.Root bind:open>
    <FloatingPanel.Trigger class="px-4 py-2 bg-blue-500 text-white rounded">Toggle Panel</FloatingPanel.Trigger>
    <FloatingPanel.Positioner>
      <FloatingPanel.Content class="bg-white border rounded-lg shadow-lg overflow-hidden">
        <FloatingPanel.DragTrigger class="cursor-move">
          <FloatingPanel.Header class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
            <FloatingPanel.Title class="text-sm font-medium">Controlled Panel</FloatingPanel.Title>
            <div data-scope="floating-panel" data-part="trigger-group" class="flex gap-1">
              <FloatingPanel.MinimizeTrigger aria-label="Minimize" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">-</FloatingPanel.MinimizeTrigger>
              <FloatingPanel.MaximizeTrigger aria-label="Maximize" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">+</FloatingPanel.MaximizeTrigger>
              <FloatingPanel.RestoreTrigger aria-label="Restore" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">□</FloatingPanel.RestoreTrigger>
              <FloatingPanel.CloseTrigger aria-label="Close" class="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">x</FloatingPanel.CloseTrigger>
            </div>
          </FloatingPanel.Header>
        </FloatingPanel.DragTrigger>
        <FloatingPanel.Body class="p-4 relative">
          <p>This panel is controlled via state</p>
          <p>Open state: {open ? 'true' : 'false'}</p>
        </FloatingPanel.Body>
        <FloatingPanel.ResizeTrigger axis="n" class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize" />
        <FloatingPanel.ResizeTrigger axis="e" class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize" />
        <FloatingPanel.ResizeTrigger axis="w" class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize" />
        <FloatingPanel.ResizeTrigger axis="s" class="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize" />
        <FloatingPanel.ResizeTrigger axis="ne" class="absolute top-0 right-0 w-2 h-2 cursor-ne-resize" />
        <FloatingPanel.ResizeTrigger axis="se" class="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize" />
        <FloatingPanel.ResizeTrigger axis="sw" class="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize" />
        <FloatingPanel.ResizeTrigger axis="nw" class="absolute top-0 left-0 w-2 h-2 cursor-nw-resize" />
      </FloatingPanel.Content>
    </FloatingPanel.Positioner>
  </FloatingPanel.Root>
</main>

Initial Open

Section titled “Initial Open”

Open the floating panel by default with defaultOpen.

<script setup lang="ts">
import { FloatingPanel } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <FloatingPanel.Root default-open>
      <FloatingPanel.Trigger>
        Toggle Panel
      </FloatingPanel.Trigger>
      <FloatingPanel.Dock />
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header>
              <FloatingPanel.Title>
                Initial Open Panel
              </FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group">
                <FloatingPanel.MinimizeTrigger>
                  _
                </FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger>
                  +
                </FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger>
                  &#9633;
                </FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger>
                  x
                </FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body>
            <p>This panel opens by default</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" />
          <FloatingPanel.ResizeTrigger axis="e" />
          <FloatingPanel.ResizeTrigger axis="w" />
          <FloatingPanel.ResizeTrigger axis="s" />
          <FloatingPanel.ResizeTrigger axis="ne" />
          <FloatingPanel.ResizeTrigger axis="se" />
          <FloatingPanel.ResizeTrigger axis="sw" />
          <FloatingPanel.ResizeTrigger axis="nw" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.Root>
  </main>
</template>

import { FloatingPanel } from '@destyler-ui/react'

export function InitialOpen() {
  return (
    <FloatingPanel.Root defaultOpen>
      <FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
      <FloatingPanel.Dock />
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header>
              <FloatingPanel.Title>Initial Open Panel</FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group">
                <FloatingPanel.MinimizeTrigger>_</FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger>+</FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger>&#9633;</FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger>x</FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body>
            <p>This panel opens by default</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" />
          <FloatingPanel.ResizeTrigger axis="e" />
          <FloatingPanel.ResizeTrigger axis="w" />
          <FloatingPanel.ResizeTrigger axis="s" />
          <FloatingPanel.ResizeTrigger axis="ne" />
          <FloatingPanel.ResizeTrigger axis="se" />
          <FloatingPanel.ResizeTrigger axis="sw" />
          <FloatingPanel.ResizeTrigger axis="nw" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.Root>
  )
}

import { FloatingPanel } from '@destyler-ui/solid'

export function InitialOpen() {
  return (
    <FloatingPanel.Root defaultOpen>
      <FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
      <FloatingPanel.Dock />
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header>
              <FloatingPanel.Title>Initial Open Panel</FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group">
                <FloatingPanel.MinimizeTrigger>_</FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger>+</FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger>&#9633;</FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger>x</FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body>
            <p>This panel opens by default</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" />
          <FloatingPanel.ResizeTrigger axis="e" />
          <FloatingPanel.ResizeTrigger axis="w" />
          <FloatingPanel.ResizeTrigger axis="s" />
          <FloatingPanel.ResizeTrigger axis="ne" />
          <FloatingPanel.ResizeTrigger axis="se" />
          <FloatingPanel.ResizeTrigger axis="sw" />
          <FloatingPanel.ResizeTrigger axis="nw" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.Root>
  )
}

<script lang="ts">
  import { FloatingPanel } from '@destyler-ui/svelte'
</script>

<FloatingPanel.Root defaultOpen>
  <FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
  <FloatingPanel.Dock />
  <FloatingPanel.Positioner>
    <FloatingPanel.Content>
      <FloatingPanel.DragTrigger>
        <FloatingPanel.Header>
          <FloatingPanel.Title>Initial Open Panel</FloatingPanel.Title>
          <div data-scope="floating-panel" data-part="trigger-group">
            <FloatingPanel.MinimizeTrigger aria-label="Minimize">_</FloatingPanel.MinimizeTrigger>
            <FloatingPanel.MaximizeTrigger aria-label="Maximize">+</FloatingPanel.MaximizeTrigger>
            <FloatingPanel.RestoreTrigger aria-label="Restore">□</FloatingPanel.RestoreTrigger>
            <FloatingPanel.CloseTrigger aria-label="Close">x</FloatingPanel.CloseTrigger>
          </div>
        </FloatingPanel.Header>
      </FloatingPanel.DragTrigger>
      <FloatingPanel.Body><p>This panel opens by default</p></FloatingPanel.Body>
      <FloatingPanel.ResizeTrigger axis="n" />
      <FloatingPanel.ResizeTrigger axis="e" />
      <FloatingPanel.ResizeTrigger axis="w" />
      <FloatingPanel.ResizeTrigger axis="s" />
      <FloatingPanel.ResizeTrigger axis="ne" />
      <FloatingPanel.ResizeTrigger axis="se" />
      <FloatingPanel.ResizeTrigger axis="sw" />
      <FloatingPanel.ResizeTrigger axis="nw" />
    </FloatingPanel.Content>
  </FloatingPanel.Positioner>
</FloatingPanel.Root>

Default Open

Section titled “Default Open”

Open the floating panel by default.

<script setup lang="ts">
import { FloatingPanel } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <FloatingPanel.Root default-open>
      <FloatingPanel.Trigger>
        Toggle Panel
      </FloatingPanel.Trigger>
      <FloatingPanel.Dock />
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header>
              <FloatingPanel.Title>
                Default Open Panel
              </FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group">
                <FloatingPanel.MinimizeTrigger>
                  _
                </FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger>
                  +
                </FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger>
                  &#9633;
                </FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger>
                  x
                </FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body>
            <p>This panel opens by default</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" />
          <FloatingPanel.ResizeTrigger axis="e" />
          <FloatingPanel.ResizeTrigger axis="w" />
          <FloatingPanel.ResizeTrigger axis="s" />
          <FloatingPanel.ResizeTrigger axis="ne" />
          <FloatingPanel.ResizeTrigger axis="se" />
          <FloatingPanel.ResizeTrigger axis="sw" />
          <FloatingPanel.ResizeTrigger axis="nw" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.Root>
  </main>
</template>

import { FloatingPanel } from '@destyler-ui/react'

export function DefaultOpen() {
  return (
    <FloatingPanel.Root defaultOpen>
      <FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
      <FloatingPanel.Dock />
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header>
              <FloatingPanel.Title>Default Open Panel</FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group">
                <FloatingPanel.MinimizeTrigger>_</FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger>+</FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger>&#9633;</FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger>x</FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body>
            <p>This panel opens by default</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" />
          <FloatingPanel.ResizeTrigger axis="e" />
          <FloatingPanel.ResizeTrigger axis="w" />
          <FloatingPanel.ResizeTrigger axis="s" />
          <FloatingPanel.ResizeTrigger axis="ne" />
          <FloatingPanel.ResizeTrigger axis="se" />
          <FloatingPanel.ResizeTrigger axis="sw" />
          <FloatingPanel.ResizeTrigger axis="nw" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.Root>
  )
}

import { FloatingPanel } from '@destyler-ui/solid'

export function DefaultOpen() {
  return (
    <FloatingPanel.Root defaultOpen>
      <FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
      <FloatingPanel.Dock />
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header>
              <FloatingPanel.Title>Default Open Panel</FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group">
                <FloatingPanel.MinimizeTrigger>_</FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger>+</FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger>&#9633;</FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger>x</FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body>
            <p>This panel opens by default</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" />
          <FloatingPanel.ResizeTrigger axis="e" />
          <FloatingPanel.ResizeTrigger axis="w" />
          <FloatingPanel.ResizeTrigger axis="s" />
          <FloatingPanel.ResizeTrigger axis="ne" />
          <FloatingPanel.ResizeTrigger axis="se" />
          <FloatingPanel.ResizeTrigger axis="sw" />
          <FloatingPanel.ResizeTrigger axis="nw" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.Root>
  )
}

<script lang="ts">
  import { FloatingPanel } from '@destyler-ui/svelte'
</script>

<FloatingPanel.Root defaultOpen>
  <FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
  <FloatingPanel.Dock />
  <FloatingPanel.Positioner>
    <FloatingPanel.Content>
      <FloatingPanel.DragTrigger>
        <FloatingPanel.Header>
          <FloatingPanel.Title>Default Open Panel</FloatingPanel.Title>
          <div data-scope="floating-panel" data-part="trigger-group">
            <FloatingPanel.MinimizeTrigger aria-label="Minimize">_</FloatingPanel.MinimizeTrigger>
            <FloatingPanel.MaximizeTrigger aria-label="Maximize">+</FloatingPanel.MaximizeTrigger>
            <FloatingPanel.RestoreTrigger aria-label="Restore">□</FloatingPanel.RestoreTrigger>
            <FloatingPanel.CloseTrigger aria-label="Close">x</FloatingPanel.CloseTrigger>
          </div>
        </FloatingPanel.Header>
      </FloatingPanel.DragTrigger>
      <FloatingPanel.Body><p>This panel opens by default</p></FloatingPanel.Body>
      <FloatingPanel.ResizeTrigger axis="n" />
      <FloatingPanel.ResizeTrigger axis="e" />
      <FloatingPanel.ResizeTrigger axis="w" />
      <FloatingPanel.ResizeTrigger axis="s" />
      <FloatingPanel.ResizeTrigger axis="ne" />
      <FloatingPanel.ResizeTrigger axis="se" />
      <FloatingPanel.ResizeTrigger axis="sw" />
      <FloatingPanel.ResizeTrigger axis="nw" />
    </FloatingPanel.Content>
  </FloatingPanel.Positioner>
</FloatingPanel.Root>

Root Provider

Section titled “Root Provider”
<script setup lang="ts">
import { FloatingPanel, useFloatingPanel } from '@destyler-ui/vue'

const floatingPanel = useFloatingPanel()
</script>

<template>
  <main>
    <FloatingPanel.RootProvider :value="floatingPanel">
      <FloatingPanel.Trigger>
        Toggle Panel
      </FloatingPanel.Trigger>
      <FloatingPanel.Positioner>
        <FloatingPanel.Content>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header>
              <FloatingPanel.Title>
                Floating Panel
              </FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group">
                <FloatingPanel.MinimizeTrigger>
                  _
                </FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger>
                  +
                </FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger>
                  &#9633;
                </FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger>
                  x
                </FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body>
            <p>Some content</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" />
          <FloatingPanel.ResizeTrigger axis="e" />
          <FloatingPanel.ResizeTrigger axis="w" />
          <FloatingPanel.ResizeTrigger axis="s" />
          <FloatingPanel.ResizeTrigger axis="ne" />
          <FloatingPanel.ResizeTrigger axis="se" />
          <FloatingPanel.ResizeTrigger axis="sw" />
          <FloatingPanel.ResizeTrigger axis="nw" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.RootProvider>
  </main>
</template>

import { FloatingPanel, useFloatingPanel } from '@destyler-ui/react'

function CustomFloatingPanel() {
  const floatingPanel = useFloatingPanel()

  return (
    <FloatingPanel.RootProvider value={floatingPanel}>
      <FloatingPanel.Trigger className="px-4 py-2 bg-blue-500 text-white rounded">
        Toggle Panel
      </FloatingPanel.Trigger>
      <FloatingPanel.Positioner>
        <FloatingPanel.Content className="bg-white border rounded-lg shadow-lg overflow-hidden">
          <FloatingPanel.DragTrigger className="cursor-move">
            <FloatingPanel.Header className="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
              <FloatingPanel.Title className="text-sm font-medium">
                Root Provider Panel
              </FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group" className="flex gap-1">
                <FloatingPanel.MinimizeTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                  -
                </FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                  +
                </FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger className="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                  &#9633;
                </FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger className="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">
                  x
                </FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body className="p-4 relative">
            <p>This panel uses RootProvider with custom hook</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" className="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize" />
          <FloatingPanel.ResizeTrigger axis="e" className="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize" />
          <FloatingPanel.ResizeTrigger axis="w" className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize" />
          <FloatingPanel.ResizeTrigger axis="s" className="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize" />
          <FloatingPanel.ResizeTrigger axis="ne" className="absolute top-0 right-0 w-2 h-2 cursor-ne-resize" />
          <FloatingPanel.ResizeTrigger axis="se" className="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize" />
          <FloatingPanel.ResizeTrigger axis="sw" className="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize" />
          <FloatingPanel.ResizeTrigger axis="nw" className="absolute top-0 left-0 w-2 h-2 cursor-nw-resize" />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.RootProvider>
  )
}

export function RootProvider() {
  return (
    <main className="p-10">
      <CustomFloatingPanel />
    </main>
  )
}

import { FloatingPanel, useFloatingPanel } from '@destyler-ui/solid'

function CustomFloatingPanel() {
  const floatingPanel = useFloatingPanel()

  return (
    <FloatingPanel.RootProvider value={floatingPanel}>
      <FloatingPanel.Trigger class="px-4 py-2 bg-blue-500 text-white rounded">
        Toggle Panel
      </FloatingPanel.Trigger>
      <FloatingPanel.Positioner>
        <FloatingPanel.Content class="bg-white border rounded-lg shadow-lg overflow-hidden">
          <FloatingPanel.DragTrigger class="cursor-move">
            <FloatingPanel.Header class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
              <FloatingPanel.Title class="text-sm font-medium">
                Root Provider Panel
              </FloatingPanel.Title>
              <div data-scope="floating-panel" data-part="trigger-group" class="flex gap-1">
                <FloatingPanel.MinimizeTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                  -
                </FloatingPanel.MinimizeTrigger>
                <FloatingPanel.MaximizeTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                  +
                </FloatingPanel.MaximizeTrigger>
                <FloatingPanel.RestoreTrigger class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">
                  &#9633;
                </FloatingPanel.RestoreTrigger>
                <FloatingPanel.CloseTrigger class="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">
                  x
                </FloatingPanel.CloseTrigger>
              </div>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body class="p-4 relative">
            <p>This panel uses RootProvider with custom hook</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger
            axis="n"
            class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize"
          />
          <FloatingPanel.ResizeTrigger
            axis="e"
            class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize"
          />
          <FloatingPanel.ResizeTrigger
            axis="w"
            class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize"
          />
          <FloatingPanel.ResizeTrigger
            axis="s"
            class="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize"
          />
          <FloatingPanel.ResizeTrigger
            axis="ne"
            class="absolute top-0 right-0 w-2 h-2 cursor-ne-resize"
          />
          <FloatingPanel.ResizeTrigger
            axis="se"
            class="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize"
          />
          <FloatingPanel.ResizeTrigger
            axis="sw"
            class="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize"
          />
          <FloatingPanel.ResizeTrigger
            axis="nw"
            class="absolute top-0 left-0 w-2 h-2 cursor-nw-resize"
          />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </FloatingPanel.RootProvider>
  )
}

export function RootProvider() {
  return (
    <main class="p-10">
      <CustomFloatingPanel />
    </main>
  )
}

<script lang="ts">
  import { FloatingPanel, useFloatingPanel } from '@destyler-ui/svelte'

  const id = $props.id()
  const floatingPanel = useFloatingPanel({ id })
</script>

<main class="p-10">
  <FloatingPanel.RootProvider value={floatingPanel}>
    <FloatingPanel.Trigger class="px-4 py-2 bg-blue-500 text-white rounded">Toggle Panel</FloatingPanel.Trigger>
    <FloatingPanel.Positioner>
      <FloatingPanel.Content class="bg-white border rounded-lg shadow-lg overflow-hidden">
        <FloatingPanel.DragTrigger class="cursor-move">
          <FloatingPanel.Header class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
            <FloatingPanel.Title class="text-sm font-medium">Root Provider Panel</FloatingPanel.Title>
            <div data-scope="floating-panel" data-part="trigger-group" class="flex gap-1">
              <FloatingPanel.MinimizeTrigger aria-label="Minimize" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">-</FloatingPanel.MinimizeTrigger>
              <FloatingPanel.MaximizeTrigger aria-label="Maximize" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">+</FloatingPanel.MaximizeTrigger>
              <FloatingPanel.RestoreTrigger aria-label="Restore" class="w-6 h-6 flex items-center justify-center hover:bg-gray-200 rounded">□</FloatingPanel.RestoreTrigger>
              <FloatingPanel.CloseTrigger aria-label="Close" class="w-6 h-6 flex items-center justify-center hover:bg-red-100 hover:text-red-500 rounded">x</FloatingPanel.CloseTrigger>
            </div>
          </FloatingPanel.Header>
        </FloatingPanel.DragTrigger>
        <FloatingPanel.Body class="p-4 relative"><p>This panel uses RootProvider with custom hook</p></FloatingPanel.Body>
        <FloatingPanel.ResizeTrigger axis="n" class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-n-resize" />
        <FloatingPanel.ResizeTrigger axis="e" class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-e-resize" />
        <FloatingPanel.ResizeTrigger axis="w" class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 cursor-w-resize" />
        <FloatingPanel.ResizeTrigger axis="s" class="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-1 cursor-s-resize" />
        <FloatingPanel.ResizeTrigger axis="ne" class="absolute top-0 right-0 w-2 h-2 cursor-ne-resize" />
        <FloatingPanel.ResizeTrigger axis="se" class="absolute bottom-0 right-0 w-2 h-2 cursor-se-resize" />
        <FloatingPanel.ResizeTrigger axis="sw" class="absolute bottom-0 left-0 w-2 h-2 cursor-sw-resize" />
        <FloatingPanel.ResizeTrigger axis="nw" class="absolute top-0 left-0 w-2 h-2 cursor-nw-resize" />
      </FloatingPanel.Content>
    </FloatingPanel.Positioner>
  </FloatingPanel.RootProvider>
</main>

API Reference

Section titled “API Reference”

Root

PropDefaultType
allowOverflowtruefalse | true

Whether the panel should be strictly contained within the boundary when dragging

closeOnEscape—false | true

Whether the panel should close when the escape key is pressed

defaultOpen—false | true

The initial open state of the floating panel when it is first rendered. Use when you do not need to control its open state.

disabled—false | true

Whether the panel is disabled

draggabletruefalse | true

Whether the panel is draggable

getAnchorPosition—(details: AnchorPositionDetails) => menu.Point

Returns the initial anchor position when the panel opens.

getBoundaryEl—() => HTMLElement | null

Returns the element used to constrain panel movement and resizing.

gridSize1number

The snap grid for the panel

id—string

The unique identifier of the machine.

ids—Partial<{ trigger: string; positioner: string; content: string; title: string; header: string; }>

The ids of the elements in the floating panel. Useful for composition.

lockAspectRatio—false | true

Whether the panel is locked to its aspect ratio

maxSize—{ width: number; height: number; }

The maximum size of the panel

minSize—{ width: number; height: number; }

The minimum size of the panel

open—false | true

Whether the floating panel is open

persistRect—false | true

Whether the panel size and position should be preserved when it is closed

position—{ x: number; y: number; }

The position of the panel

resizabletruefalse | true

Whether the panel is resizable

size—{ width: number; height: number; }

The size of the panel

strategy"absolute""absolute" | "fixed"

The strategy to use for positioning

EmitEvent
openChange[details: OpenChangeDetails]

Callback to be invoked when the floating panel is opened or closed

positionChange[details: PositionChangeDetails]

Callback to be invoked when the position changes

positionChangeEnd[details: PositionChangeDetails]

Callback to be invoked when the position change ends

sizeChange[details: SizeChangeDetails]

Callback to be invoked when the size changes

sizeChangeEnd[details: SizeChangeDetails]

Callback to be invoked when the size change ends

stageChange[details: StageChangeDetails]

Callback to be invoked when the stage changes

update:open[open: boolean]

v-model event for open state

Body

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Content

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Dock

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

DragTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Header

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

MaximizeTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

MinimizeTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ResizeTrigger

PropDefaultType
axis*—ResizeTriggerAxis

The axis for resizing

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RestoreTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—MachineApi<PropTypes>

Title

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
allowOverflowtruefalse | true

Whether the panel should be strictly contained within the boundary when dragging

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

closeOnEscape—false | true

Whether the panel should close when the escape key is pressed

defaultOpen—false | true

The initial open state of the floating panel when it is first rendered. Use when you do not need to control its open state.

disabled—false | true

Whether the panel is disabled

draggabletruefalse | true

Whether the panel is draggable

getAnchorPosition—(details: AnchorPositionDetails) => menu.Point

Function that returns the initial position of the panel when it is opened. If provided, will be used instead of the default position.

getBoundaryEl—() => HTMLElement | null

The boundary of the panel. Useful for recalculating the boundary rect when the it is resized.

gridSize1number

The snap grid for the panel

id—string

The unique identifier of the machine.

ids—Partial<{ trigger: string; positioner: string; content: string; title: string; header: string; }>

The ids of the elements in the floating panel. Useful for composition.

immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

lazyMountfalsefalse | true

Whether to enable lazy mounting

lockAspectRatio—false | true

Whether the panel is locked to its aspect ratio

maxSize—Size | undefined

The maximum size of the panel

minSize—Size | undefined

The minimum size of the panel

onExitComplete—() => void

Function called when the animation ends in the closed state

onOpenChange—(details: floatingPanel.OpenChangeDetails) => void

Function called when the panel is opened or closed

onPositionChange—(details: PositionChangeDetails) => void

Function called when the position of the panel changes via dragging

onPositionChangeEnd—(details: PositionChangeDetails) => void

Function called when the position of the panel changes via dragging ends

onSizeChange—(details: floatingPanel.SizeChangeDetails) => void

Function called when the size of the panel changes via resizing

onSizeChangeEnd—(details: floatingPanel.SizeChangeDetails) => void

Function called when the size of the panel changes via resizing ends

onStageChange—(details: StageChangeDetails) => void

Function called when the stage of the panel changes

open—false | true

Whether the panel is open

persistRect—false | true

Whether the panel size and position should be preserved when it is closed

position—menu.Point

The position of the panel

present—false | true

Whether the node is present (controlled by the user)

resizabletruefalse | true

Whether the panel is resizable

size—Size | undefined

The size of the panel

strategy"absolute""absolute" | "fixed"

The strategy to use for positioning

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Body

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Content

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Context

PropDefaultType
children*—(floatingPanel: UseFloatingPanelReturn) => ReactNode

Dock

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

DragTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Header

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

MaximizeTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

MinimizeTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ResizeTrigger

PropDefaultType
axis*—ResizeTriggerAxis

The axis for resizing

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RestoreTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—UseFloatingPanelReturn
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

lazyMountfalsefalse | true

Whether to enable lazy mounting

onExitComplete—() => void

Function called when the animation ends in the closed state

present—false | true

Whether the node is present (controlled by the user)

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Title

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
allowOverflowtruefalse | true

Whether the panel should be strictly contained within the boundary when dragging

children—null | number | false | true | Node | JSX.ArrayElement | (string & {})
closeOnEscape—false | true

Whether the panel should close when the escape key is pressed

defaultOpen—false | true

The initial open state of the floating panel when it is first rendered. Use when you do not need to control its open state.

disabled—false | true

Whether the panel is disabled

draggabletruefalse | true

Whether the panel is draggable

getAnchorPosition—(details: AnchorPositionDetails) => import("@destyler/menu").Point

Function that returns the initial position of the panel when it is opened. If provided, will be used instead of the default position.

getBoundaryEl—() => HTMLElement | null

The boundary of the panel. Useful for recalculating the boundary rect when the it is resized.

gridSize1number

The snap grid for the panel

id—string

The unique identifier of the machine.

ids—Partial<{ trigger: string; positioner: string; content: string; title: string; header: string; }>

The ids of the elements in the floating panel. Useful for composition.

immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

lazyMountfalsefalse | true

Whether to enable lazy mounting

lockAspectRatio—false | true

Whether the panel is locked to its aspect ratio

maxSize—Size | undefined

The maximum size of the panel

minSize—Size | undefined

The minimum size of the panel

onExitComplete—() => void

Function called when the animation ends in the closed state

onOpenChange—(details: OpenChangeDetails) => void

Function called when the panel is opened or closed

onPositionChange—(details: PositionChangeDetails) => void

Function called when the position of the panel changes via dragging

onPositionChangeEnd—(details: PositionChangeDetails) => void

Function called when the position of the panel changes via dragging ends

onSizeChange—(details: SizeChangeDetails) => void

Function called when the size of the panel changes via resizing

onSizeChangeEnd—(details: SizeChangeDetails) => void

Function called when the size of the panel changes via resizing ends

onStageChange—(details: StageChangeDetails) => void

Function called when the stage of the panel changes

open—false | true

Whether the panel is open

persistRect—false | true

Whether the panel size and position should be preserved when it is closed

position—import("@destyler/menu").Point

The position of the panel

present—false | true

Whether the node is present (controlled by the user)

resizabletruefalse | true

Whether the panel is resizable

size—Size | undefined

The size of the panel

strategy"absolute""absolute" | "fixed"

The strategy to use for positioning

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Body

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

PropDefaultType
asChild—(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Content

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Context

PropDefaultType
children*—(context: UseFloatingPanelContext) => Element

Dock

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

DragTrigger

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Header

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

MaximizeTrigger

PropDefaultType
asChild—(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

MinimizeTrigger

PropDefaultType
asChild—(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

ResizeTrigger

PropDefaultType
axis*—ResizeTriggerAxis
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

RestoreTrigger

PropDefaultType
asChild—(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—UseFloatingPanelReturn
children—null | number | false | true | Node | JSX.ArrayElement | (string & {})
immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

lazyMountfalsefalse | true

Whether to enable lazy mounting

onExitComplete—() => void

Function called when the animation ends in the closed state

present—false | true

Whether the node is present (controlled by the user)

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Title

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLHeadingElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

PropDefaultType
asChild—(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
allowOverflowtruefalse | true

Whether the panel should be strictly contained within the boundary when dragging

asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined
closeOnEscape—false | true

Whether the panel should close when the escape key is pressed

defaultOpen—false | true

The initial open state of the panel when it is not controlled. Prefer this over seeding with `open` for uncontrolled usage.

disabled—false | true

Whether the panel is disabled

draggabletruefalse | true

Whether the panel is draggable

getAnchorPosition—(details: AnchorPositionDetails) => import("@destyler/menu").Point

Function that returns the initial position of the panel when it is opened. If provided, will be used instead of the default position.

getBoundaryEl—() => HTMLElement | null

The boundary of the panel. Useful for recalculating the boundary rect when the it is resized.

gridSize1number

The snap grid for the panel

id—string
ids—Partial<{ trigger: string; positioner: string; content: string; title: string; header: string; }>

The ids of the elements in the floating panel. Useful for composition.

immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

lazyMountfalsefalse | true

Whether to enable lazy mounting

lockAspectRatio—false | true

Whether the panel is locked to its aspect ratio

maxSize—Size | undefined

The maximum size of the panel

minSize—Size | undefined

The minimum size of the panel

onExitComplete—() => void

Function called when the animation ends in the closed state

onOpenChange—(details: import("@destyler/floating-panel").OpenChangeDetails) => void

Function called when the panel is opened or closed

onPositionChange—(details: import("@destyler/floating-panel").PositionChangeDetails) => void

Function called when the position of the panel changes via dragging

onPositionChangeEnd—(details: import("@destyler/floating-panel").PositionChangeDetails) => void

Function called when the position of the panel changes via dragging ends

onSizeChange—(details: import("@destyler/floating-panel").SizeChangeDetails) => void

Function called when the size of the panel changes via resizing

onSizeChangeEnd—(details: import("@destyler/floating-panel").SizeChangeDetails) => void

Function called when the size of the panel changes via resizing ends

onStageChange—(details: import("@destyler/floating-panel").StageChangeDetails) => void

Function called when the stage of the panel changes

open—false | true

Whether the panel is open

persistRect—false | true

Whether the panel size and position should be preserved when it is closed

position—import("@destyler/menu").Point

The position of the panel

present—false | true

Whether the node is present (controlled by the user)

resizabletruefalse | true

Whether the panel is resizable

size—Size | undefined

The size of the panel

skipAnimationOnMountfalsefalse | true

Whether to allow the initial presence animation.

strategy"absolute""absolute" | "fixed"

The strategy to use for positioning

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Body

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

CloseTrigger

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children—Snippet<[]> | undefined

Content

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

Context

PropDefaultType
render*—Snippet<[UseFloatingPanelContext]>

Dock

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

DragTrigger

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

Header

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

MaximizeTrigger

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children—Snippet<[]> | undefined

MinimizeTrigger

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children—Snippet<[]> | undefined

Positioner

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

ResizeTrigger

PropDefaultType
axis*—ResizeTriggerAxis
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

RestoreTrigger

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children—Snippet<[]> | undefined

RootProvider

PropDefaultType
value*—UseFloatingPanelReturn
children—Snippet<[]> | undefined
immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

lazyMountfalsefalse | true

Whether to enable lazy mounting

onExitComplete—() => void

Function called when the animation ends in the closed state

present—false | true

Whether the node is present (controlled by the user)

skipAnimationOnMountfalsefalse | true

Whether to allow the initial presence animation.

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Title

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"h2">]>
children—Snippet<[]> | undefined

Trigger

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children—Snippet<[]> | undefined