From 86b9ce917c1316367e2f38069e7c407dd4140a20 Mon Sep 17 00:00:00 2001
From: Oleksandr Tochonyi <87442259+OleksandrTochonyi@users.noreply.github.com>
Date: Wed, 13 Dec 2023 19:05:48 +0200
Subject: [PATCH] 5218 added bootstrap 5.3 Offcanvas component (#5257)

---
 bootstrap-5-3-new.html | 196 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 196 insertions(+)

diff --git a/bootstrap-5-3-new.html b/bootstrap-5-3-new.html
index cd2016b1f5..cb57d2261e 100644
--- a/bootstrap-5-3-new.html
+++ b/bootstrap-5-3-new.html
@@ -5060,7 +5060,203 @@ <h4>Pills with dropdowns</h4>
 
 
             </div>
+            <div class="doc-space line">
+              <h2 class="block-title">Offcanvas</h2>
+              <div class="html-center">
+                <h4>Live demo</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/offcanvas/#live-demo"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/offcanvas/#live-demo</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <a class="btn btn-primary" id="offcanvas-live-demo-open-link" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
+                  Link with href
+                </a>
+                <button class="btn btn-primary" id="offcanvas-live-demo-open-button" 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>
+              <hr>
+              <div class="html-center">
+                <h4>Body scrolling</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/offcanvas/#body-scrolling"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/offcanvas/#body-scrolling</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <button class="btn btn-primary" id="offcanvas-body-scrolling-open-button" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
+
+                <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
+                  <div class="offcanvas-header">
+                    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                  </div>
+                  <div class="offcanvas-body">
+                    <p>Try scrolling the rest of the page to see this option in action.</p>
+                  </div>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Body scrolling and backdrop</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/offcanvas/#body-scrolling-and-backdrop"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/offcanvas/#body-scrolling-and-backdrop</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <button class="btn btn-primary" id="offcanvas-body-scrolling-and-backdrop-open-button" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
+
+                <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
+                  <div class="offcanvas-header">
+                    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                  </div>
+                  <div class="offcanvas-body">
+                    <p>Try scrolling the rest of the page to see this option in action.</p>
+                  </div>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Static backdrop</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/offcanvas/#static-backdrop"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/offcanvas/#static-backdrop</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <button class="btn btn-primary" id="offcanvas-static-backdrop-open-button" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStaticBackdrop" aria-controls="offcanvasStaticBackdrop">
+                  Toggle static offcanvas
+                </button>
+                
+                <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="offcanvasStaticBackdrop" aria-labelledby="offcanvasStaticBackdropLabel">
+                  <div class="offcanvas-header">
+                    <h5 class="offcanvas-title" id="offcanvasStaticBackdropLabel">Offcanvas</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                  </div>
+                  <div class="offcanvas-body">
+                    <div>
+                      I will not close if you click outside of me.
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Responsive</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/offcanvas/#responsive"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/offcanvas/#responsive</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <button class="btn btn-primary d-lg-none" id="offcanvas-responsive-open-button" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
+
+                <div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
+                
+                <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
+                  <div class="offcanvas-header">
+                    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
+                  </div>
+                  <div class="offcanvas-body">
+                    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
+                  </div>
+                </div>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Placement</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/offcanvas/#placement"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/offcanvas/#placement</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
+                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
+                <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-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 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 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>
+
+
 
+            </div> 
 
           </div>
         </div>