مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
in English

آف کینوس

کچھ کلاسز اور ہمارے JavaScript پلگ ان کے ساتھ نیویگیشن، شاپنگ کارٹس اور مزید کے لیے اپنے پروجیکٹ میں پوشیدہ سائڈ بارز بنائیں۔

یہ کیسے کام کرتا ہے

Offcanvas ایک سائڈبار جزو ہے جسے JavaScript کے ذریعے ویو پورٹ کے بائیں، دائیں، یا نیچے کے کنارے سے ظاہر کرنے کے لیے ٹوگل کیا جا سکتا ہے۔ بٹنوں یا اینکرز کو محرکات کے طور پر استعمال کیا جاتا ہے جو مخصوص عناصر سے منسلک ہوتے ہیں جو آپ ٹوگل کرتے ہیں، اور dataہماری جاوا اسکرپٹ کو استعمال کرنے کے لیے اوصاف کا استعمال کیا جاتا ہے۔

  • Offcanvas کچھ اسی جاوا اسکرپٹ کوڈ کو ماڈلز کے طور پر شیئر کرتا ہے۔ تصوراتی طور پر، وہ کافی ملتے جلتے ہیں، لیکن وہ الگ الگ پلگ ان ہیں۔
  • اسی طرح، آف کینوس کے سٹائل اور ڈائمینشنز کے لیے کچھ سورس ساس متغیر موڈل کے متغیر سے وراثت میں ملے ہیں۔
  • دکھائے جانے پر، آف کینوس میں ایک ڈیفالٹ بیک ڈراپ شامل ہوتا ہے جسے آف کینوس کو چھپانے کے لیے کلک کیا جا سکتا ہے۔
  • ماڈلز کی طرح، ایک وقت میں صرف ایک آف کینوس دکھایا جا سکتا ہے۔

سنو! یہ دیکھتے ہوئے کہ CSS اینیمیشن کو کس طرح ہینڈل کرتا ہے، آپ کسی عنصر کو استعمال marginیا استعمال نہیں کر سکتے۔ اس کے بجائے، کلاس کو ایک آزاد ریپنگ عنصر کے طور پر استعمال کریں۔translate.offcanvas

prefers-reduced-motionاس جزو کا اینیمیشن اثر میڈیا کے استفسار پر منحصر ہے ۔ ہماری ایکسیسبیلٹی دستاویزات کا کم موشن سیکشن دیکھیں ۔

مثالیں

آف کینوس اجزاء

ذیل میں ایک آف کینوس مثال ہے جو بطور ڈیفالٹ (بذریعہ .showon .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"ضروری ہے.

href کے ساتھ لنک کریں۔
آف کینوس
پلیس ہولڈر کے بطور کچھ متن۔ حقیقی زندگی میں آپ کو وہ عناصر مل سکتے ہیں جن کا آپ نے انتخاب کیا ہے۔ جیسے، متن، تصاویر، فہرستیں، وغیرہ۔
<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>
اگرچہ آف کینوس کو برخاست کرنے کے دونوں طریقے معاون ہیں، یاد رکھیں کہ آف کینوس کو باہر سے برخاست کرنا WAI-ARIA موڈل ڈائیلاگ ڈیزائن پیٹرن سے مماثل نہیں ہے ۔ یہ اپنی ذمہ داری پر کریں۔

جاوا اسکرپٹ کے ذریعے

اس کے ساتھ دستی طور پر فعال کریں:

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...
})