License Key Required
No license key entered.
Enter or update your key with php artisan news:license <key>,
or purchase one at scriptgain.com.
Modal
components.modal
Status
Shipped Default
Shipped File
resources/views/components/modal.blade.php
Compiled PHP
What Blade turns your template into. This is what the syntax check parses.
Loading…Available Variables And Components
A guide to what this template can use, derived from the shipped source. Click any item to insert it at your cursor. It is a helpful reference, not a runtime guarantee.
Always Available
- Validation error bag. Always present. Pairs with @error('field').
In This Template
- A single calendar event.
- Footer.
- Icon.
- The configured page-width class, e.g. max-w-7xl. Use on your outer container.
- Name.
- Subtitle.
- The page title set by the controller.
- Tone.
Drop any of these in. Click to insert the opening tag at your cursor.
General
Admin Panel
Layouts
Records
Site (Public)
Common Blade
- Print a value, safely escaped. The default choice.
- Print raw HTML. Only for content you trust.
- Show something conditionally.
- Loop over a collection.
- Loop, with a fallback when the collection is empty.
- Show a validation message for a field.
- A small block of PHP. Never on line 1. Keep logic out of templates.
- A comment that never reaches the browser.
Civic Helpers
- Build a URL to a named route, e.g. a department page.
- Link to a single news post.
- Turn a stored upload path into a public URL.
- A cache-busted URL for a bundled asset.
- Read a config value, e.g. the site width class.
- Build an absolute URL to a path.
No History Yet
Every save, revert, and reset of this template is recorded here, with a one-click way back to any of them.
The Template That Shipped With The Product
Read only. This is what Reset To Default puts back.
@props(['name', 'title' => null, 'subtitle' => null, 'icon' => null, 'tone' => 'default', 'maxWidth' => 'max-w-lg'])
@php
$toneChip = [
'default' => 'bg-white text-brand-600 ring-brand-200',
'danger' => 'bg-white text-rose-600 ring-rose-200',
'warn' => 'bg-white text-amber-600 ring-amber-200',
][$tone] ?? 'bg-white text-brand-600 ring-brand-200';
$toneHead = [
'default' => 'from-brand-50',
'danger' => 'from-rose-50',
'warn' => 'from-amber-50',
][$tone] ?? 'from-brand-50';
@endphp
{{-- Accessible modal (replaces native confirm/alert/prompt).
Open: $dispatch('open-modal', '{{ $name }}') Close: $dispatch('close-modal', '{{ $name }}') --}}
<div x-data="{ open: false }"
x-on:open-modal.window="if ($event.detail === '{{ $name }}') open = true"
x-on:close-modal.window="if ($event.detail === '{{ $name }}') open = false"
x-on:keydown.escape.window="open = false"
x-show="open" x-cloak
class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div x-show="open" x-transition.opacity.duration.200ms
class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" @click="open = false"></div>
<div x-show="open"
x-trap.inert.noscroll="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-2 scale-95"
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="relative flex flex-col w-full {{ $maxWidth }} max-h-[85vh] bg-white rounded-2xl shadow-2xl ring-1 ring-slate-200 overflow-hidden text-left">
{{-- Header: subtle branded gradient, icon chip, wrapping title + optional subtitle. --}}
<div class="flex items-start gap-3.5 px-5 py-4 border-b border-slate-100 bg-gradient-to-br {{ $toneHead }} via-white to-white shrink-0">
@if ($icon)
<span class="inline-flex items-center justify-center w-10 h-10 rounded-xl ring-1 shadow-sm shrink-0 {{ $toneChip }}">
<x-icon :name="$icon" class="w-5 h-5" />
</span>
@endif
<div class="min-w-0 flex-1">
<h3 class="text-xl font-semibold text-slate-900 leading-snug break-words">{{ $title }}</h3>
@if ($subtitle)<p class="mt-1 text-sm text-slate-500 leading-relaxed break-words">{{ $subtitle }}</p>@endif
</div>
<button type="button" @click="open = false" class="shrink-0 -mr-1 -mt-1 text-slate-400 hover:text-slate-600 rounded-lg p-1">
<x-icon name="x" class="w-5 h-5" />
</button>
</div>
<div class="vx-wrap vx-scroll flex-1 overflow-y-auto overflow-x-hidden px-5 py-4 text-sm text-slate-600 leading-relaxed">
{{ $slot }}
</div>
@isset($footer)
<div class="flex items-center justify-end gap-2 px-5 py-3.5 border-t border-slate-100 bg-slate-50/70 shrink-0">
{{ $footer }}
</div>
@endisset
</div>
</div>
Blade In One Screen
The directives you will use most.
- Print a value, escaped. Safe by default.
- Print raw HTML. Only for content you trust.
- Show something conditionally.
- Loop over a collection.
- Use a shared component. Every component in Shared Components is available.
- A comment that never reaches the browser.
{{ $variable }}
{!! $html !!}
@if / @else / @endif
@foreach / @endforeach
<x-card>
{{-- comment --}}
House Rules
Follow these and your edits will survive updates.
-
Never start line 1 with
@php. Blade mis-parses it and the page fails. The editor refuses to save it. - Keep logic out of templates. If you need a calculation, it belongs in a composer or component class, not here.
- The shipped file is never modified. Reset To Default always gets you back.
- Every save is versioned. You can revert to any earlier version in one click.
- Press Tab inside the editor to indent rather than jump to the next field.