205 lines
8.8 KiB
PHP
Executable File
205 lines
8.8 KiB
PHP
Executable File
@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 |