改进 Alert

This commit is contained in:
iVampireSP.com 2023-01-15 07:44:49 +08:00
parent 802a626419
commit 429b25afee
No known key found for this signature in database
GPG Key ID: 2F7B001CA27A8132
10 changed files with 132 additions and 60 deletions

View File

@ -7,16 +7,6 @@
class Alert extends Component
{
/**
* Create a new component instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*

View File

@ -0,0 +1,20 @@
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class AlertDanger extends Component
{
/**
* Get the view / contents that represent the component.
*
* @return View|Closure|string
*/
public function render(): View|Closure|string
{
return view('components.alert-danger');
}
}

View File

@ -0,0 +1,20 @@
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class AlertInfo extends Component
{
/**
* Get the view / contents that represent the component.
*
* @return View|Closure|string
*/
public function render(): View|Closure|string
{
return view('components.alert-info');
}
}

View File

@ -0,0 +1,20 @@
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class AlertSuccess extends Component
{
/**
* Get the view / contents that represent the component.
*
* @return View|Closure|string
*/
public function render(): View|string|Closure
{
return view('components.alert-success');
}
}

View File

@ -0,0 +1,20 @@
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class AlertWarning extends Component
{
/**
* Get the view / contents that represent the component.
*
* @return View|Closure|string
*/
public function render(): View|Closure|string
{
return view('components.alert-warning');
}
}

View File

@ -0,0 +1,11 @@
<div>
<div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
<use xlink:href="#exclamation-triangle-fill"/>
</svg>
<div>
{{ $slot }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>

View File

@ -0,0 +1,11 @@
<div>
<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
<use xlink:href="#info-fill"/>
</svg>
<div>
{{ $slot }}
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>

View File

@ -0,0 +1,11 @@
<div>
<div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
<use xlink:href="#check-circle-fill"/>
</svg>
<div>
{{ $slot }}
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>

View File

@ -0,0 +1,3 @@
<div>
<!-- Because you are alive, everything is possible. - Thich Nhat Hanh -->
</div>

View File

@ -14,63 +14,29 @@
</symbol>
</svg>
@if (session('error'))
<div>
<div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
<use xlink:href="#exclamation-triangle-fill"/>
</svg>
<div>
{{ session('error') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>
<x-alert-danger>
{{ session('error') }}
</x-alert-danger>
@endif
@if (session('status'))
<div>
<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
<use xlink:href="#info-fill"/>
</svg>
<div>
{{ session('status') }}
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<x-alert-info>
{{ session('status') }}
</x-alert-info>
@endif
@if (session('success'))
<div>
<div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
<use xlink:href="#check-circle-fill"/>
</svg>
<div>
{{ session('success') }}
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<x-alert-success>
{{ session('success') }}
</x-alert-success>
@endif
@if (isset($errors) && $errors->any())
<div>
<div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
<use xlink:href="#exclamation-triangle-fill"/>
</svg>
<div>
<ul class="mb-0">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>
<x-alert-danger>
<ul class="mb-0">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</x-alert-danger>
@endif
</div>