K
KoreUI

Overlay - Tamanos

Overlay

Los tamanos controlan el ancho maximo del panel overlay usando clases responsivas de Tailwind CSS.

Demo en vivo

Compara los diferentes tamanos abriendo el mismo overlay con distintos tamanoss.

Tamanos disponibles

Once tamanos que usan clases max-w-* responsivas para adaptarse a diferentes breakpoints.

Tamano Clases CSS
smsm:max-w-sm
mdsm:max-w-md
lgsm:max-w-md md:max-w-lg
xlsm:max-w-md md:max-w-xl
2xlsm:max-w-md md:max-w-xl lg:max-w-2xl
3xlsm:max-w-md md:max-w-xl lg:max-w-3xl
4xlsm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl
5xlsm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl
6xlsm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl
7xlsm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl
fullmax-w-full

Como funcionan

En mobile (debajo del breakpoint sm) todo overlay es full-width. A medida que el viewport crece, el max-width se expande progresivamente.

Ejemplo: overlay con tamano 5xl

< sm: ancho completo

sm: max-w-md (28rem)

md: max-w-xl (36rem)

lg: max-w-3xl (48rem)

xl: max-w-5xl (64rem)

Si el tamano solicitado no es reconocido, hace fallback a 2xl.

Definir el tamano

Sobreescribe el metodo estatico overlaySize() en tu componente.

Sobreescribir overlaySize() 
use KoreUi\Overlay\OverlayComponent;

class QuickAction extends OverlayComponent
{
    public static function overlaySize(): string
    {
        return 'sm';
    }

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

class QuickAction extends OverlayComponent
{
    public static function overlaySize(): string
    {
        return 'sm';
    }

    public function render()
    {
        return view('livewire.overlays.quick-action');
    }
}

El tamano por defecto, si no se sobreescribe, es 2xl (configurable en config/kore-ui.php).

Tamanos por tipo

El tamano controla max-width en el panel del overlay, aplicable a todos los tipos.

Modal: restringe el ancho del dialogo centrado.

Drawer: restringe el ancho del panel lateral.

Confirm: restringe el ancho del dialogo de confirmacion.

Bottom Sheet: restringe el ancho de la hoja inferior.

Fullscreen: normalmente usa full para llenar el viewport.

Drawer con tamano grande 
class WideDrawer extends OverlayComponent
{
    public static function overlayType(): string
    {
        return 'drawer';
    }

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

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

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

    public function render()
    {
        return view('livewire.overlays.wide-drawer');
    }
}

Override en runtime

Puedes sobreescribir el tamano al momento de abrir sin modificar el componente.

Override via overlayAttributes 
{{-- Abrir pequeno --}}
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.edit-form',
    overlayAttributes: { size: 'lg' }
})">
    Abrir (pequeno)
</button>

{{-- Abrir grande --}}
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.edit-form',
    overlayAttributes: { size: '5xl' }
})">
    Abrir (grande)
</button>
{{-- Abrir pequeno --}}
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.edit-form',
    overlayAttributes: { size: 'lg' }
})">
    Abrir (pequeno)
</button>

{{-- Abrir grande --}}
<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.edit-form',
    overlayAttributes: { size: '5xl' }
})">
    Abrir (grande)
</button>

Cuando sobreescribes size via overlayAttributes, el sizeClass se recalcula automaticamente desde el nuevo valor por el OverlayManager.