0

Estoy realizando un proyecto con Laravel, Jetstream y Livewire.

Quería aumentar el tamaño de un dialog modal, he visto en stackoverflow que se puede cambiar agregandole maxWidth <x-dialog-modal wire:model="show_equipment_dialog" maxWidth="md"> algo como esto, pero parece ser que el máximo es de 2xl.

He visto un archivo que parece que es donde esta configurado el componente llamado Modal.vue y otro DialogModal.vue que supongo que extiende de Modal.

Modal:

computed: {
        maxWidthClass() {
            return {
                'sm': 'sm:max-w-sm',
                'md': 'sm:max-w-md',
                'lg': 'sm:max-w-lg',
                'xl': 'sm:max-w-xl',
                '2xl': 'sm:max-w-2xl',
            }[this.maxWidth]
        }
    }

props: {
        show: {
            default: false
        },
        maxWidth: {
            default: '2xl'
        },
        closeable: {
            default: true
        },
    },

ModalDialog:

import Modal from './Modal'

export default {
    components: {
        Modal,
    },

    props: {
        show: {
            default: false
        },
        maxWidth: {
            default: '2xl'
        },
        closeable: {
            default: true
        },
    },

He intentado agregarle otra medida '4xl': 'sm:max-w-4xl' pero no funciona.

¿Alguien sabe como se podría hacer? Soy estudiante de un ciclo y soy muy novato.

2 respuestas 2

0

En el component modal tendrás que agregar la clase 4xl que quieres establecer.

maxWidthClass() {
           return {
                'sm': 'sm:max-w-sm',
                'md': 'sm:max-w-md',
                'lg': 'sm:max-w-lg',
                'xl': 'sm:max-w-xl',
                '2xl': 'sm:max-w-2xl',
                '4xl': 'sm:max-w-4xl',
            }[this.maxWidth]
  }

y tu component quedaría de la siguiente manera:

<x-dialog-modal wire:model="show_equipment_dialog" maxWidth="4xl">

Para los tamaños que puedes establecer, la doc la encuentras en: https://tailwindcss.com/docs/max-width#max-width-scale

0

Veo que especificas que quieres usar Livewire, te sugiero consideres la opción de utilizar de un componente Blade.

Para utilizar un componente Blade tienes que definir un arreglo (array) con algunas propiedades por ejemplo en este caso el tamaño y en específico, la altura.

Primeramente especifíco una altura que será la "default", esta se llamará type que indicará que tipo de modal es. Después puedo asignar un objeto que llevará un valor asignado a una clave, en esta podré asignar una clase Tailwind para determinar el tamaño que quiera.

@props([
    'hash',
    'type' => 'images',
    'height' => [
        'images' => 'h-64',
        'categories' => 'h-3/5'
    ]
])

Utilizando $height como la variable que llevará en corchetes un arreglo, es como podemos intercambiar las clases de Tailwind que especificamos en el objeto. (o lo que estés utilizando)

        <div {{ $attributes->merge([ 
            'class' =>
                "{$height[$type]} fixed inset-0 flex items-center justify-center w-72 m-auto md:h-auto md:w-auto md:max-w-3xl md:my-5 md:mx-5 md:mx-auto bg-white rounded-md shadow-md overflow-x-auto md:overflow-hidden"
            ]) }}
        >

Al momento de utilizarlo le asigno la propiedad de type que correspondrá a la clase que quiero utilizar.

<x-faro-modal type="categories">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.