آف کینوس

کچھ کلاسز اور ہمارے 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">Backdroped 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مواد کو چھپاتا ہے
.offcanvas.showمواد دکھاتا ہے۔
.offcanvas-startآف کینوس کو بائیں طرف چھپاتا ہے۔
.offcanvas-endآف کینوس کو دائیں طرف چھپاتا ہے۔
.offcanvas-bottomآف کینوس کو نیچے چھپاتا ہے۔

انتساب کے ساتھ ایک برخاست بٹن شامل کریں data-bs-dismiss="offcanvas"، جو JavaScript کی فعالیت کو متحرک کرتا ہے۔ <button>تمام آلات پر مناسب برتاؤ کے لیے اس کے ساتھ عنصر کا استعمال یقینی بنائیں ۔

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

Add data-bs-toggle="offcanvas" and a data-bs-target or href to the element to automatically assign control of one offcanvas element. The data-bs-target attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class offcanvas to the offcanvas element. If you’d like it to default open, add the additional class show.

Via JavaScript

Enable manually with:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-backdrop="".

Name	Type	Default	Description
`backdrop`	boolean	`true`	Apply a backdrop on body while offcanvas is open
`keyboard`	boolean	`true`	Closes the offcanvas when escape key is pressed
`scroll`	boolean	`false`	Allow body scrolling while offcanvas is open

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

Activates your content as an offcanvas element. Accepts an optional options object.

You can create an offcanvas instance with the constructor, for example:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Method	Description
`toggle`	Toggles an offcanvas element to shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden (i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs).
`show`	Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the `shown.bs.offcanvas` event occurs).
`hide`	Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the `hidden.bs.offcanvas` event occurs).
`getInstance`	Static method which allows you to get the offcanvas instance associated with a DOM element
`getOrCreateInstance`	Static method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn’t initialised

Events

Bootstrap’s offcanvas class exposes a few events for hooking into offcanvas functionality.

Event type	Description
`show.bs.offcanvas`	This event fires immediately when the `show` instance method is called.
`shown.bs.offcanvas`	This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).
`hide.bs.offcanvas`	This event is fired immediately when the `hide` method has been called.
`hidden.bs.offcanvas`	This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

آف کینوس

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

مثالیں

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

آف کینوس

لائیو ڈیمو

آف کینوس

جگہ کا تعین

آف کینوس ٹاپ

آف کینوس حق

آف کینوس نیچے

پس منظر

سکرولنگ کے ساتھ رنگین

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

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

رسائی

سس

متغیرات

استعمال

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

Via JavaScript

Options

Methods

Asynchronous methods and transitions

Events