in English

آف کینوس

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

اس صفحہ پر

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

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

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

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

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

مثالیں

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

ذیل میں ایک آف کینوس مثال ہے جو بطور ڈیفالٹ (بذریعہ .showon .offcanvas) دکھائی جاتی ہے۔ آف کینوس میں قریبی بٹن والے ہیڈر کے لیے سپورٹ اور کچھ ابتدائی کے لیے ایک اختیاری باڈی کلاس paddingشامل ہے۔ ہم تجویز کرتے ہیں کہ جب بھی ممکن ہو آپ برخاست کرنے کی کارروائیوں کے ساتھ آف کینوس ہیڈر شامل کریں، یا واضح طور پر برخاست کرنے کی کارروائی فراہم کریں۔

آف کینوس کے لیے مواد یہاں جاتا ہے۔ آپ یہاں تقریباً کوئی بوٹسٹریپ جزو یا حسب ضرورت عناصر رکھ سکتے ہیں۔

html

<div class="offcanvas offcanvas-start show" 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" 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 کے ساتھ لنک کریں۔

پلیس ہولڈر کے بطور کچھ متن۔ حقیقی زندگی میں آپ کو وہ عناصر مل سکتے ہیں جن کا آپ نے انتخاب کیا ہے۔ جیسے، متن، تصاویر، فہرستیں، وغیرہ۔

html

<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" 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>

باڈی سکرولنگ

آف کینوس اور اس کا پس منظر نظر آنے پر <body>عنصر کو اسکرول کرنا غیر فعال کر دیا جاتا ہے۔ اسکرولنگ data-bs-scrollکو فعال کرنے کے لیے انتساب کا استعمال کریں ۔<body>

اس اختیار کو عملی شکل میں دیکھنے کے لیے باقی صفحہ کو اسکرول کرنے کی کوشش کریں۔

html

<button class="btn btn-primary" 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>

باڈی سکرولنگ اور بیک ڈراپ

<body>آپ مرئی بیک ڈراپ کے ساتھ اسکرولنگ کو بھی فعال کر سکتے ہیں ۔

اس اختیار کو عملی شکل میں دیکھنے کے لیے باقی صفحہ کو اسکرول کرنے کی کوشش کریں۔

html

<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" 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>

جامد پس منظر

جب بیک ڈراپ کو جامد پر سیٹ کیا جاتا ہے، تو اس کے باہر کلک کرنے پر آف کینوس بند نہیں ہوگا۔

اگر آپ میرے باہر کلک کریں تو میں بند نہیں کروں گا۔

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">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>

گہرا آف کینوس

v5.2.0 میں شامل کیا گیا۔

افادیت کے ساتھ آف کینوس کی ظاہری شکل کو تبدیل کریں تاکہ انہیں مختلف سیاق و سباق جیسے تاریک نیوبارز سے بہتر طریقے سے ملایا جا سکے۔ یہاں ہم گہرے آف کینوس کے ساتھ مناسب اسٹائل کے لیے اور ٹو میں اضافہ .text-bg-darkکرتے ہیں ۔ اگر آپ کے اندر ڈراپ ڈاؤن ہیں، تو میں شامل کرنے پر بھی غور کریں ۔.offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

آف کینوس مواد یہاں رکھیں۔

html

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

جوابدہ

v5.2.0 میں شامل کیا گیا۔

ریسپانسیو آف کینوس کلاسز مواد کو ویو پورٹ کے باہر ایک مخصوص بریک پوائنٹ اور نیچے سے چھپاتے ہیں۔ اس بریک پوائنٹ کے اوپر، اندر موجود مواد معمول کے مطابق برتاؤ کرے گا۔ مثال کے طور پر، مواد کو آف کینوس میں بریک پوائنٹ کے .offcanvas-lgنیچے چھپاتا ہے lg، لیکن مواد کو lgبریک پوائنٹ کے اوپر دکھاتا ہے۔

ریسپانسیو آف کینوس ٹوگل دکھانے کے لیے اپنے براؤزر کا سائز تبدیل کریں۔

یہ ایک کے اندر موجود مواد ہے .offcanvas-lg۔

html

<button class="btn btn-primary d-lg-none" 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>

ریسپانسیو آف کینوس کلاسز ہر بریک پوائنٹ کے لیے دستیاب ہیں۔

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

جگہ کا تعین

آف کینوس اجزاء کے لیے کوئی ڈیفالٹ پلیسمنٹ نہیں ہے، اس لیے آپ کو ذیل میں ترمیم کرنے والے کلاسز میں سے ایک شامل کرنا چاہیے۔

.offcanvas-startآف کینوس کو ویو پورٹ کے بائیں طرف رکھتا ہے (اوپر دکھایا گیا ہے)
.offcanvas-endآف کینوس کو ویو پورٹ کے دائیں جانب رکھتا ہے۔
.offcanvas-topآف کینوس کو ویو پورٹ کے اوپر رکھتا ہے۔
.offcanvas-bottomآف کینوس کو ویو پورٹ کے نیچے رکھتا ہے۔

ذیل میں اوپر، دائیں اور نیچے کی مثالیں آزمائیں۔

...

html

<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 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>

...

html

<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 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>

...

html

<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

رسائی

چونکہ آف کینوس پینل تصوراتی طور پر ایک موڈل ڈائیلاگ ہے، اس لیے aria-labelledby="..."—آف کینوس ٹائٹل کا حوالہ دیتے ہوئے — کو شامل کرنا یقینی بنائیں .offcanvas۔ نوٹ کریں کہ آپ کو شامل کرنے کی ضرورت نہیں ہے role="dialog"کیونکہ ہم اسے پہلے ہی JavaScript کے ذریعے شامل کر چکے ہیں۔

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیر کے نقطہ نظر کے ایک حصے کے طور پر، offcanvas اب مقامی CSS متغیرات .offcanvasکو بہتر ریئل ٹائم حسب ضرورت کے لیے استعمال کرتا ہے۔ CSS متغیرات کی قدریں Sass کے ذریعے سیٹ کی جاتی ہیں، اس لیے Sass حسب ضرورت اب بھی تعاون یافتہ ہے۔

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass متغیرات

$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-topآف کینوس کو اوپر چھپاتا ہے۔
.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>

اگرچہ آف کینوس کو برخاست کرنے کے دونوں طریقے معاون ہیں، یاد رکھیں کہ آف کینوس کے باہر سے برخاست کرنا ARIA تصنیف کی مشق گائیڈ ڈائیلاگ (موڈل) پیٹرن سے میل نہیں کھاتا ۔ یہ اپنی ذمہ داری پر کریں۔

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

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

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

اختیارات

چونکہ آپشنز کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے، آپ ایک آپشن کا نام شامل کر سکتے ہیں data-bs-، جیسا کہ میں data-bs-animation="{value}"۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے نام کی کیس ٹائپ کو " کیمل کیس" سے " کباب کیس " میں تبدیل کرنا یقینی بنائیں۔ مثال کے طور پر، کے data-bs-custom-class="beautifier"بجائے استعمال کریں data-bs-customClass="beautifier"۔

بوٹسٹریپ 5.2.0 کے مطابق، تمام اجزاء ایک تجرباتی محفوظ ڈیٹا وصف کو سپورٹ کرتے data-bs-configہیں جو JSON سٹرنگ کے طور پر سادہ اجزاء کی ترتیب کو رکھ سکتا ہے۔ جب ایک عنصر data-bs-config='{"delay":0, "title":123}'اور data-bs-title="456"صفات ہوں گے تو حتمی titleقدر ہوگی 456اور علیحدہ ڈیٹا انتسابات پر دی گئی قدروں کو اوور رائڈ کریں گے data-bs-config۔ اس کے علاوہ، موجودہ ڈیٹا کے اوصاف JSON کی قدریں رکھنے کے قابل ہیں جیسے data-bs-delay='{"show":0,"hide":150}'۔

نام	قسم	طے شدہ	تفصیل
`backdrop`	بولین یا تار`static`	`true`	جب آف کینوس کھلا ہو تو باڈی پر بیک ڈراپ لگائیں۔ متبادل کے طور پر، `static`ایک ایسے پس منظر کی وضاحت کریں جو کلک کرنے پر آف کینوس کو بند نہ کرے۔
`keyboard`	بولین	`true`	Escape کلید کو دبانے پر آف کینوس کو بند کر دیتا ہے۔
`scroll`	بولین	`false`	آف کینوس کے کھلے ہونے پر باڈی سکرولنگ کی اجازت دیں۔

طریقے

غیر مطابقت پذیر طریقے اور ٹرانزیشن

تمام API طریقے غیر مطابقت پذیر ہیں اور ایک منتقلی شروع کرتے ہیں ۔ منتقلی شروع ہوتے ہی وہ کال کرنے والے کے پاس واپس آ جاتے ہیں لیکن اس کے ختم ہونے سے پہلے ۔ اس کے علاوہ، منتقلی کے جزو پر میتھڈ کال کو نظر انداز کر دیا جائے گا ۔

مزید معلومات کے لیے ہماری جاوا اسکرپٹ دستاویزات دیکھیں ۔

آپ کے مواد کو آف کینوس عنصر کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object۔

آپ کنسٹرکٹر کے ساتھ ایک آف کینوس مثال بنا سکتے ہیں، مثال کے طور پر:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

طریقہ	تفصیل
`getInstance`	جامد طریقہ جو آپ کو ایک DOM عنصر سے وابستہ offcanvas مثال حاصل کرنے کی اجازت دیتا ہے۔
`getOrCreateInstance`	جامد طریقہ جو آپ کو ایک DOM عنصر سے وابستہ offcanvas مثال حاصل کرنے کی اجازت دیتا ہے، یا اس کی ابتدا نہ ہونے کی صورت میں ایک نیا تخلیق کر سکتا ہے۔
`hide`	ایک آف کینوس عنصر کو چھپاتا ہے۔ کال کرنے والے کے پاس واپسی اس سے پہلے کہ آف کینوس عنصر حقیقت میں چھپ جائے (یعنی اس سے پہلے کہ `hidden.bs.offcanvas`واقعہ پیش آئے)۔
`show`	ایک آف کینوس عنصر دکھاتا ہے۔ کال کرنے والے کے پاس واپس آجاتا ہے اس سے پہلے کہ آف کینوس عنصر حقیقت میں دکھایا گیا ہو (یعنی `shown.bs.offcanvas`واقعہ پیش آنے سے پہلے)۔
`toggle`	کسی آف کینوس عنصر کو دکھانے یا چھپنے کے لیے ٹوگل کرتا ہے۔ کال کرنے والے کے پاس واپسی اس سے پہلے کہ آف کینوس عنصر حقیقت میں دکھایا جائے یا چھپ جائے (یعنی `shown.bs.offcanvas`یا `hidden.bs.offcanvas`واقعہ پیش آنے سے پہلے)۔

تقریبات

بوٹسٹریپ کی آف کینوس کلاس آف کینوس کی فعالیت میں شامل ہونے کے لیے چند واقعات کو بے نقاب کرتی ہے۔

واقعہ کی قسم	تفصیل
`hide.bs.offcanvas`	اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب `hide`طریقہ کار کہا جاتا ہے۔
`hidden.bs.offcanvas`	یہ ایونٹ اس وقت برطرف کیا جاتا ہے جب ایک آف کینوس عنصر صارف سے چھپ جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
`hidePrevented.bs.offcanvas`	یہ ایونٹ اس وقت فائر کیا جاتا ہے جب آف کینوس دکھایا جاتا ہے، اس کا بیک ڈراپ ہوتا ہے `static`اور آف کینوس کے باہر ایک کلک کیا جاتا ہے۔ ایونٹ کو اس وقت بھی فائر کیا جاتا ہے جب فرار کی کلید کو دبایا جاتا ہے اور `keyboard`آپشن کو سیٹ کیا جاتا ہے `false`۔
`show.bs.offcanvas`	یہ واقعہ فوری طور پر فائر ہو جاتا ہے جب `show`مثال کا طریقہ کہا جاتا ہے۔
`shown.bs.offcanvas`	اس ایونٹ کو اس وقت برطرف کیا جاتا ہے جب ایک آف کینوس عنصر صارف کے لیے مرئی ہو جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

آف کینوس

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

مثالیں

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

آف کینوس

لائیو ڈیمو

آف کینوس

باڈی سکرولنگ

باڈی سکرولنگ کے ساتھ آف کینوس

باڈی سکرولنگ اور بیک ڈراپ

اسکرولنگ کے ساتھ پس منظر

جامد پس منظر

آف کینوس

گہرا آف کینوس

آف کینوس

جوابدہ

ذمہ دار آف کینوس

جگہ کا تعین

آف کینوس ٹاپ

آف کینوس حق

آف کینوس نیچے

رسائی

سی ایس ایس

متغیرات

Sass متغیرات

استعمال

ڈیٹا اوصاف کے ذریعے

ٹوگل کریں۔

برطرف کرنا

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

اختیارات

طریقے

غیر مطابقت پذیر طریقے اور ٹرانزیشن

تقریبات