first commit
This commit is contained in:
113
resources/views/pages/ui-components/accordion.blade.php
Executable file
113
resources/views/pages/ui-components/accordion.blade.php
Executable file
@ -0,0 +1,113 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Accordion</h1>
|
||||
<p class="lead">Build vertically collapsing accordions in combination with Bootstrap's Collapse JavaScript plugin. Read the <a href="https://getbootstrap.com/docs/5.3/components/accordion/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Click the accordions below to expand/collapse the accordion content.</p>
|
||||
<div class="example">
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" 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 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 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>
|
||||
<figure class="highlight" id="defaultAccordion">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" 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 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 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></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultAccordion">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
277
resources/views/pages/ui-components/alerts.blade.php
Executable file
277
resources/views/pages/ui-components/alerts.blade.php
Executable file
@ -0,0 +1,277 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Alerts</h1>
|
||||
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Read the <a href="https://getbootstrap.com/docs/5.3/components/alerts/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., <code>.alert-success</code>).</p>
|
||||
<div class="example">
|
||||
<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" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">...</div>
|
||||
<div class="alert alert-success" role="alert">...</div>
|
||||
<div class="alert alert-danger" role="alert">...</div>
|
||||
<div class="alert alert-warning" role="alert">...</div>
|
||||
<div class="alert alert-info" role="alert">...</div>
|
||||
<div class="alert alert-light" role="alert">...</div>
|
||||
<div class="alert alert-dark" role="alert">...</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="fill">Fill alert</h4>
|
||||
<p class="mb-3">Add class <code>.alert-fill-*</code> with <code>.alert</code>.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-fill-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-secondary" role="alert">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-success" role="alert">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-danger" role="alert">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-warning" role="alert">
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-info" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-light" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-dark" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="fillAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-fill-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#fillAlert">copy</button>
|
||||
|
||||
</figure>
|
||||
<hr>
|
||||
|
||||
<h4 id="icon">With icon</h4>
|
||||
<p class="mb-3">Add an icon inside the div.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="iconAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-primary" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple primary alert—check it out!
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#iconAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alert-link">Alert Link</h4>
|
||||
<p class="mb-3">Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert with <a href="javascript:;" 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:;" 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:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="linkAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-primary" role="alert">
|
||||
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#linkAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="additional-content">Additional content</h4>
|
||||
<p class="mb-3">Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>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>
|
||||
<figure class="highlight" id="additionalContent">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>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></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#additionalContent">copy</button>
|
||||
</figure>
|
||||
<hr>
|
||||
<h4 id="dismissing">Dismissing</h4>
|
||||
<p class="mb-3">Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.</p>
|
||||
<ul>
|
||||
<li>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>.close</code> button.</li>
|
||||
<li>On the dismiss button, add the <code>data-bs-dismiss="alert"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code><button></code> element with it for proper behavior across all devices.</li>
|
||||
<li>To animate alerts when dismissing them, be sure to add the <code>.fade</code> and <code>.show</code> classes.</li>
|
||||
</ul>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-light alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-dark alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dismissingAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dismissingAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#fill" class="nav-link">Fill alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#icon" class="nav-link">Icon alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alert-link" class="nav-link">Alert link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#additional-content" class="nav-link">Additional content</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dismissing" class="nav-link">Dismissing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
182
resources/views/pages/ui-components/badges.blade.php
Executable file
182
resources/views/pages/ui-components/badges.blade.php
Executable file
@ -0,0 +1,182 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Badges</h1>
|
||||
<p class="lead">Documentation and examples for badges, our small count and labeling component. Read the <a href="https://getbootstrap.com/docs/5.3/components/badge/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.</p>
|
||||
<div class="example">
|
||||
<h1 class="mb-2">Example heading <span class="badge bg-primary">New</span></h1>
|
||||
<h2 class="mb-2">Example heading <span class="badge bg-primary">New</span></h2>
|
||||
<h3 class="mb-2">Example heading <span class="badge bg-primary">New</span></h3>
|
||||
<h4 class="mb-2">Example heading <span class="badge bg-primary mb-1">New</span></h4>
|
||||
<h5 class="mb-2">Example heading <span class="badge bg-primary mb-1">New</span></h5>
|
||||
<h6 class="mb-2">Example heading <span class="badge bg-primary">New</span></h6>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><h1>Example heading <span class="badge bg-primary">New</span></h1>
|
||||
<h2>Example heading <span class="badge bg-primary">New</span></h2>
|
||||
<h3>Example heading <span class="badge bg-primary">New</span></h3>
|
||||
<h4>Example heading <span class="badge bg-primary">New</span></h4>
|
||||
<h5>Example heading <span class="badge bg-primary">New</span></h5>
|
||||
<h6>Example heading <span class="badge bg-primary">New</span></h6></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="buttons">Buttons</h4>
|
||||
<p class="mb-3">Badges can be used as part of links or buttons to provide a counter.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary">
|
||||
Notifications <span class="badge bg-light text-dark">4</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary">
|
||||
Notifications <span class="badge bg-light text-dark">4</span>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="positioned">Positioned</h4>
|
||||
<p class="mb-3">Use utilities to modify a <code>.badge</code> and position it in the corner of a link or button.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Inbox
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
99+
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="positionedBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary position-relative">
|
||||
Inbox
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
99+
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</span>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#positionedBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<p class="mb-3">You can also replace the <code>.badge</code> class with a few more utilities without a count for a more generic indicator.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Profile
|
||||
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
|
||||
<span class="visually-hidden">New alerts</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="positionedNoCountBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary position-relative">
|
||||
Profile
|
||||
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
|
||||
<span class="visually-hidden">New alerts</span>
|
||||
</span>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#positionedNoCountBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="contextual-variations">Contextual variations</h4>
|
||||
<p class="mb-3">Use background utility classes to quickly change the appearance of a badge.</p>
|
||||
<div class="example">
|
||||
<span class="badge bg-primary">Primary</span>
|
||||
<span class="badge bg-secondary">Secondary</span>
|
||||
<span class="badge bg-success">Success</span>
|
||||
<span class="badge bg-danger">Danger</span>
|
||||
<span class="badge bg-warning">Warning</span>
|
||||
<span class="badge bg-info">Info</span>
|
||||
<span class="badge bg-light text-dark">Light</span>
|
||||
<span class="badge bg-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight" id="contextualVariations">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><span class="badge bg-primary">Primary</span>
|
||||
<span class="badge bg-secondary">Secondary</span>
|
||||
<span class="badge bg-success">Success</span>
|
||||
<span class="badge bg-danger">Danger</span>
|
||||
<span class="badge bg-warning">Warning</span>
|
||||
<span class="badge bg-info">Info</span>
|
||||
<span class="badge bg-light text-dark">Light</span>
|
||||
<span class="badge bg-dark">Dark</span></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#contextualVariations">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="pill-badges">Pill badges</h4>
|
||||
<p class="mb-3">Use the <code>.rounded-pill</code> utility class to make badges more rounded with a larger <code>border-radius</code>.</p>
|
||||
<div class="example">
|
||||
<span class="badge rounded-pill bg-primary">Primary</span>
|
||||
<span class="badge rounded-pill bg-secondary">Secondary</span>
|
||||
<span class="badge rounded-pill bg-success">Success</span>
|
||||
<span class="badge rounded-pill bg-danger">Danger</span>
|
||||
<span class="badge rounded-pill bg-warning">Warning</span>
|
||||
<span class="badge rounded-pill bg-info">Info</span>
|
||||
<span class="badge rounded-pill bg-light text-dark">Light</span>
|
||||
<span class="badge rounded-pill bg-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight" id="pillBadges">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><span class="badge rounded-pill bg-primary">Primary</span></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#pillBadges">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="link-badges">Link badges</h4>
|
||||
<div class="example">
|
||||
<a href="javascript:;" class="badge bg-primary">Primary</a>
|
||||
<a href="javascript:;" class="badge bg-secondary">Secondary</a>
|
||||
<a href="javascript:;" class="badge bg-success">Success</a>
|
||||
<a href="javascript:;" class="badge bg-danger">Danger</a>
|
||||
<a href="javascript:;" class="badge bg-warning">Warning</a>
|
||||
<a href="javascript:;" class="badge bg-info">Info</a>
|
||||
<a href="javascript:;" class="badge bg-light text-dark">Light</a>
|
||||
<a href="javascript:;" class="badge bg-dark">Dark</a>
|
||||
</div>
|
||||
<figure class="highlight" id="linkBadges">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a href="#" class="badge bg-primary">Primary</a></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#linkBadges">copy</button>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#positioned" class="nav-link">Positioned</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#contextual-variations" class="nav-link">Contextual variations</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#pill-badges" class="nav-link">Pill badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#link-badges" class="nav-link">Link badges</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
149
resources/views/pages/ui-components/breadcrumbs.blade.php
Executable file
149
resources/views/pages/ui-components/breadcrumbs.blade.php
Executable file
@ -0,0 +1,149 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Breadcrumbs</h1>
|
||||
<p class="lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Read the <a href="https://getbootstrap.com/docs/5.3/components/breadcrumb/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBreadcrumbs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBreadcrumbs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="line">Line seperator</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-line">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="lineBreadcrumb">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-line">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#lineBreadcrumb">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dot">Dot seperator</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-dot">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="dotBreadcrumb">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-dot">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dotBreadcrumb">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="arrow">Arrow seperator</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-arrow">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="arrowBreadcrumb">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-arrwo">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#arrowBreadcrumb">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="changing-seperator">Changing the separator</h4>
|
||||
<p class="mb-3">Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code>content</code></a>. They can be changed by changing <code>$breadcrumb-divider</code>. The <a href="https://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method">quote</a> function is needed to generate the quotes around a string, so if you want <code>></code> as separator, you can use this:</p>
|
||||
<figure class="highlight" id="divider">
|
||||
<pre><code class="language-css"><script type="script/prism-html-markup">$breadcrumb-divider: quote(">");</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#divider">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">It’s also possible to use a base64 embedded SVG icon:</p>
|
||||
<figure class="highlight" id="base64">
|
||||
<pre><code class="language-css"><script type="script/prism-html-markup">$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#base64">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">The separator can be removed by setting <code>$breadcrumb-divider</code> to <code>none</code>:</p>
|
||||
<figure class="highlight" id="seperatorNone">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup">$breadcrumb-divider: none;</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#seperatorNone">copy</button>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#line" class="nav-link">Line seperator</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dot" class="nav-link">Dot seperator</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#arrow" class="nav-link">Arrow seperator</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#changing-seperator" class="nav-link">Changing seperator</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
335
resources/views/pages/ui-components/button-group.blade.php
Executable file
335
resources/views/pages/ui-components/button-group.blade.php
Executable file
@ -0,0 +1,335 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Button group</h1>
|
||||
<p class="lead">Group a series of buttons together on a single line or stack them in a vertical column. Read the <a href="https://getbootstrap.com/docs/5.3/components/button-group/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="checkbox-radio">Checkbox and radio button groups</h4>
|
||||
<p class="mb-3">Combine button-like checkbox and radio <a href="https://getbootstrap.com/docs/5.3/forms/checks-radios/" target="_blank">toggle buttons</a> into a seamless looking button group.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
|
||||
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="checkboxGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
|
||||
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#checkboxGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="radioGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#radioGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="toolbar">Button toolbar</h4>
|
||||
<p class="mb-3">Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.</p>
|
||||
<div class="example">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2 mb-1 mb-md-0" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="btn-group me-2 mb-1 mb-md-0" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-primary">5</button>
|
||||
<button type="button" class="btn btn-primary">6</button>
|
||||
<button type="button" class="btn btn-primary">7</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1 mb-md-0" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-primary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonToolbar">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
...
|
||||
</div>
|
||||
<div class="btn-group me-2" role="group" aria-label="Second group"> ... </div>
|
||||
<div class="btn-group" role="group" aria-label="Third group"> ... </div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonToolbar">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.</p>
|
||||
<div class="example">
|
||||
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2 mb-1 mb-md-0" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mb-1 mb-md-0" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="mixed">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
..
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
...
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#mixed">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Sizing</h4>
|
||||
<p class="mb-3">Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including each one when nesting multiple groups.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group btn-group-lg mb-1 mb-md-0" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1 mb-md-0" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm mb-1 mb-md-0" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonSizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonSizing">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="nesting">Nesting</h4>
|
||||
<p class="mb-3">Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonNesting">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonNesting">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="vertical">Vertical variation</h4>
|
||||
<p class="mb-3">Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group-vertical me-1" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
</div>
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="verticalVariations">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group-vertical">
|
||||
...
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#verticalVariations">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#checkbox-radio" class="nav-link">Checkbox and radio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#toolbar" class="nav-link">Button toolbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Sizing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#nesting" class="nav-link">Nesting</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#vertical" class="nav-link">Vertical variations</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
385
resources/views/pages/ui-components/buttons.blade.php
Executable file
385
resources/views/pages/ui-components/buttons.blade.php
Executable file
@ -0,0 +1,385 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Buttons</h1>
|
||||
<p class="lead">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Read the <a href="https://getbootstrap.com/docs/5.3/components/buttons/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic Examples</h4>
|
||||
<p class="mb-3">Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0">Primary</button>
|
||||
<button type="button" class="btn btn-secondary mb-1 mb-md-0">Secondary</button>
|
||||
<button type="button" class="btn btn-success mb-1 mb-md-0">Success</button>
|
||||
<button type="button" class="btn btn-danger mb-1 mb-md-0">Danger</button>
|
||||
<button type="button" class="btn btn-warning mb-1 mb-md-0">Warning</button>
|
||||
<button type="button" class="btn btn-info mb-1 mb-md-0">Info</button>
|
||||
<button type="button" class="btn btn-light mb-1 mb-md-0">Light</button>
|
||||
<button type="button" class="btn btn-dark mb-1 mb-md-0">Dark</button>
|
||||
<button type="button" class="btn btn-link mb-1 mb-md-0">Link</button>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><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-danger">Danger</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
|
||||
<button type="button" class="btn btn-link">Link</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="inverse">Inverse Buttons</h4>
|
||||
<p class="mb-3">Inverse buttons.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-inverse-primary mb-1 mb-md-0">Primary</button>
|
||||
<button type="button" class="btn btn-inverse-secondary mb-1 mb-md-0">Secondary</button>
|
||||
<button type="button" class="btn btn-inverse-success mb-1 mb-md-0">Success</button>
|
||||
<button type="button" class="btn btn-inverse-danger mb-1 mb-md-0">Danger</button>
|
||||
<button type="button" class="btn btn-inverse-warning mb-1 mb-md-0">Warning</button>
|
||||
<button type="button" class="btn btn-inverse-info mb-1 mb-md-0">Info</button>
|
||||
<button type="button" class="btn btn-inverse-light mb-1 mb-md-0">Light</button>
|
||||
<button type="button" class="btn btn-inverse-dark mb-1 mb-md-0">Dark</button>
|
||||
</div>
|
||||
<figure class="highlight" id="inverseButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-inverse-primary">Primary</button>
|
||||
<button type="button" class="btn btn-inverse-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-inverse-success">Success</button>
|
||||
<button type="button" class="btn btn-inverse-danger">Danger</button>
|
||||
<button type="button" class="btn btn-inverse-warning">Warning</button>
|
||||
<button type="button" class="btn btn-inverse-info">Info</button>
|
||||
<button type="button" class="btn btn-inverse-light">Light</button>
|
||||
<button type="button" class="btn btn-inverse-dark">Dark</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#inverseButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="tags">Button tags</h4>
|
||||
<p class="mb-3">The <code>.btn</code> classes are designed to be used with the <code><button></code> element. However, you can also use these classes on <code><a></code> or <code><input></code> elements (though some browsers may apply a slightly different rendering).</p>
|
||||
<div class="example">
|
||||
<a class="btn btn-primary mb-1 mb-md-0" href="javascript:;" role="button">Link</a>
|
||||
<button class="btn btn-primary mb-1 mb-md-0" type="submit">Button</button>
|
||||
<input class="btn btn-primary mb-1 mb-md-0" type="button" value="Input">
|
||||
<input class="btn btn-primary mb-1 mb-md-0" type="submit" value="Submit">
|
||||
<input class="btn btn-primary mb-1 mb-md-0" type="reset" value="Reset">
|
||||
</div>
|
||||
<figure class="highlight" id="tagsButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a class="btn btn-primary" href="#" role="button">Link</a>
|
||||
<button class="btn btn-primary" type="submit">Button</button>
|
||||
<input class="btn btn-primary" type="button" value="Input">
|
||||
<input class="btn btn-primary" type="submit" value="Submit">
|
||||
<input class="btn btn-primary" type="reset" value="Reset"></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#tagsButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="outline">Outline buttons</h4>
|
||||
<p class="mb-3">In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code>.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-outline-primary mb-1 mb-md-0">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary mb-1 mb-md-0">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success mb-1 mb-md-0">Success</button>
|
||||
<button type="button" class="btn btn-outline-danger mb-1 mb-md-0">Danger</button>
|
||||
<button type="button" class="btn btn-outline-warning mb-1 mb-md-0">Warning</button>
|
||||
<button type="button" class="btn btn-outline-info mb-1 mb-md-0">Info</button>
|
||||
<button type="button" class="btn btn-outline-light mb-1 mb-md-0">Light</button>
|
||||
<button type="button" class="btn btn-outline-dark mb-1 mb-md-0">Dark</button>
|
||||
</div>
|
||||
<figure class="highlight" id="outlineButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-outline-primary">Primary</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#outlineButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizes">Sizes</h4>
|
||||
<p class="mb-3">Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary btn-lg me-1 mb-1 mb-md-0">Large button</button>
|
||||
<button type="button" class="btn btn-primary me-1 mb-1 mb-md-0">Default button</button>
|
||||
<button type="button" class="btn btn-primary btn-sm me-1 mb-1 mb-md-0">Small button</button>
|
||||
<button type="button" class="btn btn-primary btn-xs mb-1 mb-md-0">Extra small</button>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonSizes">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-primary">Default button</button>
|
||||
<button type="button" class="btn btn-primary btn-xs">Extra small</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonSizes">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">Create block level buttons—those that span the full width of a parent.</p>
|
||||
<div class="example">
|
||||
<div class="d-grid gap-2">
|
||||
<button type="button" class="btn btn-primary">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBreadcrumbs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-grid gap-2">
|
||||
<button type="button" class="btn btn-primary">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary">Block level button</button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBreadcrumbs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="active">Active state</h4>
|
||||
<p class="mb-3">Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. <strong>There’s no need to add a class to <code><button></code>s as they use a pseudo-class</strong>. However, you can still force the same active appearance with <code>.active</code> (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.</p>
|
||||
<div class="example">
|
||||
<a href="javascript:;" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="javascript:;" class="btn btn-secondary active" role="button" aria-pressed="true">Link</a>
|
||||
</div>
|
||||
<figure class="highlight" id="activeButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary active" role="button" aria-pressed="true">Link</a></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#activeButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="disabled">Disabled state</h4>
|
||||
<p class="mb-3">Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any <code><button></code> element.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary" disabled>Primary button</button>
|
||||
<button type="button" class="btn btn-secondary" disabled>Button</button>
|
||||
</div>
|
||||
<figure class="highlight" id="disabledButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" disabled>Primary button</button>
|
||||
<button type="button" class="btn btn-secondary" disabled>Button</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#disabledButton">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">Disabled buttons using the <code><a></code> element behave a bit different. <code><a></code>s don’t support the <code>disabled</code> attribute, so you must add the <code>.disabled</code> class to make it visually appear disabled.</p>
|
||||
<div class="example">
|
||||
<a href="javascript:;" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
|
||||
<a href="javascript:;" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultButton2">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultButton2">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-icon">Icon buttons</h4>
|
||||
<p class="mb-3">Add class <code>.btn-icon</code> for buttons with only icons.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary btn-icon">
|
||||
<i data-feather="check-square"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-icon">
|
||||
<i data-feather="box"></i>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="withIcon">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary btn-icon">
|
||||
<i data-feather="check-square"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-icon">
|
||||
<i data-feather="box"></i>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withIcon">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-icon-text">Button with text and icon</h4>
|
||||
<p class="mb-3">Wrap icon and text inside <code>.btn-icon-text</code> and use <code>.btn-icon-prepend</code> or <code>.btn-icon-append</code> for icon tags.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary btn-icon-text mb-1 mb-md-0">
|
||||
<i class="btn-icon-prepend" data-feather="check-square"></i>
|
||||
Button with Icon
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-icon-text mb-1 mb-md-0">
|
||||
Button with Icon
|
||||
<i class="btn-icon-append" data-feather="box"></i>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="withIconText">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary btn-icon-text">
|
||||
<i class="btn-icon-prepend" data-feather="check-square"></i>
|
||||
Button with Icon
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-icon-text">
|
||||
Button with Icon
|
||||
<i class="btn-icon-append" data-feather="box"></i>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withIconText">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="social-icon">Social icon buttons</h4>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-icon btn-facebook mb-1 mb-md-0">
|
||||
<i data-feather="facebook"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-instagram mb-1 mb-md-0">
|
||||
<i data-feather="instagram"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-twitter mb-1 mb-md-0">
|
||||
<i data-feather="twitter"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-youtube mb-1 mb-md-0">
|
||||
<i data-feather="youtube"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-github mb-1 mb-md-0">
|
||||
<i data-feather="github"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-linkedin mb-1 mb-md-0">
|
||||
<i data-feather="linkedin"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-outline-twitter mb-1 mb-md-0">
|
||||
<i data-feather="twitter"></i>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="socialIcon">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-icon btn-facebook">
|
||||
<i data-feather="facebook"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-instagram">
|
||||
<i data-feather="instagram"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-twitter">
|
||||
<i data-feather="twitter"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-youtube">
|
||||
<i data-feather="youtube"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-github">
|
||||
<i data-feather="github"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-linkedin">
|
||||
<i data-feather="linkedin"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-outline-twitter">
|
||||
<i data-feather="twitter"></i>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#socialIcon">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="social-icon-text">Social buttons with icon and text</h4>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-icon-text btn-facebook mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="facebook"></i>
|
||||
Facebook
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-instagram mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="instagram"></i>
|
||||
Instagram
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-twitter mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="twitter"></i>
|
||||
Twitter
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-youtube mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="youtube"></i>
|
||||
Youtube
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-github mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="github"></i>
|
||||
Github
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-linkedin mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="linkedin"></i>
|
||||
LinkedIn
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-outline-twitter mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="twitter"></i>
|
||||
Twitter
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="socialIconText">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-icon-text btn-facebook">
|
||||
<i class="btn-icon-prepend" data-feather="facebook"></i>
|
||||
Facebook
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-instagram">
|
||||
<i class="btn-icon-prepend" data-feather="instagram"></i>
|
||||
Instagram
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-twitter">
|
||||
<i class="btn-icon-prepend" data-feather="twitter"></i>
|
||||
Twitter
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-youtube">
|
||||
<i class="btn-icon-prepend" data-feather="youtube"></i>
|
||||
Youtube
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-github">
|
||||
<i class="btn-icon-prepend" data-feather="github"></i>
|
||||
Github
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-linkedin">
|
||||
<i class="btn-icon-prepend" data-feather="linkedin"></i>
|
||||
LinkedIn
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-outline-twitter">
|
||||
<i class="btn-icon-prepend" data-feather="twitter"></i>
|
||||
Twitter
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#socialIconText">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#inverse" class="nav-link">Inverse Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tags" class="nav-link">Button tags</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#outline" class="nav-link">Outline buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizes" class="nav-link">Button sizes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#active" class="nav-link">Active state</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#disabled" class="nav-link">Disabled state</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-icon" class="nav-link">Icon buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-icon-text" class="nav-link">With icon and text</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#social-icon" class="nav-link">Social icon</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#social-icon-text" class="nav-link">Social icon and text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
644
resources/views/pages/ui-components/cards.blade.php
Executable file
644
resources/views/pages/ui-components/cards.blade.php
Executable file
@ -0,0 +1,644 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Cards</h1>
|
||||
<p class="lead">A flexible and extensible content container with multiple variants and options. Read the <a href="https://getbootstrap.com/docs/5.3/components/card/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic Example</h4>
|
||||
<p class="mb-3">Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various <a href="#sizing">sizing options</a>.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultCard">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text mb-3">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></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultCard">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="contents">Content types</h4>
|
||||
<p class="mb-3">Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.</p>
|
||||
<h4 id="body">Body</h4>
|
||||
<p class="mb-3">The building block of a card is the <code>.card-body</code>. Use it whenever you need a padded section within a card.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
This is some text within a card body.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="contentBody">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<div class="card-body">
|
||||
This is some text within a card body.
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#contentBody">copy</button>
|
||||
</figure>
|
||||
<h4 id="title-text-link">Titles, text, and links</h4>
|
||||
<p class="mb-3">Subtitles are used by adding a <code>.card-subtitle</code> to a <code><h*></code> tag. If the <code>.card-title</code> and the <code>.card-subtitle</code> items are placed in a <code>.card-body</code> item, the card title and subtitle are aligned nicely.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
||||
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="javascript:;" class="card-link">Card link</a>
|
||||
<a href="javascript:;" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="titleText">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
||||
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#titleText">copy</button>
|
||||
</figure>
|
||||
<h4 id="images">Images</h4>
|
||||
<p class="mb-3"><code>.card-img-top</code> places an image to the top of the card. With <code>.card-text</code>, text can be added to the card. Text within <code>.card-text</code> can also be styled with the standard HTML tags.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4 grid-margin grid-margin-md-0">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<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>
|
||||
</div>
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="imageCard">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<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>
|
||||
</div>
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#imageCard">copy</button>
|
||||
</figure>
|
||||
<h4 id="list-groups">List groups</h4>
|
||||
<p class="mb-3">Create lists of content in a card with a flush list group.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="listGroups">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#listGroups">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="listGroups2">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#listGroups2">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="header-footer">Header & Footer</h4>
|
||||
<p class="mb-3">Add an optional header and/or footer within a card.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card header
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text mb-3">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text mb-3">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Card footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="headerFooter">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<div class="card-header">
|
||||
Card header
|
||||
</div>
|
||||
<div class="card-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
...
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Card footer
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#headerFooter">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Sizing</h4>
|
||||
<p class="mb-3">Cards assume no specific <code>width</code> to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4 col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text mb-3">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text mb-3">With supporting text below as a natural lead-in to content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="cardSizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="row">
|
||||
<div class="col-12 col-md-4 col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#cardSizing">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="card-navigation">Card navigation</h4>
|
||||
<p class="mb-3">Add some navigation to a card’s header (or block) with Bootstrap’s nav components.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
<li class="nav-item"><a class="nav-link active" href="javascript:;">Active</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="javascript:;">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text mb-3">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="cardNavigation">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#cardNavigation">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="image-overlay">Image overlay</h4>
|
||||
<p class="mb-3">Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card text-white">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img" alt="...">
|
||||
<div class="card-img-overlay">
|
||||
<h5 class="card-title text-white fw-bolder">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text">Last updated 3 mins ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="imgOverlay">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card text-white">
|
||||
<img src="..." class="card-img" alt="...">
|
||||
<div class="card-img-overlay">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text">Last updated 3 mins ago</p>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#imgOverlay">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="bg-color">Background Color</h4>
|
||||
<p class="mb-3">Use <a href="https://getbootstrap.com/docs/5.3/utilities/colors/" target="_blank">text color</a> and <a href="https://getbootstrap.com/docs/5.3/utilities/background/" target="_blank">background utilities</a> to change the appearance of a card.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-primary">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Primary 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-secondary">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Secondary 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-success">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Success 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-danger">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Danger 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-warning">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Warning 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-info">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Info 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card bg-light">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-body">Light 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-dark">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Dark 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="bgColor">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card text-white bg-primary">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Primary 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-white bg-secondary">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-success">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-danger">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-warning">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-info">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-light">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-dark">
|
||||
...
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#bgColor">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="card-group">Card groups</h4>
|
||||
<p class="mb-3">Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use <code>display: flex;</code> to achieve their uniform sizing.</p>
|
||||
<div class="example">
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="cardGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card-group">
|
||||
<div class="card"> ... </div>
|
||||
<div class="card"> ... </div>
|
||||
<div class="card"> ... </div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#cardGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="grid">Grid cards</h4>
|
||||
<p class="mb-3">Use the Bootstrap grid system and its <a href="https://getbootstrap.com/docs/5.3/layout/grid/#row-columns" target="_blank"><code>.row-cols</code> classes</a>
|
||||
to control how many grid columns (wrapped around your cards) you show per row. For example, here’s <code>.row-cols-1</code> laying out the cards on one column,
|
||||
and <code>.row-cols-md-2</code> splitting four cards to equal width across multiple rows, from the medium breakpoint up.</p>
|
||||
<div class="example">
|
||||
<div class="row row-cols-1 row-cols-md-2 g-4">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="cardDecks">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="row row-cols-1 row-cols-md-2 g-4">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#cardDecks">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic Example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#contents" class="nav-link">Content types</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#header-footer" class="nav-link">Header and footer</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Sizing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#card-navigation" class="nav-link">Card navigation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#image-overlay" class="nav-link">Image overlay</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#bg-color" class="nav-link">Background color</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#card-group" class="nav-link">Card groups</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#grid" class="nav-link">Grid cards</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
329
resources/views/pages/ui-components/carousel.blade.php
Executable file
329
resources/views/pages/ui-components/carousel.blade.php
Executable file
@ -0,0 +1,329 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Carousel</h1>
|
||||
<p class="lead">A slideshow component for cycling through elements—images or slides of text—like a carousel. Read the <a href="https://getbootstrap.com/docs/5.3/components/carousel/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="slides-only">Slides only</h4>
|
||||
<p class="mb-3">Here’s a carousel with slides only. Note the presence of the <code>.d-block</code> and <code>.w-100</code> on carousel images to prevent browser default image alignment.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="slidesOnly">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#slidesOnly">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-controls">With controls</h4>
|
||||
<p class="mb-3">Adding in the previous and next controls:</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="withControls">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withControls">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-indicators">With indicators</h4>
|
||||
<p class="mb-3">You can also add the indicators to the carousel, alongside the controls, too.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="withIndicators">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withIndicators">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-captions">With captions</h4>
|
||||
<p class="mb-3">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 <a href="https://getbootstrap.com/docs/5.3/utilities/display/" target="_blank">display utilities</a>. 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 class="example">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="withCaptions">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="example">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withCaptions">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="crossfade">Crossfade</h4>
|
||||
<p class="mb-3">Add <code>.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="crossfadeCarousel">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#crossfadeCarousel">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#slides-only" class="nav-link">Slides only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-controls" class="nav-link">With controls</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-indicators" class="nav-link">With indicators</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-captions" class="nav-link">With captions</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#crossfade" class="nav-link">Crossfade</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
116
resources/views/pages/ui-components/collapse.blade.php
Executable file
116
resources/views/pages/ui-components/collapse.blade.php
Executable file
@ -0,0 +1,116 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Collapse</h1>
|
||||
<p class="lead">Toggle the visibility of content across your project with a few classes and javascript. Read the <a href="https://getbootstrap.com/docs/5.3/components/collapse/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic Example</h4>
|
||||
<p class="mb-3">Click the buttons below to show and hide another element via class changes:</p>
|
||||
<div class="example">
|
||||
<p>
|
||||
<a class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBreadcrumbs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><p>
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBreadcrumbs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="multiple">Multiple targets</h4>
|
||||
<p class="mb-3">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 class="example">
|
||||
<p>
|
||||
<a class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary mb-1 mb-md-0" 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>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="multipleTargets">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><p>
|
||||
<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>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#multipleTargets">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Default collapse</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
712
resources/views/pages/ui-components/dropdowns.blade.php
Executable file
712
resources/views/pages/ui-components/dropdowns.blade.php
Executable file
@ -0,0 +1,712 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Dropdowns</h1>
|
||||
<p class="lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. Read the <a href="https://getbootstrap.com/docs/5.3/components/dropdowns/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic Example</h4>
|
||||
<p class="mb-3">Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code>.dropdown</code>, or another element that declares <code></code>position: relative;</code>. Dropdowns can be triggered from <code><a></code> or <code><button></code> elements to better fit your potential needs.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultDropdown">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<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></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultDropdown">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="variations">Dropdown variations</h4>
|
||||
<p class="mb-3">Add class <code>.btn-*</code> for solid colored buttons.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropdownVariations">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
|
||||
<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></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropdownVariations">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="split">Split button</h4>
|
||||
<p class="mb-3">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 class="example">
|
||||
<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-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</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-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</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-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</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-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="splitButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><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-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<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></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#splitButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Sizing</h4>
|
||||
<p class="mb-3">Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>
|
||||
<div class="example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group ms-2">
|
||||
<button type="button" class="btn btn-lg btn-secondary">Large split button</button>
|
||||
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group ms-2">
|
||||
<button type="button" class="btn btn-sm btn-secondary">Small split button</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonSizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Large button groups (default and split) -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg" type="button">
|
||||
Large split button
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Small button groups (default and split) -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm" type="button">
|
||||
Small split button
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonSizing">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropup">Dropup</h4>
|
||||
<p class="mb-3">Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent element.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropup
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropup
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropUP">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropup
|
||||
</button>
|
||||
<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></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropUP">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropright">Dropright</h4>
|
||||
<p class="mb-3">Trigger dropdown menus at the right of the elements by adding <code>.dropright</code> to the parent element.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropright
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropright
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropright</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropRight">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Default dropright button -->
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropright
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Split dropright button -->
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropright
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropright</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropRight">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropleft">Dropleft</h4>
|
||||
<p class="mb-3">Trigger dropdown menus at the right of the elements by adding <code>.dropleft</code> to the parent element.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group dropstart">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropleft
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group dropstart" role="group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropleft</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropleft
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropLeft">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Default dropleft button -->
|
||||
<div class="btn-group dropstart">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropleft
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Split dropleft button -->
|
||||
<div class="btn-group">
|
||||
<div class="btn-group dropstart" role="group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropleft</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropleft
|
||||
</button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropLeft">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="active-item">Active menu item</h4>
|
||||
<p class="mb-3">Add <code>.active</code> to items in the dropdown to <strong>style them as active</strong>.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item active" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="activeItem">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item active" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#activeItem">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="disabled-item">Disabled menu item</h4>
|
||||
<p class="mb-3">Add <code>.disabled</code> to items in the dropdown to <strong>style them as active</strong>.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item disabled" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="disabledItem">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item disabled" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#disabledItem">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropdown-header">Dropdown header</h4>
|
||||
<p class="mb-3">Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
|
||||
<h6 class="dropdown-header">Dropdown header</h6>
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropdownHeader">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
|
||||
<h6 class="dropdown-header">Dropdown header</h6>
|
||||
<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></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropdownHeader">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropdown-dividers">Dropdown dividers</h4>
|
||||
<p class="mb-3">Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropdownDividers">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
|
||||
<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 class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropdownDividers">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropdown-text">Text in dropdown</h4>
|
||||
<p class="mb-3">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>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu p-4 text-muted" aria-labelledby="dropdownMenuButton5">
|
||||
<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>
|
||||
<figure class="highlight" id="dropdownText">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu p-4 text-muted" aria-labelledby="dropdownMenuButton5">
|
||||
<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></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropdownText">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropdown-form">Forms in dropdown</h4>
|
||||
<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="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<form class="dropdown-menu p-4" aria-labelledby="dropdownMenuButton6">
|
||||
<div class="mb-3">
|
||||
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropdownForm">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<form class="dropdown-menu p-4" aria-labelledby="dropdownMenuButton6">
|
||||
<div class="mb-3">
|
||||
<label for="exampleDropdownFormEmail2">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleDropdownFormPassword2">Password</label>
|
||||
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
|
||||
<label class="form-check-label" for="dropdownCheck2">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</form>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropdownForm">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#variations" class="nav-link">Dropdown variations</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#split" class="nav-link">Split button</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Sizing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropup" class="nav-link">Dropup</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropright" class="nav-link">Dropright</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropleft" class="nav-link">Dropleft</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#active-item" class="nav-link">Active menu item</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#disabled-item" class="nav-link">Disabled menu item</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropdown-header" class="nav-link">Dropdown header</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropdown-dividers" class="nav-link">Dropdown dividers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropdown-text" class="nav-link">Text in dropdown</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropdown-form" class="nav-link">Form in dropdown</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
281
resources/views/pages/ui-components/list-group.blade.php
Executable file
281
resources/views/pages/ui-components/list-group.blade.php
Executable file
@ -0,0 +1,281 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">List Group</h1>
|
||||
<p class="lead">List groups are a flexible and powerful component for displaying a series of content. Read the <a href="https://getbootstrap.com/docs/5.3/components/list-group/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">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 class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="active-items">Active items</h4>
|
||||
<p class="mb-3">Add <code>.active</code> to a <code>.list-group-item</code> to indicate the current active selection.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item active">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="activeItems">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item active">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#activeItems">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="disabled-items">Disabled items</h4>
|
||||
<p class="mb-3">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 class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="disabledItems">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#disabledItems">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="links-buttons">Links and buttons</h4>
|
||||
<p class="mb-3">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>.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="list-group">
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="linksButtons">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#linksButtons">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="flush">Flush</h4>
|
||||
<p class="mb-3">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 class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Flush">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Flush">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-badges">With badges</h4>
|
||||
<p class="mb-3">Add badges to any list group item to show unread counts, activity, and more with the help of some <a href="https://getbootstrap.com/docs/5.3/utilities/flex/" target="_blank">utilities</a>.</p>
|
||||
<div class="example">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A list item
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A second list item
|
||||
<span class="badge bg-primary rounded-pill">2</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A third list item
|
||||
<span class="badge bg-primary rounded-pill">1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="withBadges">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A list item
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A second list item
|
||||
<span class="badge bg-primary rounded-pill">2</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A third list item
|
||||
<span class="badge bg-primary rounded-pill">1</span>
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withBadges">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="checkboxes-radios">Checkboxes and radios</h4>
|
||||
<p class="mb-3">Place Bootstrap’s checkboxes and radios within list group items and customize as needed.</p>
|
||||
<div class="example">
|
||||
<div class="list-group">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
First checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Second checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Third checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fourth checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fifth checkbox
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="checkboxesRadios">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="list-group">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
First checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Second checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Third checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fourth checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fifth checkbox
|
||||
</label>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#checkboxesRadios">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#active-items" class="nav-link">Active items</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#disabled-items" class="nav-link">Disabled items</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#links-buttons" class="nav-link">Linkd and buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#flush" class="nav-link">Flush</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-badges" class="nav-link">With badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#checkboxes-radios" class="nav-link">Checkboxes radios</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
242
resources/views/pages/ui-components/media-object.blade.php
Executable file
242
resources/views/pages/ui-components/media-object.blade.php
Executable file
@ -0,0 +1,242 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Media Object</h1>
|
||||
<p class="lead">Construct highly repetitive components like blog comments, tweets, and the like.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-200 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="wd-100 wd-sm-200 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="nesting">Nesting</h4>
|
||||
<p class="mb-3">Can be infinitely nested.</p>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<div class="d-flex align-items-start mt-3">
|
||||
<a class="me-3" href="#">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150" alt="...">
|
||||
</a>
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Nesting">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<div class="d-flex align-items-start mt-3">
|
||||
<a class="me-3" href="#">
|
||||
<img src="..." class="wd-100 wd-sm-150" alt="...">
|
||||
</a>
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Nesting">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alignment">Alignment</h4>
|
||||
<p class="mb-3">Can be aligned to the top (default), middle, or end.</p>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="align-self-start wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Top-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Alignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="align-self-start wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Top-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Alignment">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="align-self-center wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Center-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="centerAlign">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="align-self-center wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#centerAlign">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="align-self-end wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Bottom-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="bottomAlign">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="align-self-end wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#bottomAlign">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="order">Order</h4>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150 ms-3" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Order">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
<img src="..." class="wd-100 wd-sm-150 ms-3" alt="...">
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Order">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="media-list">Media list</h4>
|
||||
<div class="example">
|
||||
<ul class="list-unstyled">
|
||||
<li class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex align-items-start my-4">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="mediaList">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-unstyled">
|
||||
<li class="d-flex align-items-start">
|
||||
<img src="..." class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex align-items-start my-4">
|
||||
...
|
||||
</li>
|
||||
<li class="d-flex align-items-start">
|
||||
...
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#mediaList">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#nesting" class="nav-link">Nesting</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alignment" class="nav-link">Alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#order" class="nav-link">Order</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#media-list" class="nav-link">Media list</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
457
resources/views/pages/ui-components/modal.blade.php
Executable file
457
resources/views/pages/ui-components/modal.blade.php
Executable file
@ -0,0 +1,457 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Modal</h1>
|
||||
<p class="lead">Add dialogs to your site for lightboxes, user notifications, or completely custom content. Read the <a href="https://getbootstrap.com/docs/5.3/components/modal/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Below is a <em>static</em> modal example (meaning its <code>position</code> and <code>display</code> have been overridden).</p>
|
||||
<div class="example">
|
||||
<div class="modal static" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Modal body text goes here.</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>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Modal body text goes here.</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></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="demo">Live demo</h4>
|
||||
<p class="mb-3">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 class="example">
|
||||
<!-- 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="btn-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>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Demo">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- 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="btn-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>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Demo">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="scrolling">Scrolling long content</h4>
|
||||
<p class="mb-3">When modals become too long for the user’s viewport or device, they scroll independent of the page itself.</p>
|
||||
<div class="example">
|
||||
<!-- 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="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</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="my-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>
|
||||
<div class="example">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLongScollable">
|
||||
Launch demo modal
|
||||
</button>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalLongScollable" 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="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</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>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="v-center">Vertically centered</h4>
|
||||
<p class="mb-3">Add <code>.modal-dialog-centered</code> to <code>.modal-dialog</code> to vertically center the modal.</p>
|
||||
<div class="example">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
|
||||
Launch demo 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="btn-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>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="varying">Varying modal content</h4>
|
||||
<p class="mb-3">Have a bunch of buttons that all trigger the same modal with slightly different contents? Use <code >event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <code >data-bs-*</code> attributes</a> (possibly <a href="https://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@fat">Open modal for @fat</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
||||
|
||||
<div class="modal fade" id="varyingModal" tabindex="-1" aria-labelledby="varyingModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="varyingModalLabel">New message</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="recipient-name" class="form-label">Recipient:</label>
|
||||
<input type="text" class="form-control" id="recipient-name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message-text" class="form-label">Message:</label>
|
||||
<textarea class="form-control" id="message-text"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</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">Send message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="varyingContent">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@fat">Open modal for @fat</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
||||
|
||||
<div class="modal fade" id="varyingModal" tabindex="-1" aria-labelledby="varyingModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="varyingModalLabel">New message</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="recipient-name" class="form-label">Recipient:</label>
|
||||
<input type="text" class="form-control" id="recipient-name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message-text" class="form-label">Message:</label>
|
||||
<textarea class="form-control" id="message-text"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</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">Send message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#varyingContent">copy</button>
|
||||
</figure>
|
||||
<figure class="highlight" id="varyingContentScript">
|
||||
<pre><code class="language-javascript"><script type="script/prism-javascript-markup">var varyingModal = document.getElementById('varyingModal')
|
||||
varyingModal.addEventListener('show.bs.modal', function (event) {
|
||||
// Button that triggered the modal
|
||||
var button = event.relatedTarget
|
||||
// Extract info from data-bs-* attributes
|
||||
var recipient = button.getAttribute('data-bs-whatever')
|
||||
// If necessary, you could initiate an AJAX request here
|
||||
// and then do the updating in a callback.
|
||||
//
|
||||
// Update the modal's content.
|
||||
var modalTitle = varyingModal.querySelector('.modal-title')
|
||||
var modalBodyInput = varyingModal.querySelector('.modal-body input')
|
||||
|
||||
modalTitle.textContent = 'New message to ' + recipient
|
||||
modalBodyInput.value = recipient
|
||||
})</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#varyingContentScript">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Optional sizes</h4>
|
||||
<p class="mb-3">Modals have three optional sizes. Add <code>.modal-sm</code>, <code>.modal-lg</code> or <code>.modal-xl</code> to <code>.modal-dialog</code> for additional sizes.</p>
|
||||
<div class="example">
|
||||
<!-- Extra large modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-xl">Extra large modal</button>
|
||||
<div class="modal fade bd-example-modal-xl" tabindex="-1" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="myExtraLargeModalLabel">Extra large modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Large modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Large modal</button>
|
||||
|
||||
<div class="modal fade bd-example-modal-lg" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="myLargeModalLabel">Large modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Small modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Small modal</button>
|
||||
|
||||
<div class="modal fade bd-example-modal-sm" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="mySmallModalLabel">Small modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Sizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Extra large modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-xl">Extra large modal</button>
|
||||
|
||||
<div class="modal fade bd-example-modal-xl" tabindex="-1" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Large modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Large modal</button>
|
||||
|
||||
<div class="modal fade bd-example-modal-lg" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Small modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Small modal</button>
|
||||
|
||||
<div class="modal fade bd-example-modal-sm" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Sizing">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#demo" class="nav-link">Live demo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#scrolling" class="nav-link">Scrolling long content</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#v-center" class="nav-link">Vertical centered</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#varying" class="nav-link">Varying modal content</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Optional sizes</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script>
|
||||
var varyingModal = document.getElementById('varyingModal')
|
||||
varyingModal.addEventListener('show.bs.modal', function (event) {
|
||||
// Button that triggered the modal
|
||||
var button = event.relatedTarget
|
||||
// Extract info from data-bs-* attributes
|
||||
var recipient = button.getAttribute('data-bs-whatever')
|
||||
// If necessary, you could initiate an AJAX request here
|
||||
// and then do the updating in a callback.
|
||||
//
|
||||
// Update the modal's content.
|
||||
var modalTitle = varyingModal.querySelector('.modal-title')
|
||||
var modalBodyInput = varyingModal.querySelector('.modal-body input')
|
||||
|
||||
modalTitle.textContent = 'New message to ' + recipient
|
||||
modalBodyInput.value = recipient
|
||||
})
|
||||
</script>
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
387
resources/views/pages/ui-components/navbar.blade.php
Executable file
387
resources/views/pages/ui-components/navbar.blade.php
Executable file
@ -0,0 +1,387 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Navbar</h1>
|
||||
<p class="lead">Responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. Read the <a href="https://getbootstrap.com/docs/5.3/components/navbar/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the <code>lg</code> (large) breakpoint.</p>
|
||||
<div class="example">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Blog</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="brand">Brand</h4>
|
||||
<p class="mb-3">The <code>.navbar-brand</code> can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.</p>
|
||||
<div class="example">
|
||||
<!-- As a link -->
|
||||
<nav class="navbar navbar-light bg-light mb-3">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
</nav>
|
||||
<!-- As a heading -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<span class="navbar-brand mb-0 h1">Navbar</span>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Brand">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- As a link -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</nav>
|
||||
<!-- As a heading -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<span class="navbar-brand mb-0 h1">Navbar</span>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Brand">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">Adding images to the <code>.navbar-brand</code> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.</p>
|
||||
<div class="example">
|
||||
<!-- Just an image -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="javascript:;">
|
||||
<img src="{{ url('assets/images/others/logo-placeholder.png') }}" width="30" height="30" alt="">
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="brandImage">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Just an image -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="..." width="30" height="30" alt="">
|
||||
</a>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#brandImage">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<!-- Image and text -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="javascript:;">
|
||||
<img src="{{ url('assets/images/others/logo-placeholder.png') }}" width="30" height="30" class="d-inline-block align-top" alt="">
|
||||
Logo
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="brandImgText">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Image and text -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="..." width="30" height="30" class="d-inline-block align-top" alt="">
|
||||
Logo
|
||||
</a>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#brandImgText">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="forms1">Forms</h4>
|
||||
<p class="mb-3">Place various form controls and components within a navbar.</p>
|
||||
<div class="example">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<form class="d-flex ms-auto">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Forms1">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-light bg-light">
|
||||
<form class="d-flex ms-auto">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Forms1">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="text">Text</h4>
|
||||
<p class="mb-3">Navbars may contain bits of text with the help of <code>.navbar-text</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>
|
||||
<div class="example">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<span class="navbar-text">
|
||||
Navbar text with an inline element
|
||||
</span>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Text">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-light bg-light">
|
||||
<span class="navbar-text">
|
||||
Navbar text with an inline element
|
||||
</span>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Text">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="color-schemes">Color schemes</h4>
|
||||
<p class="mb-3">Theming the navbar has never been easier thanks to the combination of theming classes and <code>background-color</code> utilities. Choose from <code>.navbar-light</code> for use with light background colors, or <code>.navbar-dark</code> for dark background colors. Then, customize with <code>.bg-*</code> utilities.</p>
|
||||
<div class="example">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarColor01">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarColor02">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarColor03">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="colorSchemes">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-dark bg-dark">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-light bg-danger">
|
||||
<!-- Navbar content -->
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#colorSchemes">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<h4 id="toggler">Toggler</h4>
|
||||
<p class="mb-3">Below the example of toggler</p>
|
||||
<div class="example">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Toggler">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Toggler">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Default</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#brand" class="nav-link">Brand</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#forms" class="nav-link">Forms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#text" class="nav-link">Text</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#color-schemes" class="nav-link">Color schemes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#toggler" class="nav-link">Toggler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
261
resources/views/pages/ui-components/navs.blade.php
Executable file
261
resources/views/pages/ui-components/navs.blade.php
Executable file
@ -0,0 +1,261 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Navs</h1>
|
||||
<p class="lead">Documentation and examples for how to use Bootstrap’s included navigation components. Read the <a href="https://getbootstrap.com/docs/5.3/components/navs/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
||||
<div class="example">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="h-alignment">Horizontal alignment</h4>
|
||||
<p class="mb-3">Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.</p>
|
||||
<div class="example">
|
||||
<ul class="nav justify-content-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="hAlignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav justify-content-center">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#hAlignment">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<ul class="nav justify-content-end">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="hAlignmentB">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav justify-content-end">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#hAlignmentB">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="v-alignment">Vertical alignment</h4>
|
||||
<p class="mb-3">Stack your navigation by changing the flex item direction with the <code>.flex-column</code> utility. </p>
|
||||
<div class="example">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="vAlignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav justify-content-center">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#vAlignment">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="tabs">Tabs</h4>
|
||||
<p class="mb-3">Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="Tabs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Tabs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="fill-justify">Fill and justify</h4>
|
||||
<p class="mb-3">Force your <code>.nav</code>’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your <code>.nav-item</code>s, use <code>.nav-fill</code>.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-pills nav-fill">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Much longer nav link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="fillJustify">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-fill">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#fillJustify">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="tabs-dropdown">Tabs with dropdowns</h4>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="tabsDropdown">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</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 class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#tabsDropdown">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#h-alignment" class="nav-link">Horizontal alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#v-alignment" class="nav-link">Vertical alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tabs" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#fill-justify" class="nav-link">Fill and justify</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-dropdown" class="nav-link">Tabs with dropdowns</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
205
resources/views/pages/ui-components/pagination.blade.php
Executable file
205
resources/views/pages/ui-components/pagination.blade.php
Executable file
@ -0,0 +1,205 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Pagination</h1>
|
||||
<p class="lead">To indicate a series of related content exists across multiple pages. Read the <a href="https://getbootstrap.com/docs/5.3/components/pagination/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Pagination is built with list HTML elements so screen readers can announce the number of available links.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item"><a class="page-link" href="javascript:;"><i data-feather="chevron-left"></i></a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item disabled"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;"><i data-feather="chevron-right"></i></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#"><i data-feather="chevron-left"></i></a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item disabled"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#"><i data-feather="chevron-right"></i></a></li>
|
||||
</ul>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Sizing</h4>
|
||||
<p class="mb-3">Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
|
||||
<div class="example">
|
||||
<ul class="pagination mb-0 pagination-lg">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">
|
||||
1
|
||||
<span class="visually-hidden">(current)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="Sizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-lg">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Sizing">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<ul class="pagination mb-0 pagination-sm">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">
|
||||
1
|
||||
<span class="visually-hidden">(current)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="sizingSm">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-sm">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#sizingSm">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alignment">Alignment</h4>
|
||||
<p class="mb-3">Change the alignment of pagination components with flexbox utilities.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0 justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Alignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination justify-content-center">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Alignment">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<ul class="pagination mb-0 justify-content-end">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentEnd">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination justify-content-end">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentEnd">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="seperated">Sperated</h4>
|
||||
<p class="mb-3">Add calss <code>.pagination-separated</code>.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0 pagination-separated">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Seperated">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-separated">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Seperated">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="rounded">Rounded</h4>
|
||||
<p class="mb-3">Add calss <code>.pagination-rounded</code>.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0 pagination-rounded">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Rounded">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-rounded">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Rounded">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Sizing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alignment" class="nav-link">Alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#seperated" class="nav-link">Seperated</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#rounded" class="nav-link">Rounded</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
108
resources/views/pages/ui-components/popovers.blade.php
Executable file
108
resources/views/pages/ui-components/popovers.blade.php
Executable file
@ -0,0 +1,108 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Popovers</h1>
|
||||
<p class="lead">Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. Read the <a href="https://getbootstrap.com/docs/5.3/components/popovers/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="enable">Enable popovers everywhere</h4>
|
||||
<p class="mb-3">One way to initialize all popovers on a page would be to select them by their <code>data-bs-toggle</code> attribute:</p>
|
||||
<figure class="highlight" id="Enable">
|
||||
<pre><code class="language-javascript"><script type="script/prism-javascript-markup">var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl)
|
||||
})</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Enable">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="directions">Four directions</h4>
|
||||
<p class="mb-3">Four options are available: top, right, bottom, and left aligned.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" 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>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" 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>
|
||||
<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>
|
||||
<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.">
|
||||
Popover on left
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Directions">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><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>
|
||||
<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>
|
||||
<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>
|
||||
<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.">
|
||||
Popover on left
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Directions">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dissmiss">Dismiss on next click</h4>
|
||||
<p class="mb-3">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 class="example">
|
||||
<a tabindex="0" class="btn btn-primary" role="button" data-bs-toggle="popover" data-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||
</div>
|
||||
<figure class="highlight" id="Dissmiss">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a tabindex="0" class="btn btn-primary" role="button" data-bs-toggle="popover" data-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Dissmiss">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#enable" class="nav-link">Enable popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#directions" class="nav-link">Four directions</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dissmiss" class="nav-link">Dismiss on next click</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
216
resources/views/pages/ui-components/progress.blade.php
Executable file
216
resources/views/pages/ui-components/progress.blade.php
Executable file
@ -0,0 +1,216 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Progress</h1>
|
||||
<p class="lead">Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. Read the <a href="https://getbootstrap.com/docs/5.3/components/progress/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="labels">Labels</h4>
|
||||
<p class="mb-3">Add labels to your progress bars by placing text within the <code>.progress-bar</code>.</p>
|
||||
<div class="example">
|
||||
<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>
|
||||
<figure class="highlight" id="Labels">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Labels">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="height">Height</h4>
|
||||
<p class="mb-3">We only set a <code>height</code> value on the <code>.progress</code>, so if you change that value the inner <code>.progress-bar</code> will automatically resize accordingly.</p>
|
||||
<div class="example">
|
||||
<div class="progress mb-3 ht-5">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3 ht-10">
|
||||
<div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress ht-15">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Height">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress ht-5">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3 ht-10">
|
||||
<div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress ht-15">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Height">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="backgrounds">Backgrounds</h4>
|
||||
<p class="mb-3">Use background utility classes to change the appearance of individual progress bars.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Backgrounds">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Backgrounds">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="multiple">Multiple bars</h4>
|
||||
<p class="mb-3">Include multiple progress bars in a progress component if you need.</p>
|
||||
<div class="example">
|
||||
<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-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="MultipleBars">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><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-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#MultipleBars">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="striped">Striped</h4>
|
||||
<p class="mb-3">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 class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Striped">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Striped">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="animated">Animated stripes</h4>
|
||||
<p class="mb-3">The striped gradient can also be animated. Add <code>.progress-bar-animated</code> to <code>.progress-bar</code> to animate the stripes right to left via CSS3 animations.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Animated">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Animated">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Default</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#labels" class="nav-link">Labels</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#height" class="nav-link">Height</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#backgrounds" class="nav-link">Backgrounds</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#multiple" class="nav-link">Multiple</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#striped" class="nav-link">Striped</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#animated" class="nav-link">Animated stripes</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
74
resources/views/pages/ui-components/scrollbar.blade.php
Executable file
74
resources/views/pages/ui-components/scrollbar.blade.php
Executable file
@ -0,0 +1,74 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Scrollbar</h1>
|
||||
<p class="lead">Custom scrollbar on an element. Read the <a href="https://github.com/mdbootstrap/perfect-scrollbar" target="_blank">Official Perfect-scrollbar Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example</h4>
|
||||
<p class="mb-3">The base scrollbar component must position to relative and have a fix height.</p>
|
||||
<div class="example">
|
||||
<div class="perfect-scrollbar-example p-4 border">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, quam vitae? Saepe, quidem at in non quibusdam sint ipsa suscipit inventore. Dolore quae, quas obcaecati officia autem itaque numquam magni?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolores vel ipsa fugiat maiores culpa accusamus, quisquam veniam quo deleniti velit facere aliquid, ut quis quibusdam reprehenderit quod aliquam perspiciatis?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae placeat cumque ea, temporibus, ipsam officia nesciunt rem quas quibusdam necessitatibus ad. Quos, nihil consequatur doloribus dicta dolore ab quibusdam assumenda!</p>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, consectetur suscipit sed, soluta aperiam vitae unde voluptatibus deserunt, ipsum voluptatem iure. Enim quibusdam dolorum facilis non tempore labore, doloremque sint.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni placeat distinctio delectus fugiat nobis quia expedita architecto vero quidem id ullam, itaque tempore. Qui, a doloremque. Molestias vel labore cumque.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime qui tempora mollitia eaque doloremque architecto, odit, pariatur rem harum vitae quod. Illo sed odit laboriosam voluptatem officiis magnam sequi maiores!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, fugiat porro dolore libero aspernatur tenetur qui ratione deleniti commodi modi accusamus maiores iure ipsa, tempore necessitatibus rerum eligendi quidem voluptates!</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, quam vitae? Saepe, quidem at in non quibusdam sint ipsa suscipit inventore. Dolore quae, quas obcaecati officia autem itaque numquam magni?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolores vel ipsa fugiat maiores culpa accusamus, quisquam veniam quo deleniti velit facere aliquid, ut quis quibusdam reprehenderit quod aliquam perspiciatis?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae placeat cumque ea, temporibus, ipsam officia nesciunt rem quas quibusdam necessitatibus ad. Quos, nihil consequatur doloribus dicta dolore ab quibusdam assumenda!</p>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, consectetur suscipit sed, soluta aperiam vitae unde voluptatibus deserunt, ipsum voluptatem iure. Enim quibusdam dolorum facilis non tempore labore, doloremque sint.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni placeat distinctio delectus fugiat nobis quia expedita architecto vero quidem id ullam, itaque tempore. Qui, a doloremque. Molestias vel labore cumque.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime qui tempora mollitia eaque doloremque architecto, odit, pariatur rem harum vitae quod. Illo sed odit laboriosam voluptatem officiis magnam sequi maiores!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, fugiat porro dolore libero aspernatur tenetur qui ratione deleniti commodi modi accusamus maiores iure ipsa, tempore necessitatibus rerum eligendi quidem voluptates!</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="perfect-scrollbar-example">
|
||||
<!-- content goes here -->
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
<figure class="highlight" id="Default2">
|
||||
<pre><code class="language-css"><script type="script/prism-html-markup"><!-- css -->
|
||||
.perfect-scrollbar-example {
|
||||
position: relative;
|
||||
max-height: 250px;
|
||||
}</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default2">copy</button>
|
||||
</figure>
|
||||
<figure class="highlight" id="Default3">
|
||||
<pre><code class="language-javascript"><script type="script/prism-html-markup">// javascript
|
||||
var scrollbarExample = new PerfectScrollbar('.perfect-scrollbar-example');</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default3">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Example</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/demo.js') }}"></script>
|
||||
@endpush
|
||||
238
resources/views/pages/ui-components/scrollspy.blade.php
Executable file
238
resources/views/pages/ui-components/scrollspy.blade.php
Executable file
@ -0,0 +1,238 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Scrollspy</h1>
|
||||
<p class="lead">Navigation or list group components based on scroll position to indicate which link is currently active in the viewport. Read the <a href="https://getbootstrap.com/docs/5.3/components/scrollspy/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example in navbar</h4>
|
||||
<p class="mb-3">Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.</p>
|
||||
<div class="example">
|
||||
<nav id="navbar-example1" class="navbar navbar-light bg-light shadow-none">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#one">one</a>
|
||||
<a class="dropdown-item" href="#two">two</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item active" href="#three">three</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example1" data-bs-offset="0" class="scrollspy-example">
|
||||
<h4 id="fat">@fat</h4>
|
||||
<p class="mb-4">Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<h4 id="mdo">@mdo</h4>
|
||||
<p class="mb-4">Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
|
||||
<h4 id="one">one</h4>
|
||||
<p class="mb-4">Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
|
||||
<h4 id="two">two</h4>
|
||||
<p class="mb-4">In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
|
||||
<h4 id="three">three</h4>
|
||||
<p class="mb-4">Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav id="navbar-example1" class="navbar navbar-light bg-light shadow-none">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#one">one</a>
|
||||
<a class="dropdown-item" href="#two">two</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#three">three</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0">
|
||||
<h4 id="fat">@fat</h4>
|
||||
<p>...</p>
|
||||
<h4 id="mdo">@mdo</h4>
|
||||
<p>...</p>
|
||||
<h4 id="one">one</h4>
|
||||
<p>...</p>
|
||||
<h4 id="two">two</h4>
|
||||
<p>...</p>
|
||||
<h4 id="three">three</h4>
|
||||
<p>...</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="nestedNav">Example with nested nav</h4>
|
||||
<p class="mb-3">Scrollspy also works with nested <code>.nav</code>s. If a nested <code>.nav</code> is <code>.active</code>, its parents will also be <code>.active</code>. Scroll the area next to the navbar and watch the active class change.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-3">
|
||||
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch shadow-none">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link active" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-6 col-md-9">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2">
|
||||
<h4 id="item-1">Item 1</h4>
|
||||
<p class="mb-4">Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
|
||||
<h5 id="item-1-1">Item 1-1</h5>
|
||||
<p class="mb-4">Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.</p>
|
||||
<h5 id="item-1-2">Item 1-2</h5>
|
||||
<p class="mb-4">Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.</p>
|
||||
<h4 id="item-2">Item 2</h4>
|
||||
<p class="mb-4">Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
|
||||
<h4 id="item-3">Item 3</h4>
|
||||
<p class="mb-4">Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
|
||||
<h5 id="item-3-1">Item 3-1</h5>
|
||||
<p class="mb-4">Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.</p>
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p class="mb-4">Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="NestedNav">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch shadow-none">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0">
|
||||
<h4 id="item-1">Item 1</h4>
|
||||
<p>...</p>
|
||||
<h5 id="item-1-1">Item 1-1</h5>
|
||||
<p>...</p>
|
||||
<h5 id="item-1-2">Item 1-2</h5>
|
||||
<p>...</p>
|
||||
<h4 id="item-2">Item 2</h4>
|
||||
<p>...</p>
|
||||
<h4 id="item-3">Item 3</h4>
|
||||
<p>...</p>
|
||||
<h5 id="item-3-1">Item 3-1</h5>
|
||||
<p>...</p>
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p>...</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#NestedNav">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="listGroup">Example with list-group</h4>
|
||||
<p class="mb-3">Scrollspy also works with <code>.list-group</code>s. Scroll the area next to the list group and watch the active class change.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div id="list-example" class="list-group">
|
||||
<a class="list-group-item list-group-item-action active" href="#list-item-1">Item 1</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example">
|
||||
<h4 id="list-item-1">Item 1</h4>
|
||||
<p class="mb-4">Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
|
||||
<h4 id="list-item-2">Item 2</h4>
|
||||
<p class="mb-4">Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
|
||||
<h4 id="list-item-3">Item 3</h4>
|
||||
<p class="mb-4">Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
|
||||
<h4 id="list-item-4">Item 4</h4>
|
||||
<p class="mb-4">Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="ListGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="list-example" class="list-group">
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
|
||||
</div>
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example">
|
||||
<h4 id="list-item-1">Item 1</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-2">Item 2</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-3">Item 3</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-4">Item 4</h4>
|
||||
<p>...</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#ListGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">With navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#nestedNav" class="nav-link">With nested nav</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#listGroup" class="nav-link">With list-group</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
289
resources/views/pages/ui-components/spinners.blade.php
Executable file
289
resources/views/pages/ui-components/spinners.blade.php
Executable file
@ -0,0 +1,289 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Spinner</h1>
|
||||
<p class="df-lead">Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. Read the <a href="https://getbootstrap.com/docs/5.3/components/spinners/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Border Spinner</h4>
|
||||
<p class="mb-3">Use the border spinners for a lightweight loading indicator.</p>
|
||||
<div class="example">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="colors">Colors</h4>
|
||||
<p class="mb-3">The border spinner uses <code>currentColor</code> for its <code>border-color</code>, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.</p>
|
||||
<div class="example">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-secondary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-success" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-warning" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-info" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-dark" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Colors">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-secondary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-success" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-warning" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-info" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-dark" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Colors">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="growing">Growing spinner</h4>
|
||||
<p class="mb-3">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 class="example">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-secondary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-success" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-warning" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-info" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-dark" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Growing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Growing">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alignment">Alignment</h4>
|
||||
<p class="mb-3">Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.</p>
|
||||
<div class="example">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Alignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex justify-content-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Alignment">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-center">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentFlex">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-center">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentFlex">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="clearfix">
|
||||
<div class="spinner-border float-end" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentFlot">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="clearfix">
|
||||
<div class="spinner-border float-end" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentFlot">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentTextCenter">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentTextCenter">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="size">Size</h4>
|
||||
<p class="mb-3">Add <code>.spinner-border-sm</code> and <code>.spinner-grow-sm</code> to make a smaller spinner that can quickly be used within other components.</p>
|
||||
<div class="example">
|
||||
<div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow spinner-grow-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Size">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow spinner-grow-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Size">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="buttons">Buttons</h4>
|
||||
<p class="mb-3">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 class="example">
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Buttons">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Buttons">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonsB">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonsB">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Border spinner</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#colors" class="nav-link">Colors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#growing" class="nav-link">Growing spinner</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alignment" class="nav-link">Alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#size" class="nav-link">Size</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#buttons" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
257
resources/views/pages/ui-components/tabs.blade.php
Executable file
257
resources/views/pages/ui-components/tabs.blade.php
Executable file
@ -0,0 +1,257 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Tabs</h1>
|
||||
<p class="lead">Use the Bootstrap tab javascript plugin to extend navigational tabs and pills to create tabbable panes of local content. Read the <a href="https://getbootstrap.com/docs/5.3/components/navs/#javascript-behavior" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example</h4>
|
||||
<p class="mb-3">The basic tab component consists of links, that are aligned horizontally.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled" role="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border border-top-0 p-3" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
||||
<h6 class="mb-1">Contact</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="disabled" role="tabpanel" aria-labelledby="disabled-tab">
|
||||
<h6 class="mb-1">disabled</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultTab">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled" role="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border border-top-0 p-3" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
|
||||
<div class="tab-pane fade" id="disabled" role="tabpanel" aria-labelledby="disabled-tab">...</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultTab">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="vertical">Vertical</h4>
|
||||
<p class="mb-3">The tab component that display vertically.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-5 col-md-3 pe-0">
|
||||
<div class="nav nav-tabs nav-tabs-vertical" id="v-tab" role="tablist" aria-orientation="vertical">
|
||||
<a class="nav-link active" id="v-home-tab" data-bs-toggle="tab" href="#v-home" role="tab" aria-controls="v-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="v-profile-tab" data-bs-toggle="tab" href="#v-profile" role="tab" aria-controls="v-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="v-messages-tab" data-bs-toggle="tab" href="#v-messages" role="tab" aria-controls="v-messages" aria-selected="false">Messages</a>
|
||||
<a class="nav-link" id="v-settings-tab" data-bs-toggle="tab" href="#v-settings" role="tab" aria-controls="v-settings" aria-selected="false">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 col-md-9 ps-0">
|
||||
<div class="tab-content tab-content-vertical border p-3" id="v-tabContent">
|
||||
<div class="tab-pane fade show active" id="v-home" role="tabpanel" aria-labelledby="v-home-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. <br> Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-profile" role="tabpanel" aria-labelledby="v-profile-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-messages" role="tabpanel" aria-labelledby="v-messages-tab">
|
||||
<h6 class="mb-1">Messages</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum.<br> Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-settings" role="tabpanel" aria-labelledby="v-settings-tab">
|
||||
<h6 class="mb-1">Settings</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat.<br> Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="verticalTab">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="row">
|
||||
<div class="col-5 col-md-3 pe-0">
|
||||
<div class="nav nav-tabs nav-tabs-vertical" id="v-tab" role="tablist" aria-orientation="vertical">
|
||||
<a class="nav-link active" id="v-home-tab" data-bs-toggle="tab" href="#v-home" role="tab" aria-controls="v-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="v-profile-tab" data-bs-toggle="tab" href="#v-profile" role="tab" aria-controls="v-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="v-messages-tab" data-bs-toggle="tab" href="#v-messages" role="tab" aria-controls="v-messages" aria-selected="false">Messages</a>
|
||||
<a class="nav-link" id="v-settings-tab" data-bs-toggle="tab" href="#v-settings" role="tab" aria-controls="v-settings" aria-selected="false">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 col-md-9 ps-0">
|
||||
<div class="tab-content tab-content-vertical border p-3" id="v-tabContent">
|
||||
<div class="tab-pane fade show active" id="v-home" role="tabpanel" aria-labelledby="v-home-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
<br>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-profile" role="tabpanel" aria-labelledby="v-profile-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-messages" role="tabpanel" aria-labelledby="v-messages-tab">
|
||||
<h6 class="mb-1">Messages</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-settings" role="tabpanel" aria-labelledby="v-settings-tab">
|
||||
<h6 class="mb-1">Settings</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#verticalTab">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="line-variation">Line variation</h4>
|
||||
<p class="mb-3">The tab component that display line indicator for active item.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs nav-tabs-line" id="lineTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-line-tab" data-bs-toggle="tab" data-bs-target="#line-home" role="tab" aria-controls="line-home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-line-tab" data-bs-toggle="tab" data-bs-target="#line-profile" role="tab" aria-controls="line-profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-line-tab" data-bs-toggle="tab" data-bs-target="#line-contact" role="tab" aria-controls="line-contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-line-tab" data-bs-toggle="tab" data-bs-target="#line-disabled" role="tab" aria-controls="line-disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content mt-3" id="lineTabContent">
|
||||
<div class="tab-pane fade show active" id="line-home" role="tabpanel" aria-labelledby="home-line-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="line-profile" role="tabpanel" aria-labelledby="profile-line-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="line-contact" role="tabpanel" aria-labelledby="contact-line-tab">
|
||||
<h6 class="mb-1">Contact</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="line-disabled" role="tabpanel" aria-labelledby="disabled-line-tab">
|
||||
<h6 class="mb-1">disabled</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="lineTabVariation">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs nav-tabs-line" id="lineTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-line-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-line-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-line-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-line-tab" data-bs-toggle="tab" data-bs-target="#disabled" role="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content mt-3" id="lineTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-line-tab">...</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-line-tab">...</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-line-tab">...</div>
|
||||
<div class="tab-pane fade" id="disabled" role="tabpanel" aria-labelledby="disabled-line-tab">...</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#lineTabVariation">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#vertical" class="nav-link">Vertical</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#line-variation" class="nav-link">Line variation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
83
resources/views/pages/ui-components/tooltips.blade.php
Executable file
83
resources/views/pages/ui-components/tooltips.blade.php
Executable file
@ -0,0 +1,83 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Tooltips</h1>
|
||||
<p class="lead">Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. Read the <a href="https://getbootstrap.com/docs/5.3/components/tooltips/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="enable">Enable tooltips everywhere</h4>
|
||||
<p class="mb-3">One way to initialize all tooltips on a page would be to select them by their <code>data-bs-toggle</code> attribute:</p>
|
||||
<figure class="highlight" id="Enable">
|
||||
<pre><code class="language-javascript"><script type="script/prism-html-markup">var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Enable">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example</h4>
|
||||
<p class="mb-3">Hover over the links below to see tooltips.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" 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 mb-1 mb-md-0" 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 mb-1 mb-md-0" 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 mb-1 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
Tooltip with HTML
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><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>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
Tooltip with HTML
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#enable" class="nav-link">Enable</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Example</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user