templates/offcanvas/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Offcanvas</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">UI Elements</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Offcanvas</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW -->
  20.                             <div class="row">
  21.                                 <div class="col-lg-12">
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Offcanvas Demo</h3>
  25.                                         </div>
  26.                                         <div class="card-body">
  27.                                             <div class="text-wrap">
  28.                                                 <p>Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.</p>
  29.                                                 <div class="example">
  30.                                                     <div class="btn-list">
  31.                                                         <a aria-controls="offcanvas-1" class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvas-1" role="button">Link with href</a>
  32.                                                         <button aria-controls="offcanvas-1" class="btn btn-info" data-bs-target="#offcanvas-1" data-bs-toggle="offcanvas" type="button">Button with data-bs-target</button>
  33.                                                     </div>
  34.                                                 </div>
  35.                                             </div>
  36.                                         </div>
  37.                                     </div>
  38.                                 </div>
  39.                                 <div class="col-lg-12">
  40.                                     <div class="card">
  41.                                         <div class="card-header border-bottom">
  42.                                             <h3 class="card-title">Offcanvas Placements</h3>
  43.                                         </div>
  44.                                         <div class="card-body">
  45.                                             <div class="text-wrap">
  46.                                                 <p>Use <code class="highlighter-rouge">.offcanvas-start</code> <code class="highlighter-rouge">.offcanvas-top</code> <code class="highlighter-rouge">.offcanvas-end</code> <code class="highlighter-rouge">.offcanvas-bottom</code> these modified classes to change Offcanvas Placement respectively.</p>
  47.                                                 <div class="example">
  48.                                                     <div class="btn-list">
  49.                                                         <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">Toggle Left Offcanvas</button>
  50.                                                         <button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle Top Offcanvas</button>
  51.                                                         <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">Toggle Right Offcanvas</button>
  52.                                                         <button class="btn btn-warning" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle Bottom Offcanvas</button>
  53.                                                     </div>
  54.                                                 </div>
  55.                                             </div>
  56.                                         </div>
  57.                                     </div>
  58.                                 </div>
  59.                                 <div class="col-lg-12">
  60.                                     <div class="card">
  61.                                         <div class="card-header border-bottom">
  62.                                             <h3 class="card-title">Offcanvas Scrolling Options</h3>
  63.                                         </div>
  64.                                         <div class="card-body">
  65.                                             <div class="text-wrap">
  66.                                                 <p>Scrolling the <code class="highlighter-rouge">&lt;body&gt;</code> element is disabled when an offcanvas and its backdrop are visible. Use the <code class="highlighter-rouge">data-bs-scroll</code> attribute to toggle scrolling and <code class="highlighter-rouge">data-bs-backdrop</code> to toggle the backdrop.</p>
  67.                                                 <div class="example">
  68.                                                     <div class="btn-list">
  69.                                                         <button aria-controls="offcanvasScrolling" class="btn btn-gray" data-bs-target="#offcanvasScrolling" data-bs-toggle="offcanvas" type="button">Enable body scrolling</button>
  70.                                                         <button aria-controls="offcanvasWithBackdrop" class="btn btn-primary" data-bs-target="#offcanvasWithBackdrop" data-bs-toggle="offcanvas" type="button">Enable backdrop (default)</button>
  71.                                                         <button aria-controls="offcanvasWithBothOptions" class="btn btn-gray-dark" data-bs-target="#offcanvasWithBothOptions" data-bs-toggle="offcanvas" type="button">scrolling & backdrop</button>
  72.                                                     </div>
  73.                                                 </div>
  74.                                             </div>
  75.                                         </div>
  76.                                     </div>
  77.                                 </div>
  78.                             </div>
  79.                             <!-- END ROW -->
  81.                             <!-- OFFCANVAS DEMO -->
  82.                             <div aria-labelledby="offcanvas-1Label" class="offcanvas offcanvas-start" id="offcanvas-1" tabindex="-1">
  83.                                 <div class="offcanvas-header">
  84.                                     <h5 class="offcanvas-title" id="offcanvas-1Label">Offcanvas</h5>
  85.                                     <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"><span aria-hidden="true">&times;</span></button>
  86.                                 </div>
  87.                                 <div class="offcanvas-body">
  88.                                     <div>
  89.                                         <p class="text-muted">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
  90.                                     </div>
  91.                                     <div class="dropdown mt-3">
  92.                                         <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  93.                                             Dropdown<span class="caret"></span>
  94.                                         </button>
  95.                                         <ul class="dropdown-menu" role="menu">
  96.                                             <li><a href="#">Action</a></li>
  97.                                             <li><a href="#">Another action</a></li>
  98.                                             <li><a href="#">Something else here</a></li>
  99.                                         </ul>
  100.                                     </div>
  101.                                 </div>
  102.                             </div>
  104.                             <!-- OFFCANVAS PLACEMENT-LEFT -->
  105.                             <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart" aria-labelledby="offcanvasStartLabel">
  106.                                 <div class="offcanvas-header">
  107.                                     <h5 id="offcanvasStartLabel">Offcanvas Left</h5>
  108.                                     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  109.                                 </div>
  110.                                 <div class="offcanvas-body">
  111.                                     ...
  112.                                 </div>
  113.                             </div>
  115.                             <!-- OFFCANVAS PLACEMENT-TOP -->
  116.                             <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  117.                                 <div class="offcanvas-header">
  118.                                     <h5 id="offcanvasTopLabel">Offcanvas Top</h5>
  119.                                     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  120.                                 </div>
  121.                                 <div class="offcanvas-body">
  122.                                     ...
  123.                                 </div>
  124.                             </div>
  126.                             <!-- OFFCANVAS PLACEMENT-RIGHT -->
  127.                             <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
  128.                                 <div class="offcanvas-header">
  129.                                     <h5 id="offcanvasEndLabel">Offcanvas Right</h5>
  130.                                     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  131.                                 </div>
  132.                                 <div class="offcanvas-body">
  133.                                     ...
  134.                                 </div>
  135.                             </div>
  137.                             <!-- OFFCANVAS PLACEMENT-BOTTOM -->
  138.                             <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  139.                                 <div class="offcanvas-header">
  140.                                     <h5 id="offcanvasBottomLabel">Offcanvas Bottom</h5>
  141.                                     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  142.                                 </div>
  143.                                 <div class="offcanvas-body">
  144.                                     ...
  145.                                 </div>
  146.                             </div>
  148.                             <!-- OFFCANVAS BODY SCROLL -->
  149.                             <div aria-labelledby="offcanvasScrollingLabel" class="offcanvas offcanvas-start" data-bs-backdrop="false" data-bs-scroll="true" id="offcanvasScrolling" tabindex="-1">
  150.                                 <div class="offcanvas-header">
  151.                                     <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5><button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"><span aria-hidden="true">&times;</span></button>
  152.                                 </div>
  153.                                 <div class="offcanvas-body">
  154.                                     <p class="text-muted">Try scrolling the rest of the page to see this option in action.</p>
  155.                                 </div>
  156.                             </div>
  158.                             <!-- OFFCANVAS BACKDROP SCROLL -->
  159.                             <div aria-labelledby="offcanvasWithBackdropLabel" class="offcanvas offcanvas-start" id="offcanvasWithBackdrop" tabindex="-1">
  160.                                 <div class="offcanvas-header">
  161.                                     <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5><button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"><span aria-hidden="true">&times;</span></button>
  162.                                 </div>
  163.                                 <div class="offcanvas-body">
  164.                                     <p>.....</p>
  165.                                 </div>
  166.                             </div>
  168.                             <!-- OFFCANVAS BOTH SCROLL -->
  169.                             <div aria-labelledby="offcanvasWithBothOptionsLabel" class="offcanvas offcanvas-start" data-bs-scroll="true" id="offcanvasWithBothOptions" tabindex="-1">
  170.                                 <div class="offcanvas-header">
  171.                                     <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5><button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"><span aria-hidden="true">&times;</span></button>
  172.                                 </div>
  173.                                 <div class="offcanvas-body">
  174.                                     <p class="text-muted">Try scrolling the rest of the page to see this option in action.</p>
  175.                                 </div>
  176.                             </div>
  178. {% endblock %}