مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

آفڪينوس

ڪجھ طبقن ۽ اسان جي JavaScript پلگ ان سان نيويگيشن، شاپنگ ڪارٽون، ۽ وڌيڪ لاءِ پنھنجي پروجيڪٽ ۾ لڪيل سائڊبارز ٺاھيو.

اهو ڪيئن ڪم ڪري ٿو

Offcanvas ھڪڙو سائڊبار جو حصو آھي جنھن کي جاوا اسڪرپٽ ذريعي ٽوگل ڪري سگھجي ٿو ڏسڻ واري پورٽ جي کاٻي، ساڄي، يا ھيٺئين پاسي کان. بٽڻ يا اينڪرز استعمال ڪيا ويندا آھن محرڪ جيڪي مخصوص عناصر سان جڙيل آھن جيڪي توھان ٽوگل ڪندا آھن، ۽ dataخاصيتون استعمال ڪيون وينديون آھن اسان جي JavaScript کي سڏڻ لاءِ.

  • Offcanvas شيئر ڪري ٿو ڪجھ ساڳيو جاوا اسڪرپٽ ڪوڊ ماڊلز جي طور تي. تصوراتي طور تي، اهي ڪافي هڪجهڙا آهن، پر اهي الڳ الڳ پلگ ان آهن.
  • اهڙيءَ طرح، آفڪينوس جي طرز ۽ طول و عرض لاءِ ڪجهه ماخذ Sass متغير ماڊل جي متغيرن مان ورثي ۾ مليا آهن.
  • جڏهن ڏيکاريو ويو، آفڪينوس ۾ هڪ ڊفالٽ پس منظر شامل آهي جنهن کي ڪلڪ ڪري سگهجي ٿو آفڪينوس کي لڪائڻ لاءِ.
  • ماڊلز وانگر، هڪ وقت ۾ صرف هڪ آف ڪينوس ڏيکاري سگهجي ٿو.

اٿو! ڏنو ويو ڪيئن CSS اينيميشنز کي سنڀاليندو آهي، توهان استعمال نٿا ڪري سگهو marginيا translateڪنهن .offcanvasعنصر تي. ان جي بدران، ڪلاس کي آزاد لفافي عنصر طور استعمال ڪريو.

ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

مثال

آفڪينوس اجزاء

هيٺ هڪ آفڪينوس مثال آهي جيڪو ڊفالٽ طور ڏيکاريل آهي (ذريعي .showتي .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"ڇو ته اسان پهريان ئي جاوا اسڪرپٽ ذريعي شامل ڪيو آهي.

ساس

متغير

$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>سڀني ڊوائيسن تي مناسب رويي لاءِ ان سان عنصر کي استعمال ڪرڻ جي پڪ ڪريو .

ڊيٽا خاصيتن جي ذريعي

شامل ڪريو data-bs-toggle="offcanvas"۽ a data-bs-targetيا hrefعنصر کي خودڪار طور تي ھڪڙي آفڪينوس عنصر جي ڪنٽرول کي تفويض ڪرڻ لاء. انتساب هڪ CSS چونڊيندڙ کي قبول ڪري ٿو آف data-bs-targetڪنوس کي لاڳو ڪرڻ لاءِ. ڪلاس کي شامل ڪرڻ جي پڪ ڪريو offcanvasoffcanvas عنصر ۾. جيڪڏھن توھان چاھيو ٿا ته ان کي ڊفالٽ کوليو وڃي، اضافي ڪلاس شامل ڪريو show.

جاوا اسڪرپٽ ذريعي

دستي طور تي فعال ڪريو:

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 جسم تي پس منظر لاڳو ڪريو جڏهن آفڪينوس کليل هجي
keyboard بولين true آف ڪينوس کي بند ڪري ٿو جڏھن Escape ڪي دٻايو ويندو آھي
scroll بولين false باڊي اسڪرولنگ جي اجازت ڏيو جڏهن آفڪينوس کليل هجي

طريقا

هم وقت سازي طريقا ۽ منتقلي

سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

وڌيڪ معلومات لاءِ اسان جا JavaScript دستاويز ڏسو .

توهان جي مواد کي آف ڪنوس عنصر طور چالو ڪري ٿو. اختياري اختيارن کي قبول ڪري ٿو object.

توهان تعمير ڪندڙ سان هڪ آفڪينوس مثال ٺاهي سگهو ٿا، مثال طور:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
طريقو وصف
toggle ڏيکاريل يا لڪائڻ لاءِ آفڪينوس عنصر کي ٽوگل ڪري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو آفڪينوس عنصر اصل ۾ ڏيکاريو ويو هجي يا لڪيل هجي (يعني ان کان اڳ جو shown.bs.offcanvasيا hidden.bs.offcanvasواقعو ٿئي).
show هڪ آفڪينوس عنصر ڏيکاري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو offcanvas عنصر اصل ۾ ڏيکاريو ويو آهي (يعني shown.bs.offcanvasواقعي ٿيڻ کان اڳ).
hide هڪ آفڪينوس عنصر لڪائيندو آهي. ڪالر ڏانهن واپس اچي ٿو ان کان اڳ جو offcanvas عنصر اصل ۾ لڪايو ويو هجي (يعني hidden.bs.offcanvasواقعي کان اڳ).
getInstance جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل آفڪينوس مثال حاصل ڪرڻ جي اجازت ڏئي ٿو
getOrCreateInstance جامد طريقو جيڪو توهان کي اجازت ڏئي ٿو offcanvas مثال حاصل ڪرڻ جي DOM عنصر سان لاڳاپيل، يا هڪ نئون ٺاهيو ان صورت ۾ جڏهن اهو شروع نه ڪيو ويو هو

واقعا

بوٽ اسٽريپ جو آف ڪينوس ڪلاس ڪجھ واقعن کي بي نقاب ڪري ٿو آفڪينوس ڪارڪردگيءَ ۾ ڳنڍڻ لاءِ.

واقعي جو قسم وصف
show.bs.offcanvas اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي.
shown.bs.offcanvas هي واقعو ان وقت ڪڍيو ويندو آهي جڏهن هڪ آفڪينوس عنصر استعمال ڪندڙ کي ڏيکاريو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
hide.bs.offcanvas اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideطريقي کي سڏيو ويو آهي.
hidden.bs.offcanvas هي واقعو فائر ڪيو ويندو آهي جڏهن هڪ آفڪينوس عنصر صارف کان لڪايو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})