first init
This commit is contained in:
arifal
270
resources/views/ui/accordion.blade.php
Executable file
270
resources/views/ui/accordion.blade.php
Executable file
@@ -0,0 +1,270 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Accordion'])
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Accordion'])
|
||||
|
||||
<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">Using the card component, you can extend the default collapse
|
||||
behavior to create an accordion.To properly achieve the accordion style, be sure to
|
||||
use <code>.accordion</code> as a wrapper.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Basic Example -->
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button fw-medium" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
|
||||
data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is shown by
|
||||
default, until the
|
||||
collapse
|
||||
plugin adds the appropriate classes that we use to style each element.
|
||||
These classes control
|
||||
the overall
|
||||
appearance, as well as the showing and hiding via CSS transitions. You
|
||||
can modify any of
|
||||
this with
|
||||
custom CSS or overriding our default variables. It's also worth noting
|
||||
that just about any
|
||||
HTML can go
|
||||
within the <code>.accordion-body</code>, though the transition does
|
||||
limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button fw-medium collapsed" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
|
||||
aria-controls="collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
|
||||
data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden
|
||||
by default, until
|
||||
the collapse
|
||||
plugin adds the appropriate classes that we use to style each element.
|
||||
These classes control
|
||||
the overall
|
||||
appearance, as well as the showing and hiding via CSS transitions. You
|
||||
can modify any of
|
||||
this with
|
||||
custom CSS or overriding our default variables. It's also worth noting
|
||||
that just about any
|
||||
HTML can go
|
||||
within the <code>.accordion-body</code>, though the transition does
|
||||
limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button fw-medium collapsed" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
|
||||
aria-controls="collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
|
||||
data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden
|
||||
by default, until the
|
||||
collapse
|
||||
plugin adds the appropriate classes that we use to style each element.
|
||||
These classes control
|
||||
the overall
|
||||
appearance, as well as the showing and hiding via CSS transitions. You
|
||||
can modify any of
|
||||
this with
|
||||
custom CSS or overriding our default variables. It's also worth noting
|
||||
that just about any
|
||||
HTML can go
|
||||
within the <code>.accordion-body</code>, though the transition does
|
||||
limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title"> Flush Accordion </h5>
|
||||
<p class="card-subtitle">Add <code>.accordion-flush</code> to remove the default
|
||||
<code>background-color</code>, some borders, and some rounded corners to render
|
||||
accordions edge-to-edge with their parent container.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="accordion accordion-flush" id="accordionFlushExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingOne">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#flush-collapseOne" aria-expanded="false"
|
||||
aria-controls="flush-collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseOne" class="accordion-collapse collapse"
|
||||
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Placeholder content for this accordion, which is
|
||||
intended to demonstrate the
|
||||
<code>.accordion-flush</code> class. This is the first item's accordion
|
||||
body.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#flush-collapseTwo" aria-expanded="false"
|
||||
aria-controls="flush-collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseTwo" class="accordion-collapse collapse"
|
||||
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Placeholder content for this accordion, which is
|
||||
intended to demonstrate the
|
||||
<code>.accordion-flush</code> class. This is the second item's accordion
|
||||
body. Let's imagine this
|
||||
being
|
||||
filled with some actual content.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#flush-collapseThree" aria-expanded="false"
|
||||
aria-controls="flush-collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseThree" class="accordion-collapse collapse"
|
||||
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Placeholder content for this accordion, which is
|
||||
intended to demonstrate the
|
||||
<code>.accordion-flush</code> class. This is the third item's accordion
|
||||
body. Nothing more exciting
|
||||
happening here in terms of content, but just filling up the space to
|
||||
make it look, at least at first
|
||||
glance, a bit more representative of how this would look in a real-world
|
||||
application.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Always Open Accordion</h5>
|
||||
<p class="card-subtitle">Omit the <code>data-bs-parent</code> attribute on each
|
||||
<code>.accordion-collapse</code> to make accordion items stay open when another item
|
||||
is opened.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="accordion" id="accordionPanelsStayOpenExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
|
||||
aria-controls="panelsStayOpen-collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
|
||||
aria-labelledby="panelsStayOpen-headingOne">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is shown by
|
||||
default, until the collapse
|
||||
plugin adds the appropriate classes that we use to style each element.
|
||||
These classes control the overall
|
||||
appearance, as well as the showing and hiding via CSS transitions. You
|
||||
can modify any of this with
|
||||
custom CSS or overriding our default variables. It's also worth noting
|
||||
that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the transition does
|
||||
limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
|
||||
aria-controls="panelsStayOpen-collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
|
||||
aria-labelledby="panelsStayOpen-headingTwo">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden
|
||||
by default, until the collapse
|
||||
plugin adds the appropriate classes that we use to style each element.
|
||||
These classes control the overall
|
||||
appearance, as well as the showing and hiding via CSS transitions. You
|
||||
can modify any of this with
|
||||
custom CSS or overriding our default variables. It's also worth noting
|
||||
that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the transition does
|
||||
limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
|
||||
aria-controls="panelsStayOpen-collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
|
||||
aria-labelledby="panelsStayOpen-headingThree">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden
|
||||
by default, until the collapse
|
||||
plugin adds the appropriate classes that we use to style each element.
|
||||
These classes control the overall
|
||||
appearance, as well as the showing and hiding via CSS transitions. You
|
||||
can modify any of this with
|
||||
custom CSS or overriding our default variables. It's also worth noting
|
||||
that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the transition does
|
||||
limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
</div>
|
||||
<!-- End Container -->
|
||||
@endsection
|
||||
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
|
||||
147
resources/views/ui/avatar.blade.php
Executable file
147
resources/views/ui/avatar.blade.php
Executable file
@@ -0,0 +1,147 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Avatars'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Avatars'])
|
||||
|
||||
<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">
|
||||
Create and group avatars of different sizes and shapes with the css classes.
|
||||
Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or
|
||||
scale it up to different sizes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<img src="/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xs rounded">
|
||||
<p>
|
||||
<code>.avatar-xs</code>
|
||||
</p>
|
||||
<img src="/images/users/avatar-3.jpg" alt="image" class="img-fluid avatar-sm rounded mt-2">
|
||||
<p class="mb-2 mb-sm-0">
|
||||
<code>.avatar-sm</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<img src="/images/users/avatar-4.jpg" alt="image" class="img-fluid avatar-md rounded" />
|
||||
<p>
|
||||
<code>.avatar-md</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<img src="/images/users/avatar-5.jpg" alt="image" class="img-fluid avatar-lg rounded" />
|
||||
<p>
|
||||
<code>.avatar-lg</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<img src="/images/users/avatar-6.jpg" alt="image" class="img-fluid avatar-xl rounded" />
|
||||
<p class="mb-0">
|
||||
<code>.avatar-xl</code>
|
||||
</p>
|
||||
</div>
|
||||
</div> <!-- end row-->
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Rounded Circle
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Using an additional class <code>.rounded-circle</code> in <code><img></code> element creates
|
||||
the rounded avatar.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<img src="/images/users/avatar-7.jpg" alt="image"
|
||||
class="img-fluid avatar-md rounded-circle" />
|
||||
<p class="mt-1">
|
||||
<code>.avatar-md .rounded-circle</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<img src="/images/users/avatar-8.jpg" alt="image"
|
||||
class="img-fluid avatar-lg rounded-circle" />
|
||||
<p>
|
||||
<code>.avatar-lg .rounded-circle</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<img src="/images/users/avatar-9.jpg" alt="image"
|
||||
class="img-fluid avatar-xl rounded-circle" />
|
||||
<p class="mb-0">
|
||||
<code>.avatar-xl .rounded-circle</code>
|
||||
</p>
|
||||
</div>
|
||||
</div> <!-- end row-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Images Shapes</h5>
|
||||
<p class="card-subtitle"> Avatars with different sizes and shapes.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-3 align-items-end">
|
||||
<div>
|
||||
<img src="/images/small/img-2.jpg" alt="image" class="img-fluid rounded" width="200" />
|
||||
<p class="mb-0">
|
||||
<code>.rounded</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/images/users/avatar-5.jpg" alt="image" class="img-fluid rounded" width="120" />
|
||||
<p class="mb-0">
|
||||
<code>.rounded</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/images/users/avatar-7.jpg" alt="image" class="img-fluid rounded-circle"
|
||||
width="120" />
|
||||
<p class="mb-0">
|
||||
<code>.rounded-circle</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/images/small/img-3.jpg" alt="image" class="img-fluid img-thumbnail"
|
||||
width="200" />
|
||||
<p class="mb-0">
|
||||
<code>.img-thumbnail</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/images/users/avatar-8.jpg" alt="image"
|
||||
class="img-fluid rounded-circle img-thumbnail" width="120" />
|
||||
<p class="mb-0">
|
||||
<code>.rounded-circle .img-thumbnail</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
196
resources/views/ui/badge.blade.php
Executable file
196
resources/views/ui/badge.blade.php
Executable file
@@ -0,0 +1,196 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Badge'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Badge'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Heading
|
||||
</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">
|
||||
<h1>h1.Example heading <span class="badge bg-primary">New</span></h1>
|
||||
<h2>h2.Example heading <span class="badge bg-secondary">New</span></h2>
|
||||
<h3>h3.Example heading <span class="badge bg-success">New</span></h3>
|
||||
<h4>h4.Example heading <span class="badge bg-info">New</span></h4>
|
||||
<h5>h5.Example heading <span class="badge bg-warning">New</span></h5>
|
||||
<h6 class="mb-0">h6.Example heading <span class="badge bg-danger">New</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Outline & Outline Pill Badges
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Using the <code>.badge-outline-**</code> to quickly create a bordered badges.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Outline Badges -->
|
||||
<div class="mb-2">
|
||||
<span class="badge badge-outline-primary me-1">Primary</span>
|
||||
<span class="badge badge-outline-secondary me-1">Secondary</span>
|
||||
<span class="badge badge-outline-success me-1">Success</span>
|
||||
<span class="badge badge-outline-info me-1">Info</span>
|
||||
<span class="badge badge-outline-warning me-1">Warning</span>
|
||||
<span class="badge badge-outline-danger me-1">Danger</span>
|
||||
<span class="badge badge-outline-dark me-1">Dark</span>
|
||||
<span class="badge badge-outline-purple me-1">Purple</span>
|
||||
<span class="badge badge-outline-pink me-1">Pink</span>
|
||||
<span class="badge badge-outline-orange me-1">Orange</span>
|
||||
</div>
|
||||
<!-- Outline Pill Badges -->
|
||||
<div>
|
||||
<span class="badge badge-outline-primary rounded-pill me-1">Primary</span>
|
||||
<span class="badge badge-outline-secondary rounded-pill me-1">Secondary</span>
|
||||
<span class="badge badge-outline-success rounded-pill me-1">Success</span>
|
||||
<span class="badge badge-outline-info rounded-pill me-1">Info</span>
|
||||
<span class="badge badge-outline-warning rounded-pill me-1">Warning</span>
|
||||
<span class="badge badge-outline-danger rounded-pill me-1">Danger</span>
|
||||
<span class="badge badge-outline-dark rounded-pill me-1">Dark</span>
|
||||
<span class="badge badge-outline-purple rounded-pill me-1">Purple</span>
|
||||
<span class="badge badge-outline-pink rounded-pill me-1">Pink</span>
|
||||
<span class="badge badge-outline-orange rounded-pill me-1">Orange</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Soft & Soft Pill Badges
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Using the <code>.badge-soft-**</code> modifier class, you can have more soften variation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Soft Badges -->
|
||||
<div class="mb-2">
|
||||
<span class="badge badge-soft-primary me-1">Primary</span>
|
||||
<span class="badge badge-soft-secondary me-1">Secondary</span>
|
||||
<span class="badge badge-soft-success me-1">Success</span>
|
||||
<span class="badge badge-soft-info me-1">Info</span>
|
||||
<span class="badge badge-soft-warning me-1">Warning</span>
|
||||
<span class="badge badge-soft-danger me-1">Danger</span>
|
||||
<span class="badge badge-soft-dark me-1">Dark</span>
|
||||
<span class="badge badge-soft-purple me-1">Purple</span>
|
||||
<span class="badge badge-soft-pink me-1">Pink</span>
|
||||
<span class="badge badge-soft-orange me-1">Orange</span>
|
||||
</div>
|
||||
<!-- Soft Pill Badges -->
|
||||
<div>
|
||||
<span class="badge badge-soft-primary rounded-pill me-1">Primary</span>
|
||||
<span class="badge badge-soft-secondary rounded-pill me-1">Secondary</span>
|
||||
<span class="badge badge-soft-success rounded-pill me-1">Success</span>
|
||||
<span class="badge badge-soft-info rounded-pill me-1">Info</span>
|
||||
<span class="badge badge-soft-warning rounded-pill me-1">Warning</span>
|
||||
<span class="badge badge-soft-danger rounded-pill me-1">Danger</span>
|
||||
<span class="badge badge-soft-dark rounded-pill me-1">Dark</span>
|
||||
<span class="badge badge-soft-purple rounded-pill me-1">Purple</span>
|
||||
<span class="badge badge-soft-pink rounded-pill me-1">Pink</span>
|
||||
<span class="badge badge-soft-orange rounded-pill me-1">Orange</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default & Pill Badges
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use our background utility classes to quickly change the appearance of a badge.
|
||||
And use the <code>.rounded-pill</code> class to make badges more rounded.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Default Badges -->
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-primary me-1">Primary</span>
|
||||
<span class="badge bg-secondary me-1">Secondary</span>
|
||||
<span class="badge bg-success me-1">Success</span>
|
||||
<span class="badge bg-info me-1">Info</span>
|
||||
<span class="badge bg-warning me-1">Warning</span>
|
||||
<span class="badge bg-danger me-1">Danger</span>
|
||||
<span class="badge bg-dark me-1">Dark</span>
|
||||
<span class="badge bg-purple me-1">Purple</span>
|
||||
<span class="badge bg-pink me-1">Pink</span>
|
||||
<span class="badge bg-orange me-1">Orange</span>
|
||||
</div>
|
||||
<!-- Pill Badges -->
|
||||
<div>
|
||||
<span class="badge bg-primary rounded-pill me-1">Primary</span>
|
||||
<span class="badge bg-secondary rounded-pill me-1">Secondary</span>
|
||||
<span class="badge bg-success rounded-pill me-1">Success</span>
|
||||
<span class="badge bg-info rounded-pill me-1">Info</span>
|
||||
<span class="badge bg-warning rounded-pill me-1">Warning</span>
|
||||
<span class="badge bg-danger rounded-pill me-1">Danger</span>
|
||||
<span class="badge bg-dark rounded-pill me-1">Dark</span>
|
||||
<span class="badge bg-purple rounded-pill me-1">Purple</span>
|
||||
<span class="badge bg-pink rounded-pill me-1">Pink</span>
|
||||
<span class="badge bg-orange rounded-pill me-1">Orange</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Buttons & Position
|
||||
</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="mb-2">
|
||||
<button type="button" class="btn btn-primary me-1 mb-1">
|
||||
Notifications <span class="badge bg-danger ms-1">4</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary me-1 mb-1">
|
||||
Notifications <span class="badge bg-primary ms-1">new</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-primary me-1 mb-1">
|
||||
Notifications <span class="badge bg-primary ms-1">11</span>
|
||||
</button>
|
||||
<a href="javascript:void(0);" class="btn me-1 mb-1">
|
||||
Notifications <span class="badge bg-primary ms-1">90+</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary position-relative me-3">
|
||||
Inbox
|
||||
<span
|
||||
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger border border-light">99+</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Profile
|
||||
<span
|
||||
class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
<!-- end badges -->
|
||||
@endsection
|
||||
84
resources/views/ui/breadcrumb.blade.php
Executable file
84
resources/views/ui/breadcrumb.blade.php
Executable file
@@ -0,0 +1,84 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Breadcrumb'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Breadcrumb'])
|
||||
|
||||
<!-- start breadcrumbs -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use an ordered or unordered list with linked list items to create a minimally styled
|
||||
breadcrumb.
|
||||
Use our utilities to add additional styles as desired.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Default Breadcrumb -->
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb py-0">
|
||||
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb py-0">
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-0 py-0">
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Dividers Breadcrumb</h5>
|
||||
<p class="card-subtitle">
|
||||
Optionally you can also specify the icon with your breadcrumb item.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb py-0">
|
||||
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb py-0">
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-0 py-0">
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
<!-- end breadcrumbs -->
|
||||
@endsection
|
||||
333
resources/views/ui/buttons.blade.php
Executable file
333
resources/views/ui/buttons.blade.php
Executable file
@@ -0,0 +1,333 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Buttons'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Buttons'])
|
||||
|
||||
<!-- start button -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use the button classes on an <code><a></code>, <code><button></code>
|
||||
or <code><input></code> element.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</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">
|
||||
Rounded Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Add <code>.rounded-pill</code> to default button to get rounded corners.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary rounded-pill">Primary</button>
|
||||
<button type="button" class="btn btn-secondary rounded-pill">Secondary</button>
|
||||
<button type="button" class="btn btn-success rounded-pill">Success</button>
|
||||
<button type="button" class="btn btn-info rounded-pill">Info</button>
|
||||
<button type="button" class="btn btn-warning rounded-pill">Warning</button>
|
||||
<button type="button" class="btn btn-danger rounded-pill">Danger</button>
|
||||
<button type="button" class="btn btn-dark rounded-pill">Dark</button>
|
||||
<button type="button" class="btn btn-light rounded-pill">Light</button>
|
||||
</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">
|
||||
Outline Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use a classes <code>.btn-outline-**</code> to quickly create a bordered buttons.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<button type="button" class="btn btn-outline-info">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
</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">Outline Rounded Buttons </h5>
|
||||
<p class="card-subtitle">
|
||||
Use a classes <code>.btn-outline-**</code> to quickly create a bordered buttons.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-outline-primary rounded-pill">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary rounded-pill">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success rounded-pill">Success</button>
|
||||
<button type="button" class="btn btn-outline-info rounded-pill">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning rounded-pill">Warning</button>
|
||||
</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">
|
||||
Soft Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use a classes <code>.btn-soft-**</code> to quickly create buttons with soft
|
||||
background.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-soft-primary">Primary</button>
|
||||
<button type="button" class="btn btn-soft-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-soft-success">Success</button>
|
||||
<button type="button" class="btn btn-soft-info">Info</button>
|
||||
<button type="button" class="btn btn-soft-warning">Warning</button>
|
||||
</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">
|
||||
Soft Rounded Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use a classes <code>.rounded-pill**</code> with <code>.btn-soft-**</code> to
|
||||
quickly create a Outline Soft buttons.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-soft-primary rounded-pill">Primary</button>
|
||||
<button type="button" class="btn btn-soft-secondary rounded-pill">Secondary</button>
|
||||
<button type="button" class="btn btn-soft-success rounded-pill">Success</button>
|
||||
<button type="button" class="btn btn-soft-info rounded-pill">Info</button>
|
||||
<button type="button" class="btn btn-soft-warning rounded-pill">Warning</button>
|
||||
</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">
|
||||
Button Width
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Create buttons with minimum width by adding add <code>.width-xs</code>,
|
||||
<code>.width-sm</code>,
|
||||
<code>.width-md</code>, <code>.width-lg</code> or <code>.width-xl</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary width-xl">Extra Large</button>
|
||||
<button type="button" class="btn btn-secondary width-lg">Large</button>
|
||||
<button type="button" class="btn btn-success width-md">Middle</button>
|
||||
<button type="button" class="btn btn-info width-sm">Small</button>
|
||||
<button type="button" class="btn btn-warning width-xs">Xs</button>
|
||||
</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">Button Sizes</h5>
|
||||
<p class="card-subtitle">
|
||||
Add <code>.btn-lg</code>, <code>.btn-sm</code> for additional sizes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary btn-lg">Large</button>
|
||||
<button type="button" class="btn btn-secondary">Normal</button>
|
||||
<button type="button" class="btn btn-success btn-sm">Small</button>
|
||||
</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">
|
||||
Disabled Button
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Add <code>disabled</code> attribute to buttons.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary" disabled>Primary</button>
|
||||
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
|
||||
<button type="button" class="btn btn-success" disabled>Success</button>
|
||||
<button type="button" class="btn btn-info" disabled>Info</button>
|
||||
<button type="button" class="btn btn-warning" disabled>Warning</button>
|
||||
</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">
|
||||
Icon Button
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Icon only Button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary"><i class="bx bx-heart"></i></button>
|
||||
<button type="button" class="btn btn-secondary"><i class="bx bx-user-voice"></i></button>
|
||||
<button type="button" class="btn btn-success"><i class="bx bx-check-double"></i></button>
|
||||
<button type="button" class="btn btn-info"><i class="bx bx-cloud me-1"></i>Cloude
|
||||
Hosting</button>
|
||||
<button type="button" class="btn btn-warning"><i
|
||||
class="bx bx-info-circle me-1"></i>Warning</button>
|
||||
</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">
|
||||
Button Group
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- btn-group horizontal -->
|
||||
<div class="btn-group mb-1 me-1">
|
||||
<button type="button" class="btn btn-light">Left</button>
|
||||
<button type="button" class="btn btn-light">Middle</button>
|
||||
<button type="button" class="btn btn-light">Right</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1 me-1">
|
||||
<button type="button" class="btn btn-light">1</button>
|
||||
<button type="button" class="btn btn-light">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-light">4</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1 me-1">
|
||||
<button type="button" class="btn btn-light">5</button>
|
||||
<button type="button" class="btn btn-secondary">6</button>
|
||||
<button type="button" class="btn btn-light">7</button>
|
||||
<button id="dropdown" type="button" class="btn btn-light dropdown-toggle"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown
|
||||
link</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown
|
||||
link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- btn-group vertical -->
|
||||
<div class="btn-group-vertical me-4">
|
||||
<button type="button" class="btn btn-light">Top</button>
|
||||
<button type="button" class="btn btn-light">Middle</button>
|
||||
<button type="button" class="btn btn-light">Bottom</button>
|
||||
</div>
|
||||
<div class="btn-group-vertical">
|
||||
<button type="button" class="btn btn-light">Button 1</button>
|
||||
<button type="button" class="btn btn-light">Button 2</button>
|
||||
<button id="verticalDropdown" type="button" class="btn btn-light dropdown-toggle"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Button 3
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="verticalDropdown">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown
|
||||
link</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown
|
||||
link</a></li>
|
||||
</ul>
|
||||
</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">
|
||||
Block Button
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Create block level buttons by adding class <code>.d-grid</code> to parent div.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-grid gap-2">
|
||||
<button type="button" class="btn btn-primary btn-lg">Block Button</button>
|
||||
<button type="button" class="btn btn-secondary">Block Button</button>
|
||||
<button type="button" class="btn btn-light btn-sm">Block Button</button>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
|
||||
</div> <!-- end row -->
|
||||
<!-- end button -->
|
||||
@endsection
|
||||
66
resources/views/ui/card.blade.php
Executable file
66
resources/views/ui/card.blade.php
Executable file
@@ -0,0 +1,66 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Cards'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Cards'])
|
||||
|
||||
<!-- start cards -->
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card mb-3 mb-xl-0">
|
||||
<img class="card-img-top img-fluid" src="/images/small/img-1.jpg" alt="img-1">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">Card title</h5>
|
||||
<p class="card-text text-muted">
|
||||
Some quick example text to build on the card title and make
|
||||
up the bulk of the card's content. With supporting text below as
|
||||
a natural lead-in to additional content.
|
||||
</p>
|
||||
<a href="javascript:void(0);" class="btn btn-primary">Button</a>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card mb-3">
|
||||
<img class="card-img-top img-fluid" src="/images/small/img-2.jpg" alt="img-2">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">Card title</h5>
|
||||
<p class="card-text text-muted">Some quick example text to build on the card title.</p>
|
||||
</div> <!-- end card body -->
|
||||
<ul class="list-group list-group-flush text-muted">
|
||||
<li class="list-group-item text-muted">Dapibus ac facilisis in</li>
|
||||
</ul>
|
||||
<div class="card-body">
|
||||
<a href="javascript:void(0);" class="card-link text-primary">Card link</a>
|
||||
<a href="javascript:void(0);" class="card-link text-primary">Another link</a>
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card mb-3 mb-xl-0">
|
||||
<img class="card-img-top img-fluid" src="/images/small/img-4.jpg" alt="img-4">
|
||||
<div class="card-body">
|
||||
<p class="card-text text-muted">
|
||||
Some quick example text to build on the card title and make
|
||||
up the bulk of the card's content. With supporting text below as
|
||||
a natural lead-in to additional content.
|
||||
</p>
|
||||
<a href="javascript:void(0);" class="btn btn-primary">Button</a>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card mb-3 mb-xl-0">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-0">Card title</h5>
|
||||
</div>
|
||||
<img class="img-fluid" src="/images/small/img-5.jpg" alt="img-5">
|
||||
<div class="card-body">
|
||||
<p class="card-text text-muted">Some quick example text to build on the card title.</p>
|
||||
<a href="javascript:void(0);" class="card-link text-primary">Card link</a>
|
||||
<a href="javascript:void(0);" class="card-link text-primary">Another link</a>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
352
resources/views/ui/carousel.blade.php
Executable file
352
resources/views/ui/carousel.blade.php
Executable file
@@ -0,0 +1,352 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Carousel'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Carousel'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Slides Only
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Here’s a carousel with slides only. Note the presence of the <code>.d-block</code> and
|
||||
<code>.img-fluid</code> on
|
||||
carousel images to prevent browser default image alignment.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-2.jpg" class="d-block w-100" alt="img-2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-3.jpg" class="d-block w-100" alt="img-3">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-4.jpg" class="d-block w-100" alt="img-4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
With Controls
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Adding in the previous and next controls:
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-4.jpg" class="d-block w-100" alt="img-4">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-2.jpg" class="d-block w-100" alt="img-2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-3.jpg" class="d-block w-100" alt="img-3">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
With Indicators
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
You can also add the indicators to the carousel, alongside the controls, too.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
|
||||
class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
|
||||
aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
|
||||
aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-5.jpg" class="d-block w-100" alt="img-5">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-6.jpg" class="d-block w-100" alt="img-6">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-7.jpg" class="d-block w-100" alt="img-7">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title ">
|
||||
With Captions
|
||||
</h5>
|
||||
<p class="card-subtitle">Add captions to your slides easily with the <code>.carousel-caption</code>
|
||||
element within any <code>.carousel-item</code>. They can be easily hidden on smaller viewports, as
|
||||
shown below, with optional display utilities. We hide them initially with <code>.d-none</code> and
|
||||
bring them back on medium-sized devices with <code>.d-md-block</code>.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-6.jpg" class="d-block w-100" alt="img-6">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-white">First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-7.jpg" class="d-block w-100" alt="img-7">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-white">Second slide label</h5>
|
||||
<p>Some representative placeholder content for the second slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-5.jpg" class="d-block w-100" alt="img-5">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-white">Third slide label</h5>
|
||||
<p>Some representative placeholder content for the third slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Crossfade
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.carousel-fade</code> to your carousel to animate slides with a fade
|
||||
transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may
|
||||
want to add <code>.bg-body</code> or some custom CSS to the <code>.carousel-item</code>s for proper
|
||||
crossfading.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-1.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-2.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-3.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Individual <code> .carousel-item </code> interval
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>data-bs-interval=""</code> to a <code>.carousel-item</code> to
|
||||
change the amount of time to delay between automatically cycling to the next item.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active" data-bs-interval="10000">
|
||||
<img src="/images/small/img-1.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item" data-bs-interval="2000">
|
||||
<img src="/images/small/img-2.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-3.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Disable touch swiping <code> .carousel-item </code> interval
|
||||
</h5>
|
||||
<p class="card-subtitle">Carousels support swiping left/right on touchscreen devices to move between
|
||||
slides. This can be disabled using the <code>data-bs-touch</code> attribute. The example below also
|
||||
does not include the <code>data-bs-ride</code> attribute so it doesn’t autoplay.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-4.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-5.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-6.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button"
|
||||
data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button"
|
||||
data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dark Variant <code> .carousel-item </code> interval
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.carousel-dark</code> to the <code>.carousel</code> for darker
|
||||
controls, indicators, and captions. Controls have been inverted from their default white fill with
|
||||
the <code>filter</code> CSS property. Captions and controls have additional Sass variables that
|
||||
customize the <code>color</code> and <code>background-color</code>.</p>
|
||||
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"
|
||||
class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
|
||||
aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
|
||||
aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active" data-bs-interval="10000">
|
||||
<img src="/images/small/img-8.jpg" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item" data-bs-interval="2000">
|
||||
<img src="/images/small/img-9.jpg" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Some representative placeholder content for the second slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-10.jpg" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Some representative placeholder content for the third slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
132
resources/views/ui/collapse.blade.php
Executable file
132
resources/views/ui/collapse.blade.php
Executable file
@@ -0,0 +1,132 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Collapse'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Collapse'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Example
|
||||
</h5>
|
||||
<p class="card-subtitle">Click the buttons below to show and hide another element via class changes:</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li><code>.collapse</code> hides content</li>
|
||||
<li><code>.collapsing</code> is applied during transitions</li>
|
||||
<li><code>.collapse.show</code> shows content</li>
|
||||
</ul>
|
||||
<p class="text-muted">Generally, we recommend using a button with the <code>data-bs-target</code>
|
||||
attribute. While not recommended from a semantic point of view, you can also use a link with the
|
||||
<code>href</code> attribute (and a <code>role="button"</code>). In both cases, the
|
||||
<code>data-bs-toggle="collapse"</code> is required.
|
||||
</p>
|
||||
|
||||
<div class="hstack gap-2">
|
||||
<a class="btn btn-primary mb-2" data-bs-toggle="collapse" href="#collapseExample" role="button"
|
||||
aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-bs-target
|
||||
</button>
|
||||
</div>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card mb-0">
|
||||
<div class="card-body">
|
||||
Some placeholder content for the collapse component. This panel is hidden by default but
|
||||
revealed when the
|
||||
user activates the relevant trigger.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title ">
|
||||
Horizontal
|
||||
</h5>
|
||||
<p class="card-subtitle">The collapse plugin also supports horizontal collapsing. Add the
|
||||
<code>.collapse-horizontal</code> modifier class to transition the <code>width</code> instead of
|
||||
<code>height</code> and set a <code>width</code> on the immediate child element. Feel free to write
|
||||
your own custom Sass, use inline styles, or use our width utilities.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
|
||||
Toggle width collapse
|
||||
</button>
|
||||
<div style="min-height: 135px;">
|
||||
<div class="collapse collapse-horizontal" id="collapseWidthExample">
|
||||
<div class="card card-body mb-0" style="width: 300px;">
|
||||
This is some placeholder content for a horizontal collapse. It's hidden by default and shown
|
||||
when triggered.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Multiple Targets
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
A <code><button></code> or <code><a></code> can show and hide multiple elements by
|
||||
referencing them with a selector in its <code>href</code> or <code>data-bs-target</code> attribute.
|
||||
Multiple <code><button></code> or <code><a></code> can show and hide an element if they
|
||||
each reference it with their <code>href</code> or <code>data-bs-target</code> attribute</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="hstack gap-2 mb-3">
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button"
|
||||
aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#multiCollapseExample2" aria-expanded="false"
|
||||
aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target=".multi-collapse" aria-expanded="false"
|
||||
aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body">
|
||||
Some placeholder content for the first collapse component of this multi-collapse
|
||||
example. This panel
|
||||
is hidden by default but revealed when the user activates the relevant trigger.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Some placeholder content for the second collapse component of this multi-collapse
|
||||
example. This
|
||||
panel is hidden by default but revealed when the user activates the relevant trigger.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
546
resources/views/ui/dropdown.blade.php
Executable file
546
resources/views/ui/dropdown.blade.php
Executable file
@@ -0,0 +1,546 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Dropdown'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Dropdown'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Single Button Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Any single <code>.btn</code> can be turned into a dropdown toggle with some markup changes.
|
||||
Here's how you can put them to work with either <code><button></code> elements.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<!-- Button Dropdown -->
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Link Dropdown -->
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
Dropdown link
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Single Button Variant Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Any single <code>.btn</code> can be turned into a dropdown toggle with some markup changes.
|
||||
Here's how you can put them to work with either <code><button></code> elements.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Primary
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Secondary
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Success
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Info
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Split Button Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns,
|
||||
but with the addition of <code>.dropdown-toggle-split</code> for proper spacing around the dropdown
|
||||
caret.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dark Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">Opt into darker dropdowns to match a dark navbar or custom style by adding
|
||||
<code>.dropdown-menu-dark</code> onto an existing <code>.dropdown-menu</code>. No changes are
|
||||
required to the dropdown items.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">Dark Dropdown</button>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dropdown Direction
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Trigger dropdown menus above elements by adding <code>.dropup</code>, dropdown menus at the left of
|
||||
the
|
||||
elements by adding <code>.dropstart</code> or dropdown menus at the right of the elements by adding
|
||||
<code>.dropend</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Down
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Up
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Right
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropstart">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Left
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dropdown Menu Items
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.active</code> to items in the dropdown to <strong>style them as
|
||||
active</strong>. To convey the active state to assistive technologies, use the
|
||||
<code>aria-current</code> attribute — using the <code>page</code> value for the current page, or
|
||||
<code>true</code> for the current item in a set.
|
||||
</p>
|
||||
<p class="card-subtitle">Add <code>.disabled</code> to items in the dropdown to <strong>style them as
|
||||
disabled</strong>.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<ul class="dropdown-menu show block position-static">
|
||||
<li><a class="dropdown-item" href="#">Regular link</a></li>
|
||||
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another link</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="dropdown-menu show block position-static">
|
||||
<li><a class="dropdown-item" href="#">Regular link</a></li>
|
||||
<li><a class="dropdown-item disabled" href="#" aria-current="true">Active link</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dropdown options
|
||||
</h5>
|
||||
<p class="card-subtitle">Use <code>data-bs-offset</code> or <code>data-bs-reference</code> to change
|
||||
the location of the dropdown.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false" data-bs-offset="10,20">
|
||||
Offset
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Reference</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Auto close behavior
|
||||
</h5>
|
||||
<p class="card-subtitle">By default, the dropdown menu is closed when clicking inside or outside the
|
||||
dropdown menu. You can use the <code>autoClose</code> option to change this behavior of the
|
||||
dropdown.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="true" aria-expanded="false">
|
||||
Default dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="inside" aria-expanded="false">
|
||||
Clickable outside
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="outside" aria-expanded="false">
|
||||
Clickable inside
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="false" aria-expanded="false">
|
||||
Manual close
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Menu Content
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<p>Separate groups of related menu items with a divider.</p>
|
||||
<p>Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll
|
||||
likely need additional sizing styles to constrain the menu width.</p>
|
||||
<p>Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding
|
||||
utilities to give it the negative space you require.</p>
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Header
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-header">Dropdown header</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Divider
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Text
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-lg p-3">
|
||||
<p>Some example text that's free-flowing within the dropdown menu.</p>
|
||||
<p class="mb-0">And this is more example text.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Menu Forms
|
||||
</button>
|
||||
<form class="dropdown-menu dropdown-lg p-3">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="exampleDropdownFormEmail">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleDropdownFormEmail"
|
||||
placeholder="email@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="exampleDropdownFormPassword">Password</label>
|
||||
<input type="password" class="form-control" id="exampleDropdownFormPassword"
|
||||
placeholder="Password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="dropdownCheck">
|
||||
<label class="form-check-label" for="dropdownCheck">Remember me</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
<!-- end dropdown -->
|
||||
@endsection
|
||||
376
resources/views/ui/list-group.blade.php
Executable file
376
resources/views/ui/list-group.blade.php
Executable file
@@ -0,0 +1,376 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'List Group'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partial/.page-title', ['title' => 'Base UI', 'subtitle' => 'List Group'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Basic
|
||||
</h5>
|
||||
<p class="card-subtitle">The most basic list group is an unordered list with list items
|
||||
and the proper classes. Build upon it with the options that follow, or with your own
|
||||
CSS as needed.</p>
|
||||
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
<li class="list-group-item">A fourth item</li>
|
||||
<li class="list-group-item">And a fifth one</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Active items
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.active</code> to a <code>.list-group-item</code> to
|
||||
indicate the current active selection.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item active" aria-current="true">An active item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
<li class="list-group-item">A fourth item</li>
|
||||
<li class="list-group-item">And a fifth one</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Disabled items</h5>
|
||||
<p class="card-subtitle">Add <code>.disabled</code> to a <code>.list-group-item</code>
|
||||
to make it <em>appear</em> disabled. Note that some elements with
|
||||
<code>.disabled</code> will also require custom JavaScript to fully disable their
|
||||
click events (e.g., links).
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
<li class="list-group-item">A fourth item</li>
|
||||
<li class="list-group-item">And a fifth one</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Links and buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">Use <code><a></code>s or <code><button></code>s to
|
||||
create <em>actionable</em> list group items with hover, disabled, and active states
|
||||
by adding <code>.list-group-item-action</code>. We separate these pseudo-classes to
|
||||
ensure list groups made of non-interactive elements (like <code><li></code>s
|
||||
or <code><div></code>s) don’t provide a click or tap affordance.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
|
||||
The current link item
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A second link
|
||||
item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A third link
|
||||
item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A fourth link
|
||||
item</a>
|
||||
<a class="list-group-item list-group-item-action disabled">A disabled link
|
||||
item</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="list-group">
|
||||
<button type="button" class="list-group-item list-group-item-action active"
|
||||
aria-current="true">
|
||||
The current button
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">A
|
||||
second button item</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">A third
|
||||
button item</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">A
|
||||
fourth button item</button>
|
||||
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled
|
||||
button item</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Flush
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.list-group-flush</code> to remove some borders and
|
||||
rounded corners to render list group items edge-to-edge in a parent container (e.g.,
|
||||
cards).</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
<li class="list-group-item">A fourth item</li>
|
||||
<li class="list-group-item">And a fifth one</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Numbered
|
||||
</h5>
|
||||
<p class="card-subtitle">Add the <code>.list-group-numbered</code> modifier class (and
|
||||
optionally use an <code><ol></code> element) to opt into numbered list group
|
||||
items. Numbers are generated via CSS (as opposed to a <code><ol></code>s
|
||||
default browser styling) for better placement inside list group items and to allow
|
||||
for better customization.</p>
|
||||
<p class="card-subtitle">Numbers are generated by <code>counter-reset</code> on the
|
||||
<code><ol></code>, and then styled and placed with a <code>::before</code>
|
||||
pseudo-element on the <code><li></code> with <code>counter-increment</code>
|
||||
and <code>content</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<ol class="list-group list-group-numbered">
|
||||
<li class="list-group-item">A list item</li>
|
||||
<li class="list-group-item">A list item</li>
|
||||
<li class="list-group-item">A list item</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<ol class="list-group list-group-numbered">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Content for list item
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Content for list item
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Content for list item
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Horizontal
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.list-group-horizontal</code> to change the layout of
|
||||
list group items from vertical to horizontal across all breakpoints. Alternatively,
|
||||
choose a responsive variant <code>.list-group-horizontal-{sm|md|lg|xl|xxl}</code> to
|
||||
make a list group horizontal starting at that breakpoint’s <code>min-width</code>.
|
||||
Currently <strong>horizontal list groups cannot be combined with flush list
|
||||
groups.</strong></p>
|
||||
<p class="card-subtitle mt-1"><strong>ProTip:</strong> Want equal-width list group items
|
||||
when horizontal? Add <code>.flex-fill</code> to each list group item.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50 mb-3 d-flex flex-column gap-2">
|
||||
<ul class="list-group list-group-horizontal">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<ul class="list-group list-group-horizontal-sm">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<ul class="list-group list-group-horizontal-md">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<ul class="list-group list-group-horizontal-lg">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<ul class="list-group list-group-horizontal-xl">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<ul class="list-group list-group-horizontal-xxl">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Contextual classes
|
||||
</h5>
|
||||
<p class="card-subtitle">Use contextual classes to style list items with a stateful
|
||||
background and color.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="w-50">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">A simple default list group item</li>
|
||||
<li class="list-group-item list-group-item-primary">A simple primary list group
|
||||
item</li>
|
||||
<li class="list-group-item list-group-item-secondary">A simple secondary list
|
||||
group item</li>
|
||||
<li class="list-group-item list-group-item-success">A simple success list group
|
||||
item</li>
|
||||
<li class="list-group-item list-group-item-danger">A simple danger list group
|
||||
item</li>
|
||||
<li class="list-group-item list-group-item-warning">A simple warning list group
|
||||
item</li>
|
||||
<li class="list-group-item list-group-item-info">A simple info list group item
|
||||
</li>
|
||||
<li class="list-group-item list-group-item-light">A simple light list group item
|
||||
</li>
|
||||
<li class="list-group-item list-group-item-dark">A simple dark list group item
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Custom content
|
||||
</h5>
|
||||
<p class="card-subtitle">Add nearly any HTML within, even for linked list groups like
|
||||
the one below, with the help of <a href="/docs/5.2/utilities/flex/">flexbox
|
||||
utilities</a>.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1 text-reset">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<small>And some small print.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<small class="text-muted">And some muted small print.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<small class="text-muted">And some muted small print.</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Checkboxes and radios
|
||||
</h5>
|
||||
<p class="card-subtitle">Place Bootstrap’s checkboxes and radios within list group items
|
||||
and customize as needed. You can use them without <code><label></code>s, but
|
||||
please remember to include an <code>aria-label</code> attribute and value for
|
||||
accessibility.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50 ">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
|
||||
<label class="form-check-label" for="firstCheckbox">First checkbox</label>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
|
||||
<label class="form-check-label" for="secondCheckbox">Second checkbox</label>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
|
||||
<label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
745
resources/views/ui/modal.blade.php
Executable file
745
resources/views/ui/modal.blade.php
Executable file
@@ -0,0 +1,745 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Modal'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Modal'])
|
||||
|
||||
<!-- start modal -->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Modals
|
||||
</h5>
|
||||
<p class="card-subtitle">Toggle a working modal demo by clicking the button below. It
|
||||
will slide down and fade in from the top of the page.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Woo-hoo, you're reading this text in a modal!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Static Backdrop
|
||||
</h5>
|
||||
<p class="card-subtitle">When backdrop is set to static, the modal will not close when
|
||||
clicking outside of it. Click the button below to try it.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
|
||||
Launch static backdrop modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
|
||||
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>I will not close if you click outside of me. Don't even try to press
|
||||
escape key.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Understood</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title ">
|
||||
Scrolling Long Content
|
||||
</h5>
|
||||
<p class="card-subtitle">When modals become too long for the user’s viewport or
|
||||
device, they scroll independent of the page itself. Try the demo below to see what
|
||||
we mean.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalLong">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" style="min-height: 1500px">
|
||||
<p>This is some placeholder content to show the scrolling behavior for
|
||||
modals. Instead of repeating
|
||||
the text the modal, we use an inline style set a minimum height,
|
||||
thereby extending the length of
|
||||
the overall modal and demonstrating the overflow scrolling. When
|
||||
content becomes longer than the
|
||||
height of the viewport, scrolling will move the modal as needed.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p class="text-muted mt-3">You can also create a scrollable modal that allows scroll the
|
||||
modal body by adding <code>.modal-dialog-scrollable</code> to
|
||||
<code>.modal-dialog</code>.
|
||||
</p>
|
||||
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalScrollable">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalScrollable" tabindex="-1"
|
||||
aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is some placeholder content to show the scrolling behavior for
|
||||
modals. We use repeated line
|
||||
breaks to demonstrate how content can exceed minimum inner height,
|
||||
thereby showing inner
|
||||
scrolling. When content becomes longer than the predefined
|
||||
max-height of modal, content will be
|
||||
cropped and scrollable within the modal.</p>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<p>This content should appear at the bottom after you scroll.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Modal Position
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.modal-dialog-centered</code> to
|
||||
<code>.modal-dialog</code> to vertically center the modal.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalCenter">
|
||||
Vertically centered modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalCenter" tabindex="-1"
|
||||
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is a vertically centered modal.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalCenteredScrollable">
|
||||
Vertically centered scrollable modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1"
|
||||
aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">
|
||||
Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is some placeholder content to show a vertically centered
|
||||
modal. We've added some extra
|
||||
copy
|
||||
here to show how vertically centering the modal works when
|
||||
combined with scrollable modals.
|
||||
We
|
||||
also use some repeated line breaks to quickly extend the height
|
||||
of the content, thereby
|
||||
triggering the scrolling. When content becomes longer than the
|
||||
predefined max-height of
|
||||
modal,
|
||||
content will be cropped and scrollable within the modal.</p>
|
||||
<br><br><br><br><br><br><br><br><br><br>
|
||||
<p>Just like that.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="text-muted mt-3">
|
||||
Specify the position for the modal. You can display modal at top, bottom of page
|
||||
by specifying classes <code>modal-top</code> and <code>modal-bottom</code>
|
||||
respectively.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<!-- Button trigger modal -->
|
||||
<div class="hstack gap-2">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#topModal">Top Modal</button>
|
||||
<button type="button" class="btn btn-success " data-bs-toggle="modal"
|
||||
data-bs-target="#bottomModal">Bottom Modal</button>
|
||||
</div>
|
||||
|
||||
<!-- top modal -->
|
||||
<div id="topModal" class="modal fade" tabindex="-1" role="dialog"
|
||||
aria-labelledby="topModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-top">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="topModalLabel">Modal Heading</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6>Text in a modal</h6>
|
||||
<p class="mb-0">Duis mollis, est non commodo luctus, nisi erat
|
||||
porttitor ligula.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div> <!-- end modal content -->
|
||||
</div> <!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
|
||||
<!-- bottom modal -->
|
||||
<div id="bottomModal" class="modal fade" tabindex="-1" role="dialog"
|
||||
aria-labelledby="bottomModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-bottom">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="bottomModalLabel">Modal Heading</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6>Text in a modal</h6>
|
||||
<p class="mb-0">Duis mollis, est non commodo luctus, nisi erat
|
||||
porttitor ligula.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div> <!-- end modal content -->
|
||||
</div> <!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Toggle Between Modals
|
||||
</h5>
|
||||
<p class="card-subtitle"> Toggle between multiple modals with some clever placement of
|
||||
the <code>data-bs-target</code> and
|
||||
<code>data-bs-toggle</code> attributes. For example, you could toggle a password
|
||||
reset modal from within an already
|
||||
open sign in modal. <strong>Please note multiple modals cannot be open at the same
|
||||
time</strong>—this method simply
|
||||
toggles between two separate modals.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Button trigger modal -->
|
||||
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open
|
||||
first modal</a>
|
||||
|
||||
<!-- First Modal -->
|
||||
<div class="modal fade" id="exampleModalToggle" aria-hidden="true"
|
||||
aria-labelledby="exampleModalToggleLabel" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Show a second modal and hide this one with the button below.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2"
|
||||
data-bs-toggle="modal">Open
|
||||
second modal</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Modal -->
|
||||
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true"
|
||||
aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Hide this modal and show the first with the button below.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle"
|
||||
data-bs-toggle="modal">Back to
|
||||
first</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Optional Sizes
|
||||
</h5>
|
||||
<p class="card-subtitle">Modals have three optional sizes, available via modifier
|
||||
classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain
|
||||
breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="hstack gap-2">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalXl">Extra large modal</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalLg">Large modal</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalSm">Small modal</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="exampleModalLg" tabindex="-1" aria-labelledby="exampleModalLgLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="exampleModalSm" tabindex="-1" aria-labelledby="exampleModalSmLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Fullscreen Modal
|
||||
</h5>
|
||||
<p class="card-subtitle">Modals have three optional sizes, available via modifier
|
||||
classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain
|
||||
breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<div class="hstack flex-wrap gap-2">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreen">Full screen</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreenSm">Full screen below sm</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen
|
||||
modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-sm-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full
|
||||
screen below sm</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-md-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full
|
||||
screen below md</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-lg-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full
|
||||
screen below lg</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-xl-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full
|
||||
screen below xl</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-xxl-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full
|
||||
screen below xxl</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Modal Based Alerts
|
||||
</h5>
|
||||
<p class="card-subtitle">Modals have three optional sizes, available via modifier
|
||||
classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain
|
||||
breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="hstack flex-wrap gap-2">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#primaryAlertModal">Primary Alert</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
|
||||
data-bs-target="#secondaryAlertModal">Secondary Alert</button>
|
||||
<button type="button" class="btn btn-success" data-bs-toggle="modal"
|
||||
data-bs-target="#successAlertModal">Success Alert</button>
|
||||
<button type="button" class="btn btn-info" data-bs-toggle="modal"
|
||||
data-bs-target="#infoALertModal">Info Alert</button>
|
||||
</div>
|
||||
|
||||
<!-- Primary Alert Modal -->
|
||||
<div id="primaryAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content modal-filled bg-primary">
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
||||
<h4 class="mt-3 text-white">Well Done!</h4>
|
||||
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
||||
<button type="button" class="btn btn-light mt-3"
|
||||
data-bs-dismiss="modal">Continue</button>
|
||||
</div>
|
||||
</div> <!-- end modal body -->
|
||||
</div><!-- end modal content -->
|
||||
</div><!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
|
||||
<!-- Secondary Alert Modal -->
|
||||
<div id="secondaryAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content modal-filled bg-secondary">
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
||||
<h4 class="mt-3 text-white">Well Done!</h4>
|
||||
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
||||
<button type="button" class="btn btn-light mt-3"
|
||||
data-bs-dismiss="modal">Continue</button>
|
||||
</div>
|
||||
</div> <!-- end modal body -->
|
||||
</div><!-- end modal content -->
|
||||
</div><!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
|
||||
<!-- Success Alert Modal -->
|
||||
<div id="successAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content modal-filled bg-success">
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
||||
<h4 class="mt-3 text-white">Well Done!</h4>
|
||||
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
||||
<button type="button" class="btn btn-light mt-3"
|
||||
data-bs-dismiss="modal">Continue</button>
|
||||
</div>
|
||||
</div> <!-- end modal body -->
|
||||
</div><!-- end modal content -->
|
||||
</div><!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
|
||||
<!-- Info Alert Modal -->
|
||||
<div id="infoALertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content modal-filled bg-info">
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
||||
<h4 class="mt-3 text-white">Well Done!</h4>
|
||||
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
||||
<button type="button" class="btn btn-light mt-3"
|
||||
data-bs-dismiss="modal">Continue</button>
|
||||
</div>
|
||||
</div> <!-- end modal body -->
|
||||
</div><!-- end modal content -->
|
||||
</div><!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
316
resources/views/ui/offcanvas.blade.php
Executable file
316
resources/views/ui/offcanvas.blade.php
Executable file
@@ -0,0 +1,316 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Offcanvas'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Offcanvas'])
|
||||
|
||||
<!-- start offcanvas -->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
You can use a link with the href attribute, or a button with the <code>data-bs-target</code>
|
||||
attribute.
|
||||
In both cases, the <code>data-bs-toggle="offcanvas"</code> is required.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"
|
||||
aria-controls="offcanvasExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
|
||||
Button with data-bs-target
|
||||
</button>
|
||||
</div>
|
||||
<!-- default offcanvas -->
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample"
|
||||
aria-labelledby="offcanvasExampleLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="offcanvasExampleLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="defaultDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="defaultDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Static Backdrop
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Scrolling the <code><body></code> element is disabled when an offcanvas and its backdrop are
|
||||
visible.
|
||||
Use the <code>data-bs-scroll</code> attribute to toggle <code><body></code> scrolling and
|
||||
<code>data-bs-backdrop</code> to toggle the backdrop.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable Body
|
||||
Scrolling</button>
|
||||
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable Backdrop
|
||||
(Default)</button>
|
||||
<button class="btn btn-success" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable Both
|
||||
Scrolling & Backdrop</button>
|
||||
</div>
|
||||
|
||||
<!-- scrolling offcanvas -->
|
||||
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
|
||||
id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="offcanvasScrollingLabel">Colored with scrolling</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="scrollingDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="scrollingDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- backdrop offcanvas -->
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop"
|
||||
aria-labelledby="offcanvasWithBackdropLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="backdropDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="backdropDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- both scrolling & backdrop offcanvas -->
|
||||
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1"
|
||||
id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling
|
||||
</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="scrollingBackdropDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="scrollingBackdropDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Offcanvas Position
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Try the top, right, bottom and left examples out below.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li><code>.offcanvas-top</code> places offcanvas on the top of the viewport</li>
|
||||
<li><code>.offcanvas-end</code> places offcanvas on the right of the viewport</li>
|
||||
<li><code>.offcanvas-bottom</code> places offcanvas on the bottom of the viewport</li>
|
||||
<li><code>.offcanvas-start</code> places offcanvas on the left of the viewport</li>
|
||||
</ul>
|
||||
|
||||
<div class="button-list">
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#leftOffcanvas" aria-controls="leftOffcanvas">Left Offcanvas</button>
|
||||
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#rightOffcanvas" aria-controls="rightOffcanvas">Right Offcanvas</button>
|
||||
<button class="btn btn-success" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#topOffcanvas" aria-controls="topOffcanvas">Top Offcanvas</button>
|
||||
<button class="btn btn-info" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#bottomOffcanvas" aria-controls="bottomOffcanvas">Bottom Offcanvas</button>
|
||||
</div>
|
||||
|
||||
<!-- left offcanvas -->
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="leftOffcanvas"
|
||||
aria-labelledby="leftOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="leftOffcanvasLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="leftDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="leftDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- right offcanvas -->
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas"
|
||||
aria-labelledby="rightOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="rightOffcanvasLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="rightDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="rightDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- top offcanvas -->
|
||||
<div class="offcanvas offcanvas-top" tabindex="-1" id="topOffcanvas"
|
||||
aria-labelledby="topOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="topOffcanvasLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" id="topDropdownMenuButton"
|
||||
data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="topDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- bottom offcanvas -->
|
||||
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="bottomOffcanvas"
|
||||
aria-labelledby="bottomOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="bottomOffcanvasLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="bottomDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="bottomDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
177
resources/views/ui/pagination.blade.php
Executable file
177
resources/views/ui/pagination.blade.php
Executable file
@@ -0,0 +1,177 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Pagination'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Pagination'])
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use the button classes on an <code><a></code>, <code><button></code> or
|
||||
<code><input></code> element.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title ">
|
||||
Rounded Pagination
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Simple pagination inspired by Rdio, great for apps and search results.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination pagination-rounded">
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination pagination-rounded mb-0">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Alignment
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Change the alignment of pagination components with flexbox utilitie
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-end mb-0">
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Sizing
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-lg">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">1</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">1</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">1</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
129
resources/views/ui/placeholders.blade.php
Executable file
129
resources/views/ui/placeholders.blade.php
Executable file
@@ -0,0 +1,129 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Placeholder'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Placeholder'])
|
||||
|
||||
<!-- start progress -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
A progress bar can be used to show a user how far along he/she is in a process.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180"
|
||||
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder"
|
||||
preserveAspectRatio="xMidYMid slice" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#20c997"></rect>
|
||||
</svg>
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">Card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the
|
||||
bulk of the card's content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card" aria-hidden="true">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180"
|
||||
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder"
|
||||
preserveAspectRatio="xMidYMid slice" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
</svg>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="h5 card-title placeholder-glow">
|
||||
<span class="placeholder col-6"></span>
|
||||
</div>
|
||||
<p class="card-text placeholder-glow">
|
||||
<span class="placeholder col-7"></span>
|
||||
<span class="placeholder col-4"></span>
|
||||
<span class="placeholder col-4"></span>
|
||||
<span class="placeholder col-6"></span>
|
||||
<span class="placeholder col-8"></span>
|
||||
</p>
|
||||
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
How it works
|
||||
</h5>
|
||||
<p class="card-subtitle">Create placeholders with the <code>.placeholder</code> class and a grid column
|
||||
class (e.g., <code>.col-6</code>) to set the <code>width</code>. They can replace the text inside an
|
||||
element or be added as a modifier class to an existing component.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p aria-hidden="true">
|
||||
<span class="placeholder col-6"></span>
|
||||
</p>
|
||||
|
||||
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4"
|
||||
aria-hidden="true"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Color
|
||||
</h5>
|
||||
<p class="card-subtitle">By default, the <code>placeholder</code> uses <code>currentColor</code>. This
|
||||
can be overridden with a custom color or utility class.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<span class="placeholder col-12"></span>
|
||||
<span class="placeholder col-12 bg-primary"></span>
|
||||
<span class="placeholder col-12 bg-secondary"></span>
|
||||
<span class="placeholder col-12 bg-success"></span>
|
||||
<span class="placeholder col-12 bg-danger"></span>
|
||||
<span class="placeholder col-12 bg-warning"></span>
|
||||
<span class="placeholder col-12 bg-info"></span>
|
||||
<span class="placeholder col-12 bg-light"></span>
|
||||
<span class="placeholder col-12 bg-dark"></span>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Width
|
||||
</h5>
|
||||
<p class="card-subtitle">You can change the <code>width</code> through grid column classes, width
|
||||
utilities, or inline styles.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="placeholder col-6"></span>
|
||||
<span class="placeholder w-75"></span>
|
||||
<span class="placeholder" style="width: 25%;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
<!-- end progress -->
|
||||
@endsection
|
||||
183
resources/views/ui/popovers.blade.php
Executable file
183
resources/views/ui/popovers.blade.php
Executable file
@@ -0,0 +1,183 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Popovers'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Popovers'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Live demo
|
||||
</h5>
|
||||
<p class="card-subtitle">We use JavaScript similar to the snippet above to render the
|
||||
following live popover. Titles are set via <code>data-bs-title</code> and body
|
||||
content is set via <code>data-bs-content</code>.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<button type="button" class="btn btn-danger" data-bs-toggle="popover" title="Popover title"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?">Click
|
||||
to toggle popover</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Popover Directions
|
||||
</h5>
|
||||
<p class="card-subtitle"> Four options are available: top, right, bottom, and left
|
||||
aligned.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<!-- Top Position -->
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover"
|
||||
data-bs-placement="top"
|
||||
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
|
||||
<!-- Bottom Position -->
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
|
||||
<!-- Left Position -->
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover"
|
||||
data-bs-placement="left"
|
||||
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||||
title="Popover title">
|
||||
Popover on left
|
||||
</button>
|
||||
|
||||
<!-- Right Position -->
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover"
|
||||
data-bs-placement="right"
|
||||
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dismiss on Next Click
|
||||
</h5>
|
||||
<p class="card-subtitle">Use the <code>focus</code> trigger to dismiss popovers
|
||||
on the user’s next click of a different element than the toggle element.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" tabindex="0" class="btn btn-success" data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?"
|
||||
title="Dismissible popover">
|
||||
Dismissible popover
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Hover
|
||||
</h5>
|
||||
<p class="card-subtitle">Use the <code>data-bs-trigger="hover"</code> trigger Hover to
|
||||
show popover.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" tabindex="0" class="btn btn-dark" data-bs-toggle="popover"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?" title="Ohh Wow !">
|
||||
Please Hover Me
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Custom Popovers
|
||||
</h5>
|
||||
<p class="card-subtitle"> ou can customize the appearance of popovers using CSS
|
||||
variables. We set a custom class with
|
||||
<code>data-bs-custom-class="primary-popover"</code> to scope our custom appearance
|
||||
and use it to override some of the
|
||||
local CSS variables.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="primary-popover" data-bs-title="Primary popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Primary popover
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="success-popover" data-bs-title="Success popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Success popover
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="danger-popover" data-bs-title="Danger popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Danger popover
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="info-popover" data-bs-title="Info popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Info popover
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Disabled Elements
|
||||
</h5>
|
||||
<p class="card-subtitle">Elements with the <code>disabled</code> attribute
|
||||
aren’t interactive, meaning users cannot hover or click them to trigger a
|
||||
popover (or tooltip). As a workaround, you’ll want to trigger the popover from a
|
||||
wrapper <code><div></code> or <code><span></code> and override the
|
||||
<code>pointer-events</code> on the disabled element.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<span class="d-inline-block" data-bs-toggle="popover" data-bs-trigger="hover"
|
||||
data-bs-content="Disabled popover">
|
||||
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled
|
||||
button</button>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
164
resources/views/ui/progress.blade.php
Executable file
164
resources/views/ui/progress.blade.php
Executable file
@@ -0,0 +1,164 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Progress'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Progress'])
|
||||
|
||||
<!-- start progress -->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
How it works
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
A progress bar can be used to show a user how far along he/she is in a process.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar" role="progressbar" style="width: 35%" aria-valuenow="25" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
|
||||
aria-valuemax="100">25%</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Backgrounds Color
|
||||
</h5>
|
||||
<p class="card-subtitle"> Use background utility classes to change the appearance of individual progress
|
||||
bars.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="30"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Striped Progress Bar
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.progress-bar-striped</code> to any <code>.progress-bar</code> to
|
||||
apply a stripe via CSS gradient
|
||||
over the progress bar’s background color.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 25%"
|
||||
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-secondary progress-bar-striped" role="progressbar" style="width: 50%"
|
||||
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 75%"
|
||||
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Height
|
||||
</h5>
|
||||
<p class="card-subtitle"> We only set a height value on the <code>.progress</code>, so if you change
|
||||
that value the inner
|
||||
<code>.progress-bar</code> will automatically resize accordingly. Use <code>.progress-xs</code>,
|
||||
<code>.progress-sm</code>,
|
||||
<code>.progress-md</code>, <code>.progress-lg</code> or <code>.progress-xl</code> classes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-2 progress-xs">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2 progress-sm">
|
||||
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%;" aria-valuenow="50"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2 progress-md">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2 progress-lg">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 35%;" aria-valuenow="35"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xl">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
|
||||
</div> <!-- end row -->
|
||||
<!-- end progress -->
|
||||
@endsection
|
||||
79
resources/views/ui/scrollspy.blade.php
Executable file
79
resources/views/ui/scrollspy.blade.php
Executable file
@@ -0,0 +1,79 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Scrollspy'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Scrollspy'])
|
||||
|
||||
<!-- start spinners-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#scrollspyHeading1">First</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#scrollspyHeading2">Second</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
|
||||
aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="scrollspy-example bg-light bg-opacity-50 p-3 rounded-2" data-bs-spy="scroll"
|
||||
data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true"
|
||||
tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
|
||||
the
|
||||
appropriate navigation link is highlighted. It's repeated throughout the component example. We
|
||||
keep adding
|
||||
some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
|
||||
the
|
||||
appropriate navigation link is highlighted. It's repeated throughout the component example. We
|
||||
keep adding
|
||||
some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading3">Third heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
|
||||
the
|
||||
appropriate navigation link is highlighted. It's repeated throughout the component example. We
|
||||
keep adding
|
||||
some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading4">Fourth heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
|
||||
the
|
||||
appropriate navigation link is highlighted. It's repeated throughout the component example. We
|
||||
keep adding
|
||||
some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading5">Fifth heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
|
||||
the
|
||||
appropriate navigation link is highlighted. It's repeated throughout the component example. We
|
||||
keep adding
|
||||
some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
|
||||
<!-- end spinners-->
|
||||
@endsection
|
||||
205
resources/views/ui/spinners.blade.php
Executable file
205
resources/views/ui/spinners.blade.php
Executable file
@@ -0,0 +1,205 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Spinners'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Spinners'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Border Spinners
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use the border spinners for a lightweight loading indicator.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Color Spinners
|
||||
</h5>
|
||||
<p class="card-subtitle">You can use any of our text color utilities on the standard spinner.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="spinner-border text-primary me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-secondar me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-success me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-info me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-warning me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-danger me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Growing Spinners
|
||||
</h5>
|
||||
<p class="card-subtitle">If you don’t fancy a border spinner, switch to the grow spinner. While it
|
||||
doesn’t technically spin, it does repeatedly grow!</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Color Growing Spinners
|
||||
</h5>
|
||||
<p class="card-subtitle">You can use any of our text color utilities on the standard spinner.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="spinner-grow text-primary me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-secondary me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-success me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-info me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-warning me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-danger me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Alignment
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly
|
||||
where you need them in any situation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-center border p-2">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Size
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Add <code>.spinner-border-sm</code> and <code>.spinner-border.sm-**</code> to make a smaller spinner
|
||||
that can quickly be used within other components.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="spinner-border text-primary spinner-border-sm me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-primary spinner-grow-sm me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-primary spinner-border me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-primary spinner-grow me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Placement
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use <code>flexbox utilities</code>, <code>float utilities</code>, or <code>text alignment</code>
|
||||
utilities to place spinners
|
||||
exactly where you need them in any situation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center border p-2">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border text-primary ms-auto" role="status" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Buttons Spinner
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use spinners within buttons to indicate an action is currently processing or taking place.
|
||||
You may also swap the text out of the spinner element and utilize button text as needed.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button class="btn btn-primary me-1" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm me-1" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
481
resources/views/ui/tabs.blade.php
Executable file
481
resources/views/ui/tabs.blade.php
Executable file
@@ -0,0 +1,481 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Nav Tabs'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Nav Tabs'])
|
||||
|
||||
<!-- start tabs -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Nav Tabs
|
||||
</h5>
|
||||
<p class="card-subtitle">Use the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a href="#home" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
|
||||
<span class="d-none d-sm-block">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#profile" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
|
||||
<span class="d-none d-sm-block">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#messages" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
|
||||
<span class="d-none d-sm-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content text-muted">
|
||||
<div class="tab-pane" id="home">
|
||||
<p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
|
||||
consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci
|
||||
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
||||
quaerat voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane show active" id="profile">
|
||||
<p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es un
|
||||
myth. Por scientie, musica, sport etc,
|
||||
litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
|
||||
pronunciation e li plu commun vocabules.
|
||||
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi
|
||||
traductores. At solmen va esser
|
||||
necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
|
||||
coalesce, li grammatica del resultant
|
||||
lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
|
||||
esser plu simplic e regulari quam
|
||||
li existent Europan lingues.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="messages">
|
||||
<p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
|
||||
consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci
|
||||
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
||||
quaerat voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tabs Justified
|
||||
</h5>
|
||||
<p class="card-subtitle">Using class <code>.nav-justified</code>, you can force your tabs menu items to
|
||||
use the full available width.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs nav-justified">
|
||||
<li class="nav-item">
|
||||
<a href="#homeTabsJustified" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
|
||||
<span class="d-none d-sm-block">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#profileTabsJustified" data-bs-toggle="tab" aria-expanded="true"
|
||||
class="nav-link active">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
|
||||
<span class="d-none d-sm-block">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#messagesTabsJustified" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
|
||||
<span class="d-none d-sm-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content pt-2 text-muted">
|
||||
<div class="tab-pane" id="homeTabsJustified">
|
||||
<p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
|
||||
consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci
|
||||
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
||||
quaerat voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane show active" id="profileTabsJustified">
|
||||
<p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es un
|
||||
myth. Por scientie, musica, sport etc,
|
||||
litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
|
||||
pronunciation e li plu commun vocabules.
|
||||
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi
|
||||
traductores. At solmen va esser
|
||||
necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
|
||||
coalesce, li grammatica del resultant
|
||||
lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
|
||||
esser plu simplic e regulari quam
|
||||
li existent Europan lingues.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="messagesTabsJustified">
|
||||
<p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
|
||||
consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci
|
||||
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
||||
quaerat voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Nav Pills
|
||||
</h5>
|
||||
<p class="card-subtitle">Use the <code>.nav-pills</code> class to generate a pilled interface.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a href="#homePill" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
|
||||
<span class="d-none d-sm-block">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#profilePill" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
|
||||
<span class="d-none d-sm-block">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#messagesPill" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
|
||||
<span class="d-none d-sm-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content pt-2 text-muted">
|
||||
<div class="tab-pane" id="homePill">
|
||||
<p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
|
||||
consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci
|
||||
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
||||
quaerat voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane show active" id="profilePill">
|
||||
<p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es un
|
||||
myth. Por scientie, musica, sport etc,
|
||||
litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
|
||||
pronunciation e li plu commun vocabules.
|
||||
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi
|
||||
traductores. At solmen va esser
|
||||
necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
|
||||
coalesce, li grammatica del resultant
|
||||
lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
|
||||
esser plu simplic e regulari quam
|
||||
li existent Europan lingues.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="messagesPill">
|
||||
<p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
|
||||
consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci
|
||||
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
||||
quaerat voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Pills Justified
|
||||
</h5>
|
||||
<p class="card-subtitle">Using class <code>.nav-justified</code>, you can force your pills menu items
|
||||
to use the full available width.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<ul class="nav nav-pills nav-justified p-1">
|
||||
<li class="nav-item">
|
||||
<a href="#homePillJustified" data-bs-toggle="tab" aria-expanded="false"
|
||||
class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
|
||||
<span class="d-none d-sm-block">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#profilePillJustified" data-bs-toggle="tab" aria-expanded="true"
|
||||
class="nav-link active">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
|
||||
<span class="d-none d-sm-block">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#messagesPillJustified" data-bs-toggle="tab" aria-expanded="false"
|
||||
class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
|
||||
<span class="d-none d-sm-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content pt-2 text-muted">
|
||||
<div class="tab-pane" id="homePillJustified">
|
||||
<p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
|
||||
beatae vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
|
||||
consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
|
||||
dolor sit amet, consectetur, adipisci
|
||||
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
|
||||
aliquam quaerat voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane show active" id="profilePillJustified">
|
||||
<p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es
|
||||
un myth. Por scientie, musica, sport etc,
|
||||
litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
|
||||
pronunciation e li plu commun vocabules.
|
||||
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
|
||||
custosi traductores. At solmen va esser
|
||||
necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
|
||||
coalesce, li grammatica del resultant
|
||||
lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
|
||||
esser plu simplic e regulari quam
|
||||
li existent Europan lingues.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="messagesPillJustified">
|
||||
<p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
|
||||
beatae vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
|
||||
consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
|
||||
dolor sit amet, consectetur, adipisci
|
||||
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
|
||||
aliquam quaerat voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tabs Vertical Left
|
||||
</h5>
|
||||
<p class="card-subtitle"> You can stack your navigation by changing the flex item direction with the
|
||||
<code>.flex-column</code> utility.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-3 mb-2 mb-sm-0">
|
||||
<div class="nav flex-column nav-pills" id="vl-pills-tab" role="tablist"
|
||||
aria-orientation="vertical">
|
||||
<a class="nav-link active show" id="vl-pills-home-tab" data-bs-toggle="pill"
|
||||
href="#vl-pills-home" role="tab" aria-controls="vl-pills-home"
|
||||
aria-selected="true">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
<a class="nav-link" id="vl-pills-profile-tab" data-bs-toggle="pill"
|
||||
href="#vl-pills-profile" role="tab" aria-controls="vl-pills-profile"
|
||||
aria-selected="false">
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
<a class="nav-link" id="vl-pills-settings-tab" data-bs-toggle="pill"
|
||||
href="#vl-pills-settings" role="tab" aria-controls="vl-pills-settings"
|
||||
aria-selected="false">
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-9">
|
||||
<div class="tab-content pt-0" id="vl-pills-tabContent">
|
||||
<div class="tab-pane fade active show" id="vl-pills-home" role="tabpanel"
|
||||
aria-labelledby="vl-pills-home-tab">
|
||||
<p class="mb-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque
|
||||
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas
|
||||
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione
|
||||
voluptatem sequi nesciunt.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vl-pills-profile" role="tabpanel"
|
||||
aria-labelledby="vl-pills-profile-tab">
|
||||
<p class="mb-0">
|
||||
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.
|
||||
Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues
|
||||
differe
|
||||
solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe
|
||||
al desirabilite de un nov lingua franca: On refusa continuar payar custosi
|
||||
traductores.
|
||||
At solmen va esser necessi far uniform.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vl-pills-settings" role="tabpanel"
|
||||
aria-labelledby="vl-pills-settings-tab">
|
||||
<p class="mb-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque
|
||||
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas
|
||||
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione
|
||||
voluptatem sequi nesciunt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tabs Vertical Right
|
||||
</h5>
|
||||
<p class="card-subtitle"> You can stack your navigation by changing the flex item direction with the
|
||||
<code>.flex-column</code> utility.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-9 mb-2 mb-sm-0">
|
||||
<div class="tab-content pt-0" id="vr-pills-tabContent">
|
||||
<div class="tab-pane fade active show" id="vr-pills-home" role="tabpanel"
|
||||
aria-labelledby="vr-pills-home-tab">
|
||||
<p class="mb-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque
|
||||
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas
|
||||
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione
|
||||
voluptatem sequi nesciunt.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vr-pills-profile" role="tabpanel"
|
||||
aria-labelledby="vr-pills-profile-tab">
|
||||
<p class="mb-0">
|
||||
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.
|
||||
Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues
|
||||
differe
|
||||
solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe
|
||||
al desirabilite de un nov lingua franca: On refusa continuar payar custosi
|
||||
traductores.
|
||||
At solmen va esser necessi far uniform.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vr-pills-settings" role="tabpanel"
|
||||
aria-labelledby="vr-pills-settings-tab">
|
||||
<p class="mb-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque
|
||||
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas
|
||||
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione
|
||||
voluptatem sequi nesciunt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="nav flex-column nav-pills" id="vr-pills-tab" role="tablist"
|
||||
aria-orientation="vertical">
|
||||
<a class="nav-link active show" id="vr-pills-home-tab" data-bs-toggle="pill"
|
||||
href="#vr-pills-home" role="tab" aria-controls="vr-pills-home"
|
||||
aria-selected="true">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
<a class="nav-link" id="vr-pills-profile-tab" data-bs-toggle="pill"
|
||||
href="#vr-pills-profile" role="tab" aria-controls="vr-pills-profile"
|
||||
aria-selected="false">
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
<a class="nav-link" id="vr-pills-settings-tab" data-bs-toggle="pill"
|
||||
href="#vr-pills-settings" role="tab" aria-controls="vr-pills-settings"
|
||||
aria-selected="false">
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
<!-- end tabs -->
|
||||
@endsection
|
||||
330
resources/views/ui/toasts.blade.php
Executable file
330
resources/views/ui/toasts.blade.php
Executable file
@@ -0,0 +1,330 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Toasts'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Toasts'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Basic Examples
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a
|
||||
single element to contain your “toasted” content and strongly encourage a dismiss button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="toast fade d-block opacity-100" role="alert" aria-live="assertive" aria-atomic="true"
|
||||
data-bs-toggle="toast">
|
||||
<div class="toast-header d-block">
|
||||
<div class="float-end">
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="auth-logo">
|
||||
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<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 a toast (positioned with our utilities in the
|
||||
lower right corner) that has been hidden by default.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary" id="liveToastDefaultBtn">Show live toast</button>
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="liveToastDefault" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<div class="auth-logo me-auto">
|
||||
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
|
||||
</div>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a
|
||||
single element to contain your “toasted” content and strongly encourage a dismiss button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
|
||||
<button type="button" class="btn btn-primary" id="liveToastBtn2">Show live toast</button>
|
||||
<div class="toast-container position-fixed end-0 top-0 p-3">
|
||||
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<div class="auth-logo me-auto">
|
||||
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
|
||||
</div>
|
||||
<small class="text-muted">just now</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
See? Just like this.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="liveToast2" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<div class="auth-logo me-auto">
|
||||
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light"
|
||||
height="18" />
|
||||
</div>
|
||||
<small class="text-muted">2 seconds ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Heads up, toasts will stack automatically
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Custom Content
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Alternatively, you can also add additional controls and components to toasts.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="toast fade show align-items-center mb-3" role="alert" aria-live="assertive"
|
||||
aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="toast fade show align-items-center text-bg-primary mb-3" role="alert"
|
||||
aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto"
|
||||
data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="toast fade show mb-3 mb-md-0" role="alert" aria-live="assertive"
|
||||
aria-atomic="true">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
<div class="mt-2 pt-2 border-top">
|
||||
<button type="button" class="btn btn-primary btn-sm me-1">Take action</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm"
|
||||
data-bs-dismiss="toast">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="toast fade show text-bg-primary" role="alert" aria-live="assertive"
|
||||
aria-atomic="true">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
<div class="mt-2 pt-2 border-top">
|
||||
<button type="button" class="btn btn-light btn-sm me-1">Take action</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm"
|
||||
data-bs-dismiss="toast">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Transcluent
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Toasts are slightly translucent, too, so they blend over whatever they might appear over.
|
||||
For browsers that support the backdrop-filter CSS property, we’ll also attempt to blur the elements
|
||||
under a toast.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="p-3 bg-light">
|
||||
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
|
||||
data-bs-toggle="toast">
|
||||
<div class="toast-header d-block">
|
||||
<div class="float-end">
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="auth-logo">
|
||||
<img class="logo-dark me-1" src="/images/logo-dark.png" alt="logo-dark"
|
||||
height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light"
|
||||
height="18" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Placement
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Place toasts with custom CSS as you need them. The top right is often used for notifications,
|
||||
as is the top middle. If you’re only ever going to show one toast at a time, put the positioning
|
||||
styles
|
||||
right on the <code>.toast.</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div aria-live="polite" aria-atomic="true" class=" bg-light position-relative"
|
||||
style="min-height: 350px;">
|
||||
<div class="toast-container position-absolute p-3" id="toastPlacement">
|
||||
<div class="toast show mb-2">
|
||||
<div class="toast-header d-block">
|
||||
<div class="float-end">
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="auth-logo">
|
||||
<img class="logo-dark me-1" src="/images/logo-dark.png" alt="logo-dark"
|
||||
height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light"
|
||||
height="18" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="mt-3">
|
||||
<label for="selectToastPlacement" class="form-label">Toast placement</label>
|
||||
<select class="form-select mt-2" data-choices id="selectToastPlacement">
|
||||
<option value="" selected>Select a position...</option>
|
||||
<option value="top-0 start-0">Top left (<code class="text-danger">.top-0 .start-0</code>)
|
||||
</option>
|
||||
<option value="top-0 start-50 translate-middle-x">Top center</option>
|
||||
<option value="top-0 end-0">Top right</option>
|
||||
<option value="top-50 start-0 translate-middle-y">Middle left</option>
|
||||
<option value="top-50 start-50 translate-middle">Middle center</option>
|
||||
<option value="top-50 end-0 translate-middle-y">Middle right</option>
|
||||
<option value="bottom-0 start-0">Bottom left</option>
|
||||
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
|
||||
<option value="bottom-0 end-0">Bottom right</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
// Default Example
|
||||
const toastDefaultTrigger = document.getElementById('liveToastDefaultBtn')
|
||||
const toastDefaultLiveExample = document.getElementById('liveToastDefault')
|
||||
if (toastDefaultTrigger) {
|
||||
toastDefaultTrigger.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastDefaultLiveExample)
|
||||
|
||||
toast.show()
|
||||
})
|
||||
}
|
||||
|
||||
// Stacking Example
|
||||
const toastTrigger = document.getElementById('liveToastBtn')
|
||||
const toastLiveExample = document.getElementById('liveToast')
|
||||
if (toastTrigger) {
|
||||
toastTrigger.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastLiveExample)
|
||||
|
||||
toast.show()
|
||||
})
|
||||
}
|
||||
|
||||
const toastTrigger2 = document.getElementById('liveToastBtn2')
|
||||
const toastLiveExample2 = document.getElementById('liveToast2')
|
||||
if (toastTrigger2) {
|
||||
toastTrigger2.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastLiveExample2)
|
||||
toast.show()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
108
resources/views/ui/tooltips.blade.php
Executable file
108
resources/views/ui/tooltips.blade.php
Executable file
@@ -0,0 +1,108 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Tooltips'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Tooltips'])
|
||||
|
||||
<!-- start tooltips-->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tooltip Direction
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Four options are available: top, right, bottom, and left aligned.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right"
|
||||
data-bs-title="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
data-bs-title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left"
|
||||
data-bs-title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Color Tooltip
|
||||
</h5>
|
||||
<p class="card-subtitle">We set a custom class with ex.
|
||||
<code>data-bs-custom-class="primary-tooltip"</code> to scope our background-color
|
||||
primary appearance and use it to override a local CSS variable.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-custom-class="primary-tooltip"
|
||||
data-bs-title="This top tooltip is themed via CSS variables.">
|
||||
Primary tooltip
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-custom-class="danger-tooltip"
|
||||
data-bs-title="This top tooltip is themed via CSS variables.">
|
||||
Danger tooltip
|
||||
</button>
|
||||
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-custom-class="info-tooltip"
|
||||
data-bs-title="This top tooltip is themed via CSS variables.">
|
||||
Info tooltip
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-custom-class="success-tooltip"
|
||||
data-bs-title="This top tooltip is themed via CSS variables.">
|
||||
Success tooltip
|
||||
</button>
|
||||
</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">
|
||||
Tooltips on links
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Hover over the links below to see tooltips:
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="muted">Placeholder text to demonstrate some <a href="#" class="link-danger"
|
||||
data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with
|
||||
tooltips. This is now just filler, no killer. Content placed here just to mimic the
|
||||
presence of <a href="#" class="link-danger" data-bs-toggle="tooltip"
|
||||
data-bs-title="Another tooltip">real text</a>. And all that just to give you an
|
||||
idea of how tooltips would look when used in real-world situations. So hopefully
|
||||
you've now seen how <a href="#" class="link-danger" data-bs-toggle="tooltip"
|
||||
data-bs-title="Another one here too">these tooltips on links</a> can work in
|
||||
practice, once you use them on <a href="#" class="link-danger" data-bs-toggle="tooltip"
|
||||
data-bs-title="The last tip!">your own</a> site or
|
||||
project.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
<!-- start tooltips-->
|
||||
@endsection
|
||||
Reference in New Issue
Block a user