Files
tabler/core/js/tests/visual/offcanvas.html
T

32 lines
1.3 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../../dist/css/tabler.min.css" rel="stylesheet">
<title>Offcanvas</title>
</head>
<body>
<div class="container py-4">
<h1>Offcanvas <small>Tabler Visual Test</small></h1>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Toggle offcanvas
</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">
<p>Content for the offcanvas. You can use <code>data-bs-toggle="offcanvas"</code> or <code>data-tblr-toggle="offcanvas"</code>.</p>
</div>
</div>
</div>
<script src="../../../dist/js/tabler.min.js"></script>
<script>window.bootstrap = window.tabler && window.tabler.bootstrap || {};</script>
</body>
</html>