خارج از بوم
با چند کلاس و افزونه جاوا اسکریپت ما، نوارهای کناری مخفی را در پروژه خود برای پیمایش، سبد خرید و موارد دیگر ایجاد کنید.
Offcanvas در بوت استرپمثال
از دکمه های زیر برای نمایش و پنهان کردن یک عنصر offcanvas از طریق جاوا اسکریپت استفاده کنید که .show
کلاس را روی یک عنصر با .offcanvas
کلاس تغییر می دهد.
.offcanvas
محتوا را پنهان می کند (پیش فرض).offcanvas.show
محتوا را نشان می دهد
می توانید از یک پیوند با href
ویژگی یا یک دکمه با data-bs-target
ویژگی استفاده کنید. در هر دو مورد، data-bs-toggle="offcanvas"
لازم است.
خارج از بوم
<a class="btn btn-primary me-1" 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" id="offcanvasExample" tabindex="-1" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5><button class="btn-close text-reset" type="button" 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" id="dropdownMenuButton" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
تعیین سطح
هیچ جای پیشفرضی برای اجزای offcanvas وجود ندارد، بنابراین باید یکی از کلاسهای اصلاحکننده زیر را اضافه کنید.
.offcanvas-top
offcanvas را در بالای درگاه دید قرار می دهد.offcanvas-end
offcanvas را در سمت راست درگاه دید قرار می دهد.offcanvas-start
offcanvas را در سمت چپ درگاه نمایش قرار می دهد (نشان داده شده در بالا).offcanvas-bottom
offcanvas را در پایین درگاه دید قرار می دهد
بالای بوم
Offcanvas درست است
Offcanvas سمت چپ
پایین بوم
<!-- Top Offcanvas-->
<button class="btn btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Top Offcanvas</button>
<div class="offcanvas offcanvas-top" id="offcanvasTop" tabindex="-1" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5><button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">...</div>
</div>
<!-- Right Offcanvas-->
<button class="btn btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Right Offcanvas</button>
<div class="offcanvas offcanvas-end" id="offcanvasRight" tabindex="-1" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5><button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">...</div>
</div>
<!-- Left Offcanvas-->
<button class="btn btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft">Left Offcanvas</button>
<div class="offcanvas offcanvas-start" id="offcanvasLeft" tabindex="-1" aria-labelledby="offcanvasLeftLabel">
<div class="offcanvas-header">
<h5 id="offcanvasLeftLabel">Offcanvas left</h5><button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">...</div>
</div>
<!-- Bottom Offcanvas-->
<button class="btn btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5><button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">...</div>
</div>
پس زمینه
پیمایش <body>
عنصر زمانی غیرفعال میشود که یک offcanvas و پسزمینه آن قابل مشاهده باشد. از data-bs-scroll
ویژگی برای جابجایی <body>
اسکرول و data-bs-backdrop
تغییر پس زمینه استفاده کنید.
رنگی با پیمایش
سعی کنید بقیه صفحه را اسکرول کنید تا این گزینه را در عمل ببینید.
خارج از بوم با پس زمینه
.....
پس زمینه با پیمایش
سعی کنید بقیه صفحه را اسکرول کنید تا این گزینه را در عمل ببینید.
<!-- Enable body scrolling-->
<button class="btn btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<div class="offcanvas offcanvas-start" id="offcanvasScrolling" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5><button class="btn-close text-reset" type="button" 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>
<!-- Enable backdrop -->
<button class="btn btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<div class="offcanvas offcanvas-start" id="offcanvasWithBackdrop" tabindex="-1" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5><button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<!-- Enable both scrolling & backdrop-->
<button class="btn btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" id="offcanvasWithBothOptions" data-bs-scroll="true" tabindex="-1" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5><button class="btn-close text-reset" type="button" 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>