modal-dialog - Livewire 如何设置 jetstream 对话框模式的宽度?
问题描述
我正在使用 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 没有影响。什么是正确的语法?
感谢你们对我的帮助。
解决方案
在您的模态中,只需添加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>
推荐阅读
- r - docx文件的导入目录
- python - Matplotlib - 没有图片显示
- asp.net-core - Web 服务器 (IIS) 无法通过 HTTPS 加载静态文件(css、js、图像)
- python - 如何知道窗口类名长度?
- elasticsearch - 如何解决 Elastic Watcher 中的“套接字超时异常”?
- python - 如何将与表情符号混合的文本文件读取到 Pandas 数据框中
- reactjs - React 只显示存在的数组属性的组件
- javascript - D3 与 Angular - 半饼图图表颜色序列
- javascript - 需要有关使用 localStorage 和 jQuery 的 css 显示状态的帮助
- svg - Inkscape/SVG - 我可以定义 Inkscape SVG 文件的本地颜色名称吗?