خارج از بوم
با چند کلاس و افزونه جاوا اسکریپت ما، نوارهای کناری مخفی را در پروژه خود برای پیمایش، سبد خرید و موارد دیگر ایجاد کنید.
چگونه کار می کند
Offcanvas یک مؤلفه نوار کناری است که می توان آن را از طریق جاوا اسکریپت تغییر داد تا از لبه سمت چپ، راست یا پایین درگاه نمایش ظاهر شود. دکمهها یا لنگرها بهعنوان محرکهایی استفاده میشوند که به عناصر خاصی که شما تغییر میدهید متصل میشوند، و data
از ویژگیها برای فراخوانی جاوا اسکریپت ما استفاده میشود.
- Offcanvas برخی از کدهای جاوا اسکریپت مشابه را به عنوان مدال به اشتراک می گذارد. از نظر مفهومی، آنها کاملاً مشابه هستند، اما پلاگین های جداگانه ای هستند.
- به طور مشابه، برخی از متغیرهای منبع Sass برای سبکها و ابعاد offcanvas از متغیرهای modal به ارث رسیدهاند.
- وقتی نشان داده میشود، offcanvas شامل یک پسزمینه پیشفرض است که میتوان روی آن کلیک کرد تا offcanvas پنهان شود.
- مشابه حالتهای مدال، در هر بار فقط یک offcanvas قابل نمایش است.
سر بالا! با توجه به اینکه CSS چگونه انیمیشن ها را مدیریت می کند، نمی توانید از یک عنصر margin
یا translate
روی یک .offcanvas
عنصر استفاده کنید. در عوض، از کلاس به عنوان یک عنصر بسته بندی مستقل استفاده کنید.
prefers-reduced-motion
اثر انیمیشن این مؤلفه به پرسش رسانه
بستگی دارد
. بخش
حرکت کاهش یافته اسناد دسترسی ما را ببینید.
مثال ها
اجزای Offcanvas
در زیر یک مثال offcanvas است که به طور پیش فرض (از طریق .show
روی .offcanvas
) نشان داده شده است. Offcanvas شامل پشتیبانی از یک هدر با دکمه بستن و یک کلاس بدنه اختیاری برای مقدار اولیه padding
است. پیشنهاد میکنیم در صورت امکان، سرصفحههای offcanvas را با کنشهای رد کردن اضافه کنید، یا یک اقدام رد کردن صریح ارائه دهید.
خارج از بوم
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>
نسخه ی نمایشی زنده
از دکمه های زیر برای نمایش و پنهان کردن یک عنصر offcanvas از طریق جاوا اسکریپت استفاده کنید که .show
کلاس را روی یک عنصر با .offcanvas
کلاس تغییر می دهد.
.offcanvas
محتوا را پنهان می کند (پیش فرض).offcanvas.show
محتوا را نشان می دهد
می توانید از یک پیوند با href
ویژگی یا یک دکمه با data-bs-target
ویژگی استفاده کنید. در هر دو مورد، data-bs-toggle="offcanvas"
لازم است.
خارج از بوم
<a class="btn btn-primary" 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" 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 text-reset" 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" id="dropdownMenuButton" 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-start
offcanvas را در سمت چپ درگاه نمایش قرار می دهد (نشان داده شده در بالا).offcanvas-end
offcanvas را در سمت راست درگاه دید قرار می دهد.offcanvas-top
offcanvas را در بالای درگاه دید قرار می دهد.offcanvas-bottom
offcanvas را در پایین درگاه دید قرار می دهد
نمونه های بالا، سمت راست و پایین را در زیر امتحان کنید.
بالای بوم
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Offcanvas درست است
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
پایین بوم
<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-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 text-reset" 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
تغییر پس زمینه استفاده کنید.
رنگی با پیمایش
سعی کنید بقیه صفحه را اسکرول کنید تا این گزینه را در عمل ببینید.
خارج از بوم با پس زمینه
.....
پس زمینه با پیمایش
سعی کنید بقیه صفحه را اسکرول کنید تا این گزینه را در عمل ببینید.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" 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" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" 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 class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<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 text-reset" 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>
دسترسی
از آنجایی که پانل offcanvas از نظر مفهومی یک گفتگوی مودال است، حتماً aria-labelledby="..."
-با ارجاع به عنوان offcanvas- به .offcanvas
. توجه داشته باشید که نیازی به اضافه کردن ندارید role="dialog"
زیرا ما قبلاً آن را از طریق جاوا اسکریپت اضافه کرده ایم.
ساس
متغیرها
$offcanvas-padding-y: $modal-inner-padding;
$offcanvas-padding-x: $modal-inner-padding;
$offcanvas-horizontal-width: 400px;
$offcanvas-vertical-height: 30vh;
$offcanvas-transition-duration: .3s;
$offcanvas-border-color: $modal-content-border-color;
$offcanvas-border-width: $modal-content-border-width;
$offcanvas-title-line-height: $modal-title-line-height;
$offcanvas-bg-color: $modal-content-bg;
$offcanvas-color: $modal-content-color;
$offcanvas-box-shadow: $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg: $modal-backdrop-bg;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity;
استفاده
افزونه offcanvas از چند کلاس و ویژگی برای انجام کارهای سنگین استفاده می کند:
.offcanvas
محتوا را پنهان می کند.offcanvas.show
محتوا را نشان می دهد.offcanvas-start
بوم را در سمت چپ پنهان می کند.offcanvas-end
بوم را در سمت راست پنهان می کند.offcanvas-bottom
بوم را در پایین پنهان می کند
یک دکمه رد کردن با data-bs-dismiss="offcanvas"
ویژگی اضافه کنید، که عملکرد جاوا اسکریپت را فعال می کند. حتماً از <button>
عنصر با آن برای رفتار مناسب در همه دستگاهها استفاده کنید.
از طریق ویژگی های داده
تغییر وضعیت
اضافه کردن data-bs-toggle="offcanvas"
و data-bs-target
یا href
به عنصر برای اختصاص خودکار کنترل یک عنصر offcanvas. این data-bs-target
ویژگی یک انتخابگر CSS را برای اعمال offcanvas می پذیرد. حتماً کلاس offcanvas
را به عنصر offcanvas اضافه کنید. اگر میخواهید بهطور پیشفرض باز شود، کلاس اضافی را اضافه کنید show
.
رد
رد کردن را می توان با data
ویژگی روی دکمه ای در داخل offcanvas به دست آورد که در زیر نشان داده شده است:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
یا روی دکمه ای خارج از کانواس با استفاده از موارد data-bs-target
زیر نشان داده شده است:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
از طریق جاوا اسکریپت
فعال کردن دستی با:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
گزینه ها
گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-bs-
برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-bs-backdrop=""
.
نام | تایپ کنید | پیش فرض | شرح |
---|---|---|---|
backdrop |
بولی | true |
در حالی که offcanvas باز است، یک پسزمینه روی بدنه اعمال کنید |
keyboard |
بولی | true |
هنگامی که کلید فرار فشار داده می شود، offcanvas را می بندد |
scroll |
بولی | false |
هنگامی که صفحه خارج از بوم باز است، به پیمایش بدنه اجازه دهید |
مواد و روش ها
روش ها و انتقال های ناهمزمان
همه متدهای API ناهمزمان هستند و یک انتقال را شروع می کنند . آنها به محض شروع انتقال اما قبل از پایان آن به تماس گیرنده باز می گردند . علاوه بر این، فراخوانی متد بر روی یک جزء انتقال نادیده گرفته خواهد شد .
محتوای شما را به عنوان یک عنصر offcanvas فعال می کند. یک گزینه اختیاری را می پذیرد object
.
می توانید یک نمونه offcanvas با سازنده ایجاد کنید، به عنوان مثال:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
روش | شرح |
---|---|
toggle |
یک عنصر offcanvas را به نشان داده یا پنهان تغییر می دهد. قبل از اینکه عنصر offcanvas واقعاً نشان داده یا پنهان شود (یعنی قبل از اینکه رویداد shown.bs.offcanvas یا hidden.bs.offcanvas رخ دهد) به تماس گیرنده برمی گردد. |
show |
یک عنصر offcanvas را نشان می دهد. قبل از اینکه عنصر offcanvas واقعاً نشان داده شود (یعنی قبل از shown.bs.offcanvas وقوع رویداد) به تماس گیرنده برمی گردد. |
hide |
یک عنصر offcanvas را پنهان می کند. قبل از اینکه عنصر offcanvas واقعاً پنهان شود (یعنی قبل از hidden.bs.offcanvas وقوع رویداد) به تماس گیرنده برمی گردد. |
getInstance |
روش ایستا که به شما امکان می دهد نمونه offcanvas مرتبط با یک عنصر DOM را دریافت کنید |
getOrCreateInstance |
روش ایستا که به شما امکان می دهد نمونه offcanvas مرتبط با یک عنصر DOM را دریافت کنید یا در صورتی که اولیه نشده بود، یک نمونه جدید ایجاد کنید. |
مناسبت ها
کلاس offcanvas بوت استرپ چند رویداد را برای اتصال به عملکرد offcanvas نشان می دهد.
نوع رویداد | شرح |
---|---|
show.bs.offcanvas |
این رویداد بلافاصله پس از show فراخوانی متد نمونه فعال می شود. |
shown.bs.offcanvas |
این رویداد زمانی فعال می شود که یک عنصر offcanvas برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال CSS می شود). |
hide.bs.offcanvas |
این رویداد بلافاصله پس از hide فراخوانی متد اجرا می شود. |
hidden.bs.offcanvas |
این رویداد زمانی فعال می شود که یک عنصر offcanvas از کاربر پنهان شده باشد (منتظر تکمیل انتقال CSS می شود). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})