K
KoreUI

Overlay - Tipos

Overlay

Cinco tipos de overlay con posicionamiento, animacion y estilos propios: modal, drawer, confirm, bottom-sheet y fullscreen.

Demo en vivo

Haz click en cada boton para ver el tipo de overlay en accion.

Los cinco tipos

Cada tipo tiene su propio posicionamiento, animacion y estilo de contenedor.

Tipo Posicion default Animacion Contenedor
modal center Scale + translate Esquinas redondeadas, max-height 90dvh, scrollable
drawer right Slide-x Altura completa, sin esquinas redondeadas, scrollable
confirm center Scale Esquinas redondeadas, compacto
bottom-sheet bottom Slide-y Esquinas superiores redondeadas, max-height 80dvh, scrollable
fullscreen center Fade Sin esquinas, altura completa (min-h-screen), scrollable

Definir el tipo

Sobreescribe el metodo estatico overlayType() en tu componente.

Sobreescribir overlayType() 
use KoreUi\Overlay\OverlayComponent;

class UserSettings extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'drawer';
    }

    public function render()
    {
        return view('livewire.overlays.user-settings');
    }
}
use KoreUi\Overlay\OverlayComponent;

class UserSettings extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'drawer';
    }

    public function render()
    {
        return view('livewire.overlays.user-settings');
    }
}

Si no sobreescribes el metodo, el tipo usa el valor de config/kore-ui.php (por defecto modal).

Drawer

Se desliza desde el borde derecho (o izquierdo). Altura completa del viewport. Ideal para paneles de configuracion, navegacion y sidebars de detalle.

Componente tipo drawer 
class SettingsDrawer extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'drawer';
    }

    public function render()
    {
        return view('livewire.overlays.settings-drawer');
    }
}
class SettingsDrawer extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'drawer';
    }

    public function render()
    {
        return view('livewire.overlays.settings-drawer');
    }
}
Abrir drawer 
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.settings-drawer'
})">
    Configuracion
</button>
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.settings-drawer'
})">
    Configuracion
</button>

Posicion derecha: items-stretch justify-end

Posicion izquierda: items-stretch justify-start

Contenedor: h-full overflow-y-auto

Confirm

Centrado con animacion scale rapida. Contenedor compacto sin scroll. Ideal para prompts de confirmacion, alertas y decisiones si/no.

Componente tipo confirm 
class DeleteConfirm extends OverlayComponent
{
    public int $itemId;

    public static function overlayType(): string
    {
        return 'confirm';
    }

    public static function overlaySize(): string
    {
        return 'sm';
    }

    public function mount(int $itemId): void
    {
        $this->itemId = $itemId;
    }

    public function confirm(): void
    {
        Item::destroy($this->itemId);
        $this->closeWith(['item-deleted']);
    }

    public function render()
    {
        return view('livewire.overlays.delete-confirm');
    }
}
class DeleteConfirm extends OverlayComponent
{
    public int $itemId;

    public static function overlayType(): string
    {
        return 'confirm';
    }

    public static function overlaySize(): string
    {
        return 'sm';
    }

    public function mount(int $itemId): void
    {
        $this->itemId = $itemId;
    }

    public function confirm(): void
    {
        Item::destroy($this->itemId);
        $this->closeWith(['item-deleted']);
    }

    public function render()
    {
        return view('livewire.overlays.delete-confirm');
    }
}
Abrir confirm 
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.delete-confirm',
    arguments: { itemId: {{ $item->id }} }
})">
    Eliminar
</button>
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.delete-confirm',
    arguments: { itemId: {{ $item->id }} }
})">
    Eliminar
</button>

Clases de posicion: items-end justify-center p-4 text-center sm:items-center sm:p-0

Contenedor: rounded-kore-lg

Bottom Sheet

Se desliza desde la parte inferior del viewport. Esquinas superiores redondeadas. Maximo 80% de altura. Ideal para acciones mobile-friendly, pickers y listas de opciones.

Componente tipo bottom-sheet 
class ActionSheet extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'bottom-sheet';
    }

    public function render()
    {
        return view('livewire.overlays.action-sheet');
    }
}
class ActionSheet extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'bottom-sheet';
    }

    public function render()
    {
        return view('livewire.overlays.action-sheet');
    }
}
Abrir bottom sheet 
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.action-sheet'
})">
    Opciones
</button>
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.action-sheet'
})">
    Opciones
</button>

Clases de posicion: items-end justify-center p-4 sm:p-0

Contenedor: rounded-t-kore-xl max-h-[80dvh] overflow-y-auto

Fullscreen

Ocupa todo el viewport con animacion fade. Sin esquinas redondeadas. Ideal para vistas inmersivas, editores grandes y preview de media.

Componente tipo fullscreen 
class MediaPreview extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'fullscreen';
    }

    public function render()
    {
        return view('livewire.overlays.media-preview');
    }
}
class MediaPreview extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'fullscreen';
    }

    public function render()
    {
        return view('livewire.overlays.media-preview');
    }
}
Abrir fullscreen 
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.media-preview'
})">
    Ver preview
</button>
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.media-preview'
})">
    Ver preview
</button>

Clases de posicion: items-stretch

Contenedor: min-h-screen overflow-y-auto

Posiciones por defecto

Cada tipo tiene una posicion por defecto definida en OverlayDefaults::typePositions().

Posiciones por defecto 
[
    'modal'        => 'center',
    'drawer'       => 'right',
    'confirm'      => 'center',
    'bottom-sheet' => 'bottom',
    'fullscreen'   => 'center',
]
[
    'modal'        => 'center',
    'drawer'       => 'right',
    'confirm'      => 'center',
    'bottom-sheet' => 'bottom',
    'fullscreen'   => 'center',
]

Sobreescribir posicion

Implementa overlayPosition() para cambiar la posicion por defecto. El caso mas comun es un drawer desde la izquierda.

Drawer desde la izquierda 
class NavigationDrawer extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'drawer';
    }

    public static function overlayPosition(): string
    {
        return 'left';
    }

    public function render()
    {
        return view('livewire.overlays.navigation-drawer');
    }
}
class NavigationDrawer extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'drawer';
    }

    public static function overlayPosition(): string
    {
        return 'left';
    }

    public function render()
    {
        return view('livewire.overlays.navigation-drawer');
    }
}
O via overlayAttributes en runtime 
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.settings-drawer',
    overlayAttributes: { position: 'left' }
})">
    Abrir desde la izquierda
</button>
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.settings-drawer',
    overlayAttributes: { position: 'left' }
})">
    Abrir desde la izquierda
</button>

Cuando la posicion es left, el drawer se desliza desde el lado izquierdo (-translate-x-full) en vez del derecho (translate-x-full). La animacion se ajusta automaticamente.