آفکانوس
د یو څو ټولګیو او زموږ د جاواسکریپټ پلگ ان سره د نیویګیشن ، شاپینګ کارټونو او نور ډیر څه لپاره په خپله پروژه کې پټ سایډ بارونه جوړ کړئ.
څنګه کار کوي
Offcanvas د سائډبار برخه ده چې د جاواسکریپټ له لارې بدل کیدی شي ترڅو د لید پورټ کیڼ ، ښیې یا لاندې څنډې څخه څرګند شي. تڼۍ یا اینکرونه د محرکاتو په توګه کارول کیږي کوم چې د ځانګړو عناصرو سره نښلول کیږي چې تاسو یې بدل کړئ، او data
ځانګړتیاوې زموږ د جاوا سکریپټ غوښتنه کولو لپاره کارول کیږي.
- Offcanvas ځینې ورته جاواسکریپټ کوډ د ماډلونو په توګه شریکوي. په تصور کې، دوی خورا ورته دي، مګر دوی جلا جلا پلگ ان دي.
- په ورته ډول، د آفکانوس سټایلونو او ابعادو لپاره ځینې سرچینې Sass متغیرونه د ماډل متغیرونو څخه په میراث کې دي.
- کله چې ښودل شوي، آف کینوس کې یو ډیفالټ شالید شامل دی چې د آف کینوس پټولو لپاره کلیک کیدی شي.
- د موډلونو په څیر، په یو وخت کې یوازې یو آف کینوس ښودل کیدی شي.
پورته شه! د دې په پام کې نیولو سره چې CSS حرکتونه څنګه اداره کوي، تاسو نشئ کولی margin
یو translate
عنصر .offcanvas
وکاروئ. پرځای یې، ټولګي د خپلواک ریپینګ عنصر په توګه وکاروئ.
prefers-reduced-motion
رسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ
.
مثالونه
د آفکانوس اجزا
لاندې د آف کینوس مثال دی چې د ډیفالټ لخوا ښودل شوی (د .show
on له لارې .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"
دا اړینه ده.
آفکانوس
<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-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>
د جاواسکریپټ له لارې
په لاسي ډول د دې سره فعال کړئ:
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...
})