اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړ شئ
in English

آفکانوس

د یو څو ټولګیو او زموږ د جاواسکریپټ پلگ ان سره د نیویګیشن ، شاپینګ کارټونو او نور ډیر څه لپاره په خپله پروژه کې پټ سایډ بارونه جوړ کړئ.

څنګه کار کوي

Offcanvas د سائډبار برخه ده چې د جاواسکریپټ له لارې بدل کیدی شي ترڅو د لید پورټ کیڼ ، ښیې یا لاندې څنډې څخه څرګند شي. تڼۍ یا اینکرونه د محرکاتو په توګه کارول کیږي کوم چې د ځانګړو عناصرو سره نښلول کیږي چې تاسو یې بدل کړئ، او dataځانګړتیاوې زموږ د جاوا سکریپټ غوښتنه کولو لپاره کارول کیږي.

  • Offcanvas ځینې ورته جاواسکریپټ کوډ د ماډلونو په توګه شریکوي. په تصور کې، دوی خورا ورته دي، مګر دوی جلا جلا پلگ ان دي.
  • په ورته ډول، د آفکانوس سټایلونو او ابعادو لپاره ځینې سرچینې Sass متغیرونه د ماډل متغیرونو څخه په میراث کې دي.
  • کله چې ښودل شوي، آف کینوس کې یو ډیفالټ شالید شامل دی چې د آف کینوس پټولو لپاره کلیک کیدی شي.
  • د موډلونو په څیر، په یو وخت کې یوازې یو آف کینوس ښودل کیدی شي.

پورته شه! د دې په پام کې نیولو سره چې CSS حرکتونه څنګه اداره کوي، تاسو نشئ کولی marginیو translateعنصر .offcanvasوکاروئ. پرځای یې، ټولګي د خپلواک ریپینګ عنصر په توګه وکاروئ.

د دې برخې د حرکت اغیز د prefers-reduced-motionرسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ .

مثالونه

د آفکانوس اجزا

لاندې د آف کینوس مثال دی چې د ډیفالټ لخوا ښودل شوی (د .showon له لارې .offcanvas). 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

د سکرول کولو سره رنګ شوی

د پاڼي پاتې برخه سکرول کولو هڅه وکړئ ترڅو دا اختیار په عمل کې وګورئ.

د شاليد سره offcanvas

.....

د سکرول کولو سره شالید

د پاڼي پاتې برخه سکرول کولو هڅه وکړئ ترڅو دا اختیار په عمل کې وګورئ.

<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"ځکه چې موږ دمخه دا د جاواسکریپټ له لارې اضافه کړی.

ساس

متغیرات

$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"، کوم چې د جاواسکریپټ فعالیت پیلوي. ډاډ ترلاسه کړئ چې <button>په ټولو وسیلو کې د مناسب چلند لپاره د دې سره عنصر وکاروئ.

د معلوماتو ځانګړتیاو له لارې

ټګ

اضافه کړئ data-bs-toggle="offcanvas"او a data-bs-targetیا hrefعنصر ته په اتوماتيک ډول د یو آف کینوس عنصر کنټرول وټاکئ. خاصیت د data-bs-targetCSS انتخاب کونکی مني چې د آفکانوس پلي کولو لپاره. ډاډ ترلاسه کړئ چې ټولګي 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)
})

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-bs-، لکه څنګه چې په کې data-bs-backdrop="".

نوم ډول ډیفالټ تفصیل
backdrop بولین true په بدن باندې شالید تطبیق کړئ پداسې حال کې چې آف کینوس خلاص وي
keyboard بولین true کله چې د فرار کیلي فشار ورکړل شي آف کینوس بندوي
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 عنصر سره تړلی آفکانوس مثال ترلاسه کړئ
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...
})