آف کینوس
کچھ کلاسز اور ہمارے JavaScript پلگ ان کے ساتھ نیویگیشن، شاپنگ کارٹس اور مزید کے لیے اپنے پروجیکٹ میں پوشیدہ سائڈ بارز بنائیں۔
یہ کیسے کام کرتا ہے
Offcanvas ایک سائڈبار جزو ہے جسے JavaScript کے ذریعے ویو پورٹ کے بائیں، دائیں، یا نیچے کے کنارے سے ظاہر کرنے کے لیے ٹوگل کیا جا سکتا ہے۔ بٹنوں یا اینکرز کو محرکات کے طور پر استعمال کیا جاتا ہے جو مخصوص عناصر سے منسلک ہوتے ہیں جو آپ ٹوگل کرتے ہیں، اور data
ہماری جاوا اسکرپٹ کو استعمال کرنے کے لیے اوصاف کا استعمال کیا جاتا ہے۔
- Offcanvas کچھ اسی جاوا اسکرپٹ کوڈ کو ماڈلز کے طور پر شیئر کرتا ہے۔ تصوراتی طور پر، وہ کافی ملتے جلتے ہیں، لیکن وہ الگ الگ پلگ ان ہیں۔
- اسی طرح، آف کینوس کے سٹائل اور ڈائمینشنز کے لیے کچھ سورس ساس متغیر موڈل کے متغیر سے وراثت میں ملے ہیں۔
- دکھائے جانے پر، آف کینوس میں ایک ڈیفالٹ بیک ڈراپ شامل ہوتا ہے جسے آف کینوس کو چھپانے کے لیے کلک کیا جا سکتا ہے۔
- ماڈلز کی طرح، ایک وقت میں صرف ایک آف کینوس دکھایا جا سکتا ہے۔
سنو! یہ دیکھتے ہوئے کہ CSS اینیمیشن کو کس طرح ہینڈل کرتا ہے، آپ کسی عنصر کو استعمال margin
یا استعمال نہیں کر سکتے۔ اس کے بجائے، کلاس کو ایک آزاد ریپنگ عنصر کے طور پر استعمال کریں۔translate
.offcanvas
prefers-reduced-motion
اس جزو کا اینیمیشن اثر میڈیا کے استفسار
پر منحصر ہے
۔ ہماری ایکسیسبیلٹی دستاویزات کا کم موشن سیکشن دیکھیں
۔
مثالیں
آف کینوس اجزاء
ذیل میں ایک آف کینوس مثال ہے جو بطور ڈیفالٹ (بذریعہ .show
on .offcanvas
) دکھائی جاتی ہے۔ آف کینوس میں قریبی بٹن والے ہیڈر کے لیے سپورٹ اور کچھ ابتدائی کے لیے ایک اختیاری باڈی کلاس padding
شامل ہے۔ ہم تجویز کرتے ہیں کہ جب بھی ممکن ہو آپ برخاست کرنے کی کارروائیوں کے ساتھ آف کینوس ہیڈر شامل کریں، یا واضح طور پر برخاست کرنے کی کارروائی فراہم کریں۔
آف کینوس
<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>
لائیو ڈیمو
جاوا اسکرپٹ کے ذریعے آف کینوس عنصر کو دکھانے اور چھپانے کے لیے نیچے دیئے گئے بٹنوں کا استعمال کریں جو .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-start
آف کینوس کو ویو پورٹ کے بائیں طرف رکھتا ہے (اوپر دکھایا گیا ہے).offcanvas-end
آف کینوس کو ویو پورٹ کے دائیں جانب رکھتا ہے۔.offcanvas-top
آف کینوس کو ویو پورٹ کے اوپر رکھتا ہے۔.offcanvas-bottom
آف کینوس کو ویو پورٹ کے نیچے رکھتا ہے۔
ذیل میں اوپر، دائیں اور نیچے کی مثالیں آزمائیں۔
آف کینوس ٹاپ
<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>
آف کینوس حق
<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>
عنصر کو اسکرول کرنا غیر فعال کر دیا جاتا ہے۔ اسکرولنگ کو ٹوگل کرنے اور بیک ڈراپ کو ٹوگل کرنے کے لیے 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>
رسائی
چونکہ آف کینوس پینل تصوراتی طور پر ایک موڈل ڈائیلاگ ہے، اس لیے aria-labelledby="..."
—آف کینوس ٹائٹل کا حوالہ دیتے ہوئے — کو شامل کرنا یقینی بنائیں .offcanvas
۔ نوٹ کریں کہ آپ کو شامل کرنے کی ضرورت نہیں ہے role="dialog"
کیونکہ ہم اسے پہلے ہی JavaScript کے ذریعے شامل کر چکے ہیں۔
سس
متغیرات
$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.show
مواد دکھاتا ہے۔.offcanvas-start
آف کینوس کو بائیں طرف چھپاتا ہے۔.offcanvas-end
آف کینوس کو دائیں طرف چھپاتا ہے۔.offcanvas-bottom
آف کینوس کو نیچے چھپاتا ہے۔
انتساب کے ساتھ ایک برخاست بٹن شامل کریں data-bs-dismiss="offcanvas"
، جو JavaScript کی فعالیت کو متحرک کرتا ہے۔ <button>
تمام آلات پر مناسب برتاؤ کے لیے اس کے ساتھ عنصر کا استعمال یقینی بنائیں ۔
ڈیٹا اوصاف کے ذریعے
ٹوگل کریں۔
ایک آف کینوس عنصر کا کنٹرول خود بخود تفویض کرنے کے لیے عنصر کو شامل کریں data-bs-toggle="offcanvas"
اور a data-bs-target
یا کو شامل کریں۔ href
آف data-bs-target
کینوس کو لاگو کرنے کے لیے انتساب CSS سلیکٹر کو قبول کرتا ہے۔ کلاس offcanvas
کو آف کینوس عنصر میں شامل کرنا یقینی بنائیں۔ اگر آپ اسے ڈیفالٹ کھولنا چاہتے ہیں تو اضافی کلاس شامل کریں show
۔
برطرف کرنا
برطرفی آف کینوس کے اندرdata
بٹن پر موجود انتساب کے ساتھ حاصل کی جا سکتی ہے جیسا کہ ذیل میں دکھایا گیا ہے:
<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)
})
اختیارات
اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-bs-
، جیسا کہ میں data-bs-backdrop=""
۔
نام | قسم | طے شدہ | تفصیل |
---|---|---|---|
backdrop |
بولین | true |
آف کینوس کھلے ہونے پر باڈی پر بیک ڈراپ لگائیں۔ |
keyboard |
بولین | true |
Escape کلید کو دبانے پر آف کینوس کو بند کر دیتا ہے۔ |
scroll |
بولین | false |
آف کینوس کے کھلے ہونے پر باڈی سکرولنگ کی اجازت دیں۔ |
طریقے
غیر مطابقت پذیر طریقے اور ٹرانزیشن
تمام API طریقے غیر مطابقت پذیر ہیں اور ایک منتقلی شروع کرتے ہیں ۔ منتقلی شروع ہوتے ہی وہ کال کرنے والے کے پاس واپس آ جاتے ہیں لیکن اس کے ختم ہونے سے پہلے ۔ اس کے علاوہ، منتقلی کے جزو پر میتھڈ کال کو نظر انداز کر دیا جائے گا ۔
آپ کے مواد کو آف کینوس عنصر کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object
۔
آپ کنسٹرکٹر کے ساتھ ایک آف کینوس مثال بنا سکتے ہیں، مثال کے طور پر:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
طریقہ | تفصیل |
---|---|
toggle |
کسی آف کینوس عنصر کو دکھانے یا چھپنے کے لیے ٹوگل کرتا ہے۔ کال کرنے والے کے پاس واپسی اس سے پہلے کہ آف کینوس عنصر حقیقت میں دکھایا جائے یا چھپ جائے (یعنی shown.bs.offcanvas یا hidden.bs.offcanvas واقعہ پیش آنے سے پہلے)۔ |
show |
ایک آف کینوس عنصر دکھاتا ہے۔ کال کرنے والے کے پاس واپس آجاتا ہے اس سے پہلے کہ آف کینوس عنصر حقیقت میں دکھایا گیا ہو (یعنی shown.bs.offcanvas واقعہ پیش آنے سے پہلے)۔ |
hide |
ایک آف کینوس عنصر کو چھپاتا ہے۔ کال کرنے والے کے پاس واپسی اس سے پہلے کہ آف کینوس عنصر حقیقت میں چھپ جائے (یعنی اس سے پہلے کہ hidden.bs.offcanvas واقعہ پیش آئے)۔ |
getInstance |
جامد طریقہ جو آپ کو ایک DOM عنصر سے وابستہ offcanvas مثال حاصل کرنے کی اجازت دیتا ہے۔ |
getOrCreateInstance |
جامد طریقہ جو آپ کو ایک DOM عنصر کے ساتھ منسلک offcanvas مثال حاصل کرنے کی اجازت دیتا ہے، یا اس کی ابتدا نہ ہونے کی صورت میں ایک نیا بناتا ہے۔ |
تقریبات
بوٹسٹریپ کی آف کینوس کلاس آف کینوس کی فعالیت میں شامل ہونے کے لیے چند واقعات کو بے نقاب کرتی ہے۔
واقعہ کی قسم | تفصیل |
---|---|
show.bs.offcanvas |
یہ واقعہ فوری طور پر فائر ہو جاتا ہے جب show مثال کا طریقہ کہا جاتا ہے۔ |
shown.bs.offcanvas |
اس ایونٹ کو اس وقت برطرف کیا جاتا ہے جب ایک آف کینوس عنصر صارف کے لیے مرئی ہو جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔ |
hide.bs.offcanvas |
اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب hide طریقہ کار کہا جاتا ہے۔ |
hidden.bs.offcanvas |
یہ ایونٹ اس وقت برطرف کیا جاتا ہے جب ایک آف کینوس عنصر صارف سے چھپ جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔ |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})