Popovers
د بوټسټریپ پاپورونو اضافه کولو لپاره اسناد او مثالونه، لکه په iOS کې موندل شوي، ستاسو په سایټ کې هر عنصر ته.
کتنه
د پاپ اوور پلگ ان کارولو پرمهال د پوهیدو لپاره شیان:
- Popovers د موقعیت لپاره د دریمې ډلې کتابتون Popper باندې تکیه کوي . تاسو باید د bootstrap.js څخه مخکې popper.min.js
bootstrap.bundle.min.js
شامل کړئ یا /bootstrap.bundle.js
کوم چې د پاپورونو د کار کولو لپاره پوپر لري استعمال کړئ! - Popovers د انحصار په توګه د اوزار ټایپ پلگ ان ته اړتیا لري.
- Popovers د فعالیت دلایلو لپاره غوره شوي، نو تاسو باید دوی پخپله پیل کړئ .
- صفر اوږدوالی
title
اوcontent
ارزښتونه به هیڅکله پاپ اوور ونه ښیې. - په ډیرو پیچلو برخو کې د ستونزو د وړاندې کولو څخه مخنیوي لپاره مشخص
container: 'body'
کړئ (لکه زموږ د ننوتلو ګروپونه، د تڼۍ ګروپونه، او نور). - په پټو عناصرو کې د پاپورز رامینځته کول به کار ونکړي.
.disabled
د یا عناصرو لپاره پاپورونهdisabled
باید په ریپر عنصر کې پیل شي.- کله چې د اینکرونو څخه رامینځته کیږي چې په ډیری لینونو کې پوښل کیږي، پاپورونه به د لنگر د ټولیز عرض تر مینځ متمرکز وي. د دې چلند څخه د مخنیوي لپاره
.text-nowrap
په خپلو کې کار واخلئ .<a>
- پوپورونه باید مخکې له دې چې د دوی اړوند عناصر د DOM څخه لیرې شي پټ شي.
- Popovers د سیوري DOM دننه د عنصر څخه مننه رامینځته کیدی شي.
prefers-reduced-motion
رسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ
.
لوستلو ته دوام ورکړئ ترڅو وګورئ چې پاپور د ځینې مثالونو سره څنګه کار کوي.
بېلګه: په هر ځای کې پاپورونه فعال کړئ
په یوه پاڼه کې د ټولو پاپورونو پیل کولو یوه لاره به دا وي چې دوی د دوی د data-bs-toggle
ځانګړتیاوو له مخې غوره کړي:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
بېلګه: د container
اختیار کارول
کله چې تاسو په اصلي عنصر کې ځینې سټایلونه لرئ چې د پاپ اوور سره مداخله کوي، تاسو غواړئ یو دود مشخص کړئ container
ترڅو د پاپ اوور HTML د دې عنصر په ځای کې ښکاره شي.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
بېلګه
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
څلور لارې
څلور اختیارونه شتون لري: پورته، ښیې، ښکته، او کیڼ اړخ ته. په RTL کې د بوټسټریپ کارولو په وخت کې لارښوونې منعکس کیږي.
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
په بل کلیک کې رد کړئ
focus
د ټګل عنصر په پرتله د مختلف عنصر په راتلونکي کلیک کې د پاپورونو د لرې کولو لپاره محرک وکاروئ .
ځانګړي مارک اپ د برطرف کولو لپاره په بل کلیک کې اړین دی
د مناسب کراس براوزر او کراس پلیټ فارم چلند لپاره، تاسو باید <a>
ټګ وکاروئ، نه<button>
ټاګ، او تاسو باید یو tabindex
خاصیت هم شامل کړئ .
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
غیر فعال عناصر
د ځانګړتیا سره عناصر disabled
متقابل نه دي، پدې معنی چې کاروونکي نشي کولی د پاپ اوور (یا اوزار ټایپ) محرک کولو لپاره هوور یا کلیک وکړي. د یوې حل لارې په توګه، تاسو غواړئ چې پاپ اوور د ریپر څخه <div>
یا <span>
په مثالي توګه د کیبورډ په کارولو سره د تمرکز وړ جوړ کړئ tabindex="0"
.
د معیوب شوي پاپ اوور محرکاتو لپاره، تاسو ممکن دا هم غوره کړئ data-bs-trigger="hover focus"
چې پاپ اوور ستاسو کاروونکو ته د سمدستي بصري فیډبیک په توګه ښکاري ځکه چې دوی ممکن په معیوب عنصر باندې د کلیک کولو تمه ونه کړي.
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
ساس
متغیرات
$popover-font-size: $font-size-sm;
$popover-bg: $white;
$popover-max-width: 276px;
$popover-border-width: $border-width;
$popover-border-color: rgba($black, .2);
$popover-border-radius: $border-radius-lg;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow: $box-shadow;
$popover-header-bg: shade-color($popover-bg, 6%);
$popover-header-color: $headings-color;
$popover-header-padding-y: .5rem;
$popover-header-padding-x: $spacer;
$popover-body-color: $body-color;
$popover-body-padding-y: $spacer;
$popover-body-padding-x: $spacer;
$popover-arrow-width: 1rem;
$popover-arrow-height: .5rem;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-color: fade-in($popover-border-color, .05);
کارول
د جاواسکریپټ له لارې پاپور فعال کړئ:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
د کیبورډ او مرستندویه ټیکنالوژۍ کاروونکو لپاره د پاپورونو کار کول
د دې لپاره چې د کیبورډ کاروونکو ته اجازه ورکړئ چې ستاسو پاپورونه فعال کړي، تاسو باید دوی یوازې په HTML عناصرو کې اضافه کړئ چې په دودیز ډول د کیبورډ تمرکز وړ او متقابل وي (لکه لینکونه یا فارم کنټرولونه). که څه هم خپلمنځي HTML عناصر (لکه <span>
s) د tabindex="0"
خاصیت په اضافه کولو سره د تمرکز وړ کیدی شي ، دا به د کیبورډ کاروونکو لپاره غیر متقابل عناصرو کې احتمالي ځورونکي او مغشوشونکي ټب سټاپونه اضافه کړي ، او ډیری مرستندویه ټیکنالوژي اوس مهال پدې حالت کې د پاپ اوور مینځپانګې نه اعلانوي. . hover
سربیره پردې ، یوازې د خپل پاپورونو لپاره د محرک په توګه تکیه مه کوئ ، ځکه چې دا به دوی د کیبورډ کاروونکو لپاره متحرک کول ناممکن کړي.
په داسې حال کې چې تاسو کولی شئ د اختیار سره په پاپورونو کې بډایه، جوړښت شوي HTML داخل کړئ html
، موږ په کلکه سپارښتنه کوو چې تاسو د ډیرو مینځپانګو اضافه کولو څخه ډډه وکړئ. هغه طریقه چې اوس مهال پاپورونه کار کوي دا دی چې یوځل ښودل شوي، د دوی مینځپانګه د aria-describedby
ځانګړتیا سره د محرک عنصر سره تړلې ده. د پایلې په توګه، د پاپ اوور ټول منځپانګې به د مرستندویه ټیکنالوژۍ کاروونکو ته د یوې اوږدې، بې بنسټه جریان په توګه اعلان شي.
سربیره پردې ، پداسې حال کې چې دا ممکنه ده چې ستاسو په پاپ اوور کې متقابل کنټرولونه (لکه د فارم عناصر یا لینکونه) شامل کړئ ( allowList
د اجازه ورکړل شوي صفاتو او ټاګونو کې د دې عناصرو په اضافه کولو سره) ، خبر اوسئ چې اوس مهال پاپ اوور د کیبورډ تمرکز ترتیب نه اداره کوي. کله چې د کیبورډ کاروونکي پاپ اوور پرانیزي، تمرکز په محرک عنصر باندې پاتې کیږي، او لکه څنګه چې پاپ اوور معمولا د سند په جوړښت کې محرک نه تعقیبوي، هیڅ تضمین شتون نلري چې مخ په وړاندې ځي / فشار راوړي.TABد کیبورډ کارونکي به پخپله پاپ اوور کې حرکت وکړي. په لنډه توګه، په ساده ډول په پاپ اوور کې د متقابل کنټرولونو اضافه کول احتمال لري چې دا کنټرولونه د کیبورډ کاروونکو او د مرستندویه ټیکنالوژیو کاروونکو لپاره د لاسرسي وړ/نا ګټه پورته کړي، یا لږترلږه د غیر منطقي عمومي تمرکز ترتیب لپاره رامینځته کړي. پدې قضیو کې ، د دې پرځای د ماډل ډیالوګ کارولو ته پام وکړئ.
اختیارونه
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-bs-
، لکه څنګه چې په کې data-bs-animation=""
. ډاډ ترلاسه کړئ چې د اختیار نوم د قضیې ډول د CamelCase څخه کباب-کیس ته بدل کړئ کله چې اختیارونه د ډیټا ځانګړتیاو له لارې تیریږي. د مثال په توګه، د کارولو پرځای data-bs-customClass="beautifier"
، وکاروئ data-bs-custom-class="beautifier"
.
sanitize
،
sanitizeFn
، او
allowList
اختیارونه د ډیټا ځانګړتیاو په کارولو سره نشي چمتو کیدی.
نوم | ډول | ډیفالټ | تفصیل |
---|---|---|---|
animation |
بولین | true |
پاپ اوور ته د CSS فیډ لیږد پلي کړئ |
container |
تار | عنصر | دروغ | false |
یو ځانګړي عنصر ته پاپ اوور ضمیمه کوي. بېلګه: |
content |
تار | عنصر | فعالیت | '' |
د ډیفالټ منځپانګې ارزښت که چیرې که یو فنکشن ورکړل شي، نو دا به د |
delay |
شمیره | اعتراض | 0 |
د پاپ اوور (ms) ښودل او پټول ځنډول - د لارښود محرک ډول باندې نه پلي کیږي که یوه شمیره ورکړل شي، ځنډ د پټولو / ښودلو لپاره کارول کیږي د شیانو جوړښت دا دی: |
html |
بولین | false |
په پاپ اوور کې HTML داخل کړئ. که غلط وي، innerText ملکیت به په DOM کې د مینځپانګې داخلولو لپاره وکارول شي. متن وکاروئ که تاسو د XSS بریدونو په اړه اندیښمن یاست. |
placement |
تار | فعالیت | 'right' |
د پاپ اوور موقعیت څنګه - آٹو | پورته | لاندې | پاتې | حق کله چې یو فنکشن د ځای پرځای کولو لپاره کارول کیږي، دا د پاپ اوور DOM نوډ سره د لومړي دلیل په توګه او د محرک عنصر DOM نوډ د دویم په توګه ویل کیږي. |
selector |
تار | دروغ | false |
که یو انتخاب کونکی چمتو شي، د پاپ اوور توکي به ټاکل شوي اهدافو ته واستول شي. په عمل کې، دا د متحرک HTML مینځپانګې وړولو لپاره کارول کیږي ترڅو پاپورونه اضافه کړي. دا او یو معلوماتي مثال وګورئ . |
template |
تار | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
د پاپ اوور رامینځته کولو پرمهال د کارولو لپاره اساس HTML. پاپ اوور پاپ اوور
د بهر تر ټولو لفافه عنصر باید |
title |
تار | عنصر | فعالیت | '' |
د اصلي سرلیک ارزښت که چیرې که یو فنکشن ورکړل شي، نو دا به د |
trigger |
تار | 'click' |
پاپ اوور څنګه پیل کیږي - کلیک | هور | تمرکز | لارښود تاسو ممکن ډیری محرکونه تیر کړئ؛ دوی د ځای سره جلا کړئ. manual د کوم بل محرک سره یوځای نشي. |
fallbackPlacements |
صف | ['top', 'right', 'bottom', 'left'] |
په صف کې د ځای پرځای کولو لیست چمتو کولو له لارې د بیرته راستنیدو ځای په ځای کولو تعریف کړئ (د غوره توب له مخې). د لا زیاتو معلوماتو لپاره د Popper د چلند اسنادو ته مراجعه وکړئ |
boundary |
تار | عنصر | 'clippingParents' |
د پاپ اوور د اوور فلو محدودیت حد (یوازې د پوپر د مخنیوي اوور فلو ترمیم کونکي باندې پلي کیږي). په ډیفالټ دا دی 'clippingParents' او کولی شي د HTMLElement حواله ومني (یوازې د جاواسکریپټ له لارې). د نورو معلوماتو لپاره د Popper's detectOverflow اسنادو ته مراجعه وکړئ . |
customClass |
تار | فعالیت | '' |
کله چې ښودل کیږي پاپ اوور ته ټولګي اضافه کړئ. په یاد ولرئ چې دا ټولګي به د ټیمپلیټ کې مشخص شوي ټولګیو سربیره اضافه شي. د ډیری ټولګیو اضافه کولو لپاره، دوی د ځایونو سره جلا کړئ: تاسو کولی شئ یو فنکشن هم تیر کړئ چې باید یو واحد تار بیرته راولي چې اضافي ټولګي نومونه لري. |
sanitize |
بولین | true |
پاکول فعال یا غیر فعال کړئ. که فعاله شي 'template' ، 'content' او 'title' اختیارونه به پاک شي. زموږ د جاواسکریپټ اسنادو کې د پاکولو برخه وګورئ . |
allowList |
اعتراض | ډیفالټ ارزښت | هغه څیز چې اجازه ورکړل شوي ځانګړتیاوې او ټاګونه لري |
sanitizeFn |
null | فعالیت | null |
دلته تاسو کولی شئ خپل د پاکولو فعالیت وړاندې کړئ. دا ګټور کیدی شي که تاسو د حفظ الصحې ترسره کولو لپاره وقف شوي کتابتون څخه کار واخلئ. |
offset |
صف | تار | فعالیت | [0, 8] |
د خپل هدف په پرتله د پاپ اوور آفسیټ. تاسو کولی شئ د کوما جلا شوي ارزښتونو سره د ډیټا ځانګړتیاو کې تار تیر کړئ لکه: کله چې یو فنکشن د آفسیټ ټاکلو لپاره کارول کیږي، دا د هغه څیز سره ویل کیږي چې د پاپر ځای پرځای کول، حواله، او پاپر د لومړي دلیل په توګه بیاکتنه کوي. د محرک عنصر DOM نوډ د دوهم دلیل په توګه تیریږي. فنکشن باید د دوه شمیرو سره یو صف بیرته راولي: . د لا زیاتو معلوماتو لپاره د Popper's offset docs ته مراجعه وکړئ . |
popperConfig |
null | څيز | فعالیت | null |
د بوټسټریپ ډیفالټ پوپر ترتیب بدلولو لپاره ، د پوپر ترتیب وګورئ . کله چې یو فنکشن د پوپر ترتیب رامینځته کولو لپاره کارول کیږي، دا د هغه څیز سره ویل کیږي چې د بوټسټریپ ډیفالټ پاپر ترتیب لري. دا تاسو سره مرسته کوي چې ستاسو د خپل ترتیب سره ډیفالټ وکاروئ او یوځای کړئ. فنکشن باید د پوپر لپاره د ترتیب کولو څیز بیرته راولي. |
د انفرادي پاپورونو لپاره د معلوماتو ځانګړتیاوې
د انفرادي پاپورونو اختیارونه په بدیل ډول د ډیټا ځانګړتیاو کارولو له لارې مشخص کیدی شي ، لکه څنګه چې پورته تشریح شوي.
سره د فنکشن کارولpopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
میتودونه
غیر متناسب میتودونه او لیږدونه
د API ټولې طریقې غیر متناسب دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته راستانه کیږي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .
ښودل
د عنصر پاپ اوور څرګندوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې پاپ اوور واقعیا وښودل شي (یعنې مخکې له دې چې shown.bs.popover
پیښه پیښ شي). دا د پاپ اوور "دستي" محرک ګڼل کیږي. Popovers چې سرلیک او مینځپانګه دواړه صفر اوږدوالی لري هیڅکله نه ښودل کیږي.
myPopover.show()
پټول
د عنصر پاپ اوور پټوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې پاپ اوور واقعیا پټ شوی وي (یعنې مخکې له دې چې hidden.bs.popover
پیښه پیښ شي). دا د پاپ اوور "دستي" محرک ګڼل کیږي.
myPopover.hide()
بدلول
د عنصر پاپ اوور ټګل کوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې پاپ اوور واقعیا ښودل شوي یا پټ شوي وي (د بیلګې په توګه مخکې لدې چې پیښه shown.bs.popover
یا hidden.bs.popover
پیښه پیښ شي). دا د پاپ اوور "دستي" محرک ګڼل کیږي.
myPopover.toggle()
تصفیه کول
د عنصر پاپ اوور پټوي او له مینځه وړي (د DOM عنصر کې زیرمه شوي معلومات لرې کوي). پوپوورونه چې د پلاوي څخه کار اخلي (کوم چې د selector
اختیار په کارولو سره رامینځته شوي ) نشي کولی په انفرادي ډول د نسل محرک عناصرو له مینځه ویسي.
myPopover.dispose()
فعالول
د عنصر پاپ اوور د ښودلو وړتیا ورکوي. Popovers د ډیفالټ په واسطه فعال شوي.
myPopover.enable()
غیر فعال
د یو عنصر د پاپ اوور ښودلو وړتیا لرې کوي. پاپ اوور به یوازې د ښودلو وړ وي که چیرې دا بیا فعال شي.
myPopover.disable()
toggle فعال شوی
د یو عنصر د پاپ اوور د ښودلو یا پټولو وړتیا بدلوي.
myPopover.toggleEnabled()
تازه کول
د عنصر د پاپ اوور موقعیت تازه کوي.
myPopover.update()
getInstance
جامد میتود چې تاسو ته اجازه درکوي د پاپ اوور مثال ترلاسه کړئ چې د DOM عنصر سره تړاو لري
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
جامد میتود چې تاسو ته اجازه درکوي د DOM عنصر سره د پاپ اوور مثال ترلاسه کړئ ، یا یو نوی رامینځته کړئ که چیرې دا نه وي پیل شوی
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
پیښې
د پیښې ډول | تفصیل |
---|---|
show.bs.popover | دا پیښه سمدلاسه اوریږي کله چې د show مثال میتود ویل کیږي. |
ښودل شوی.bs.popover | دا پیښه له مینځه وړل کیږي کله چې پاپ اوور کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
hide.bs.popover | دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hide مثال میتود ویل کیږي. |
hidden.bs.popover | دا پیښه له مینځه وړل کیږي کله چې پاپ اوور د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
inserted.bs.popover | دا پیښه د show.bs.popover پیښې وروسته له مینځه وړل کیږي کله چې د پاپ اوور ټیمپلیټ DOM ته اضافه شوی وي. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})