K
KoreUI

Splitter

UI

Paneles redimensionables con separador draggable. Soporta orientación horizontal/vertical, límites min/max y persistencia de estado.

Uso básico

Panel izquierdo
Panel derecho
<x-kore::splitter class="h-64">
    <x-kore::splitter.panel :size="30">
        Panel izquierdo
    </x-kore::splitter.panel>
    <x-kore::splitter.panel :size="70">
        Panel derecho
    </x-kore::splitter.panel>
</x-kore::splitter>
<x-kore::splitter class="h-64">
    <x-kore::splitter.panel :size="30">
        Panel izquierdo
    </x-kore::splitter.panel>
    <x-kore::splitter.panel :size="70">
        Panel derecho
    </x-kore::splitter.panel>
</x-kore::splitter>

Vertical

Cambia la orientación a vertical para paneles apilados.

Arriba
Abajo
<x-kore::splitter orientation="vertical" class="h-96">
    <x-kore::splitter.panel :size="40">Arriba</x-kore::splitter.panel>
    <x-kore::splitter.panel :size="60">Abajo</x-kore::splitter.panel>
</x-kore::splitter>
<x-kore::splitter orientation="vertical" class="h-96">
    <x-kore::splitter.panel :size="40">Arriba</x-kore::splitter.panel>
    <x-kore::splitter.panel :size="60">Abajo</x-kore::splitter.panel>
</x-kore::splitter>

Persistencia

Usa stateKey para guardar los tamaños en localStorage.

Panel izquierdo
Panel derecho
<x-kore::splitter stateKey="my-layout" class="h-64">
    <x-kore::splitter.panel :size="50">
        Panel izquierdo
    </x-kore::splitter.panel>
    <x-kore::splitter.panel :size="50">
        Panel derecho
    </x-kore::splitter.panel>
</x-kore::splitter>
<x-kore::splitter stateKey="my-layout" class="h-64">
    <x-kore::splitter.panel :size="50">
        Panel izquierdo
    </x-kore::splitter.panel>
    <x-kore::splitter.panel :size="50">
        Panel derecho
    </x-kore::splitter.panel>
</x-kore::splitter>

Props

Prop Tipo Default Descripción
orientation string config(horizontal) Orientación: horizontal, vertical
gutterSize int config(8) Ancho del separador en px
stateKey string|null null Clave para persistir tamaños en localStorage

Props del panel

Props

Prop Tipo Default Descripción
size int|null null Tamaño inicial en %
minSize int 0 Tamaño mínimo en %
maxSize int 100 Tamaño máximo en %