191 lines
9.3 KiB
PHP
191 lines
9.3 KiB
PHP
@extends('layout.master')
|
||
|
||
@push('plugin-styles')
|
||
<link href="{{ asset('build/plugins/prism-themes/prism-coldark-dark.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">Offcanvas</h1>
|
||
<p class="lead">Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. Read the <a href="https://getbootstrap.com/docs/5.3/components/offcanvas/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||
|
||
<hr>
|
||
|
||
<h4 id="default">Live demo</h4>
|
||
<p class="mb-3">You can use a link with the <code>href</code> attribute, or a button with the <code>data-bs-target</code> attribute. In both cases, the <code>data-bs-toggle="offcanvas"</code> is required.</p>
|
||
<div class="example">
|
||
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
|
||
Link with href
|
||
</a>
|
||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
|
||
Button with data-bs-target
|
||
</button>
|
||
|
||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
|
||
<div class="offcanvas-header">
|
||
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body">
|
||
<div>
|
||
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
|
||
</div>
|
||
<div class="dropdown mt-3">
|
||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||
Dropdown button
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight" id="Default">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
|
||
Link with href
|
||
</a>
|
||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
|
||
Button with data-bs-target
|
||
</button>
|
||
|
||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
|
||
<div class="offcanvas-header">
|
||
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body">
|
||
<div>
|
||
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
|
||
</div>
|
||
<div class="dropdown mt-3">
|
||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||
Dropdown button
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||
</figure>
|
||
|
||
<hr>
|
||
|
||
<h4 id="placement">Placement</h4>
|
||
<p class="mb-3">There’s no default placement for offcanvas components, so you must add one of the modifier classes below.</p>
|
||
<ul class="mb-3">
|
||
<li><code>.offcanvas-start</code> places offcanvas on the left of the viewport (shown above)</li>
|
||
<li><code>.offcanvas-end</code> places offcanvas on the right of the viewport</li>
|
||
<li><code>.offcanvas-top</code> places offcanvas on the top of the viewport</li>
|
||
<li><code>.offcanvas-bottom</code> places offcanvas on the bottom of the viewport</li>
|
||
</ul>
|
||
<p class="mb-3">Try the top, right, and bottom examples out below.</p>
|
||
<div class="example">
|
||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
|
||
|
||
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
|
||
<div class="offcanvas-header">
|
||
<h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body">
|
||
...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight" id="PlacementTop">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
|
||
|
||
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
|
||
<div class="offcanvas-header">
|
||
<h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body">
|
||
...
|
||
</div>
|
||
</div></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#PlacementTop">copy</button>
|
||
</figure>
|
||
|
||
<div class="example">
|
||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
|
||
|
||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
|
||
<div class="offcanvas-header">
|
||
<h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body">
|
||
...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight" id="PlacementRight">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
|
||
|
||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
|
||
<div class="offcanvas-header">
|
||
<h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body">
|
||
...
|
||
</div>
|
||
</div></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#PlacementRight">copy</button>
|
||
</figure>
|
||
|
||
<div class="example">
|
||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
|
||
|
||
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
|
||
<div class="offcanvas-header">
|
||
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body small">
|
||
...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight" id="PlacementBottom">
|
||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
|
||
|
||
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
|
||
<div class="offcanvas-header">
|
||
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body small">
|
||
...
|
||
</div>
|
||
</div></script></code></pre>
|
||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#PlacementBottom">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">Live demo</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#placement" class="nav-link">Placement</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
@endsection
|
||
|
||
@push('plugin-scripts')
|
||
<script src="{{ asset('build/plugins/prismjs/prism.js') }}"></script>
|
||
<script src="{{ asset('build/plugins/clipboard/clipboard.min.js') }}"></script>
|
||
@endpush |