Livewire 如何设置 jetstream dialog-modal 的宽度？

Question

我正在使用 Jet-Stream 的对话框模式，它工作得很好，但我不知道如何固定它的宽度。

下面是我的使用方法

<x-dialog-modal wire:model="show_equipment_dialog" :maxWidth="'100%'">
    <x-slot name="title"> {{ __('Equipment Dialog') }}</x-slot>
    <x-slot name="content">
        @livewire('equipment-lw', ['usage' => 'chooser'])
    </x-slot>
    <x-slot name="footer">
        <x-secondary-button wire:click="closeEquipmentDialog">{{ __('Close the dialog') }}</x-secondary-button>
    </x-slot>
</x-dialog-modal>

在对话框模式中使用这个

@props(['id' => null, 'maxWidth' => null,'usage'=>'database'])

<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
<div class=" px-6 py-4">
    <div class="text-lg">
        {{ $title }}{{$maxWidth}}
    </div>

    <div class="mt-4">
        {{ $content }}
    </div>
</div>

<div class="px-6 py-4 bg-gray-100 text-right">
    {{ $footer }}
</div>

maxWidth 被传递给 dialog-modal（由于内容槽中的 {{$maxWidth}}，我可以看到这一点）但对 x-jet-modal 没有影响。正确的语法是什么？

谢谢你帮助我。

Answer 1

可以在vendor/jetstream/components中设置modal的maxWidth "modal.blade.php"然后找到maxWidth

的switch语句

Answer 2

在您的模式中只需添加 maxWidth="size-you-want"。可用尺寸在 resources\views\vendor\jetstream\components\modal.blade.php 中，但您可以添加更多尺寸。默认为 sm, md, lg, xl, 2xl

<x-dialog-modal wire:model="show_equipment_dialog" maxWidth="md">
<x-slot name="title"> {{ __('Equipment Dialog') }}</x-slot>
<x-slot name="content">
    @livewire('equipment-lw', ['usage' => 'chooser'])
</x-slot>
<x-slot name="footer">
    <x-secondary-button wire:click="closeEquipmentDialog">{{ __('Close the dialog') }}</x-secondary-button>
</x-slot>

Answer 3

您可以在模态组件中添加以下内容

$maxWidth = [
    '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', '3xl' => 'sm:max-w-3xl', '4xl' => 'sm:max-w-4xl', '5xl' => 'sm:max-w-5xl', '6xl' => 'sm:max-w-6xl', '7xl' => 'sm:max-w-7xl', 'full' => 'sm:max-w-full',
][$maxWidth ?? '2xl'];

Livewire 如何设置 jetstream dialog-modal 的宽度？

Livewire How to set the width of jetstream dialog-modal?

modal-dialog

laravel-livewire

jetstream