first init
This commit is contained in:
arifal
249
resources/views/ui/alerts.blade.php
Executable file
249
resources/views/ui/alerts.blade.php
Executable file
@@ -0,0 +1,249 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Alerts'])
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Alerts'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Basic Example</h5>
|
||||
<p class="card-subtitle">
|
||||
Provide contextual feedback messages for typical user actions with the handful of available and
|
||||
flexible alert
|
||||
messages. Alerts are available for any length of text, as well as an optional dismiss button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark mb-0" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dismissible Alerts Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Add a dismiss button and the <code>.alert-dismissible</code> class, which adds extra padding to the
|
||||
right of the alert and
|
||||
positions the <code>.btn-close</code> button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-primary alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Alert Link Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any
|
||||
alert.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
|
||||
Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
|
||||
Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
|
||||
Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-danger mb-0" role="alert">
|
||||
A simple danger alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
|
||||
Give it a click if you like.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Icons Alert Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
You can also include additional elements like icons, heading, etc along side the actual message.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="alert alert-primary alert-icon" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar-sm rounded bg-primary d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
||||
<i class="bx bx-info-circle text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-icon" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar-sm rounded bg-secondary d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
||||
<i class="bx bx-x-circle text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-success alert-icon" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar-sm rounded bg-success d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
||||
<i class="bx bx-check-shield text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-icon mb-0" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar-sm rounded bg-danger d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
||||
<i class="bx bx-info-circle text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Additional Content Alert Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="alert alert-primary mb-3 p-3 mb-xl-0" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p class="mb-0">Aww yeah, you successfully read this important alert message. This
|
||||
example text is going to run a bit longer so that you can see how spacing within an
|
||||
alert works with this kind of content.</p>
|
||||
<hr>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice
|
||||
and tidy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="alert alert-secondary p-3 mb-0" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p class="mb-0">Aww yeah, you successfully read this important alert message. This
|
||||
example text is going to run a bit longer so that you can see how spacing within an
|
||||
alert works with this kind of content.</p>
|
||||
<hr>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice
|
||||
and tidy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Live example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Click the button below to show an alert (hidden with inline styles to start), then dismiss (and
|
||||
destroy) it with the built-in close button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="liveAlertPlaceholder"></div>
|
||||
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
Reference in New Issue
Block a user