Skip to content

Commit

Permalink
5218 added bootstrap 5.3 Offcanvas component (#5257)
Browse files Browse the repository at this point in the history
  • Loading branch information
@OleksandrTochonyi
OleksandrTochonyi authored Dec 13, 2023
1 parent 1bf9c7d commit 86b9ce9
Showing 1 changed file with 196 additions and 0 deletions.
196 changes: 196 additions & 0 deletions bootstrap-5-3-new.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 86b9ce9

Please sign in to comment.