پاپاورها
اسناد و نمونه هایی برای افزودن پاپاورهای بوت استرپ، مانند مواردی که در iOS یافت می شوند، به هر عنصری در سایت شما.
بررسی اجمالی
نکاتی که هنگام استفاده از افزونه popover باید بدانید:
- Popover ها برای موقعیت یابی به کتابخانه شخص ثالث Popper متکی هستند . شما باید popper.min.js را قبل از bootstrap.js اضافه کنید یا از
bootstrap.bundle.min.js
/bootstrap.bundle.js
که حاوی Popper است استفاده کنید تا پاپاورها کار کنند! - Popover ها به افزونه tooltip به عنوان یک وابستگی نیاز دارند.
- اگر جاوا اسکریپت ما را از منبع میسازید، به آن نیاز دارد
util.js
. - Popover ها به دلایل عملکردی انتخاب می شوند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید .
- طول صفر
title
وcontent
مقادیر هرگز پاپاور را نشان نمی دهند. container: 'body'
برای جلوگیری از بروز مشکلات در مؤلفههای پیچیدهتر (مانند گروههای ورودی، گروههای دکمهها و غیره) آن را مشخص کنید .- راه اندازی پاپاور روی عناصر پنهان کار نخواهد کرد.
- پاپاور برای
.disabled
یاdisabled
عناصر باید روی یک عنصر لفافی فعال شوند. - هنگامی که از لنگرهایی که در چندین خط قرار می گیرند، پاپاورها بین عرض کلی لنگرها در مرکز قرار می گیرند. برای جلوگیری از این رفتار از
.text-nowrap
روی s خود استفاده کنید.<a>
- Popover ها باید قبل از حذف عناصر مربوطه از DOM پنهان شوند.
- پاپاورها را می توان به لطف عنصری در داخل یک DOM سایه فعال کرد.
prefers-reduced-motion
اثر انیمیشن این مؤلفه به پرسش رسانه
بستگی دارد
. بخش
حرکت کاهش یافته اسناد دسترسی ما را ببینید.
به خواندن ادامه دهید تا ببینید پاپاورها با چند مثال چگونه کار می کنند.
مثال: پاپاورها را در همه جا فعال کنید
یک راه برای مقداردهی اولیه همه پاپاورها در یک صفحه این است که آنها را با ویژگی آنها انتخاب کنید data-toggle
:
$(function () {
$('[data-toggle="popover"]').popover()
})
مثال: با استفاده از container
گزینه
وقتی چند سبک روی یک عنصر والد دارید که با پاپاور تداخل دارد، باید یک سفارشی را مشخص کنید container
تا به جای آن HTML پاپاور در آن عنصر ظاهر شود.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
مثال
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
چهار جهت
چهار گزینه موجود است: تراز بالا، راست، پایین و چپ.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
رد کردن با کلیک بعدی
از focus
ماشه برای رد کردن پاپاورها در کلیک بعدی کاربر بر روی عنصری متفاوت از عنصر تعویض استفاده کنید.
نشانهگذاری خاصی برای رد کردن روی کلیک بعدی لازم است
برای رفتار مناسب بین مرورگرها و کراس پلتفرم ها، باید از تگ استفاده کنید <a>
، نه<button>
تگ، و همچنین باید یک tabindex
ویژگی را وارد کنید.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
trigger: 'focus'
})
عناصر غیر فعال
عناصر دارای disabled
ویژگی تعاملی نیستند، به این معنی که کاربران نمی توانند ماوس را نگه دارند یا روی آنها کلیک کنند تا پاپ اور (یا راهنمای ابزار) راه اندازی شود. به عنوان یک راه حل، شما می خواهید popover را از یک wrapper فعال کنید <div>
یا عنصر غیرفعال را <span>
لغو کنید .pointer-events
برای راهاندازهای پاپاور غیرفعال، ممکن است ترجیح data-trigger="hover"
دهید که پاپاور بهعنوان بازخورد بصری فوری برای کاربران شما ظاهر شود زیرا ممکن است انتظار نداشته باشند روی یک عنصر غیرفعال کلیک کنند.
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
استفاده
فعال کردن پاپاورها از طریق جاوا اسکریپت:
$('#example').popover(options)
شتاب پردازنده گرافیکی
پاپاورها گاهی اوقات در دستگاه های ویندوز 10 به دلیل شتاب GPU و تغییر DPI سیستم تار به نظر می رسند. راه حل برای این کار در نسخه 4 این است که شتاب GPU را در صورت نیاز در پاپاورهای خود غیرفعال کنید.
راه حل پیشنهادی:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
ساخت پاپاورها برای کاربران صفحه کلید و فناوری کمکی
برای اینکه به کاربران صفحه کلید اجازه دهید پاپاورهای شما را فعال کنند، باید آنها را فقط به عناصر HTML اضافه کنید که به طور سنتی قابل تمرکز روی صفحه کلید و تعاملی هستند (مانند پیوندها یا کنترل های فرم). اگرچه عناصر HTML دلخواه (مانند <span>
s) را می توان با افزودن این tabindex="0"
ویژگی قابل تمرکز کرد، اما این کار باعث می شود تا تب های بالقوه آزاردهنده و گیج کننده بر روی عناصر غیر تعاملی برای کاربران صفحه کلید اضافه شود، و اکثر فناوری های کمکی در حال حاضر محتوای popover را در این شرایط اعلام نمی کنند. . علاوه بر این، صرفاً به hover
عنوان محرک پاپاورهای خود متکی نباشید، زیرا این کار باعث میشود که آنها را برای کاربران صفحه کلید غیرممکن کند.
در حالی که میتوانید با این گزینه HTML غنی و ساختار یافته را در پاپاورها وارد html
کنید، ما قویاً توصیه میکنیم که از افزودن بیش از حد محتوا خودداری کنید. روشی که پاپاورها در حال حاضر کار می کنند این است که پس از نمایش، محتوای آنها به عنصر ماشه با aria-describedby
ویژگی گره خورده است. در نتیجه، کل محتوای پاپاور به عنوان یک جریان طولانی و بدون وقفه به کاربران فناوری کمکی اعلام خواهد شد.
علاوه بر این، در حالی که میتوانید کنترلهای تعاملی (مانند عناصر فرم یا پیوندها) را نیز در پاپاور خود بگنجانید (با افزودن این عناصر به whiteList
ویژگیها و برچسبها یا مجاز)، توجه داشته باشید که در حال حاضر popover ترتیب فوکوس صفحهکلید را مدیریت نمیکند. هنگامی که کاربر صفحه کلید یک پاپاور را باز می کند، تمرکز روی عنصر آغازگر باقی می ماند، و از آنجایی که پاپاور معمولاً بلافاصله از ماشه در ساختار سند پیروی نمی کند، هیچ تضمینی برای حرکت به جلو/فشار دادن وجود ندارد.TABکاربر صفحه کلید را به خود پاپاور منتقل می کند. به طور خلاصه، افزودن ساده کنترلهای تعاملی به یک پاپاور احتمالاً این کنترلها را برای کاربران صفحهکلید و کاربران فناوریهای کمکی غیرقابل دسترس/غیرقابل استفاده میکند، یا حداقل یک ترتیب تمرکز کلی غیرمنطقی را ایجاد میکند. در این موارد، به جای آن از یک گفتگوی مودال استفاده کنید.
گزینه ها
گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-
برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-animation=""
.
sanitize
های
sanitizeFn
و
whiteList
را با استفاده از ویژگی های داده ارائه کرد.
نام | تایپ کنید | پیش فرض | شرح |
---|---|---|---|
انیمیشن | بولی | درست است، واقعی | یک انتقال محو شدن CSS به پاپاور اعمال کنید |
ظرف | رشته | عنصر | نادرست | نادرست | popover را به یک عنصر خاص اضافه می کند. مثال: |
محتوا | رشته | عنصر | عملکرد | '' |
اگر تابعی داده شود، با |
تاخیر انداختن | شماره | هدف - شی | 0 | تاخیر در نمایش و پنهان کردن پاپاور (ms) - برای نوع ماشه دستی اعمال نمی شود اگر شماره ای ارائه شود، تاخیر برای هر دو پنهان/نمایش اعمال می شود ساختار شیء عبارت است از: |
html | بولی | نادرست | HTML را در پاپاور قرار دهید. text اگر نادرست باشد، از روش jQuery برای درج محتوا در DOM استفاده می شود. اگر نگران حملات XSS هستید از متن استفاده کنید. |
تعیین سطح | رشته | عملکرد | 'درست' | نحوه قرار دادن پاپاور - خودکار | بالا | پایین | چپ | درست. هنگامی که یک تابع برای تعیین مکان استفاده می شود، با گره popover DOM به عنوان اولین آرگومان و عنصر آغازگر DOM به عنوان دومین آرگومان فراخوانی می شود. متن |
انتخابگر | رشته | نادرست | نادرست | اگر انتخابگر ارائه شود، اشیاء پاپاور به اهداف مشخص شده واگذار می شود. در عمل، از این برای فعال کردن محتوای پویا HTML برای افزودن پاپاور استفاده میشود. این و یک مثال آموزنده را ببینید . |
قالب | رشته | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
پایه HTML برای استفاده در هنگام ایجاد پاپاور. پاپاور به پاپاور به
خارجی ترین عنصر پوشش باید دارای |
عنوان | رشته | عنصر | عملکرد | '' |
اگر تابعی داده شود، با |
ماشه | رشته | 'کلیک' | چگونه پاپاور راه اندازی می شود - کلیک کنید | شناور | تمرکز | کتابچه راهنمای. شما ممکن است چندین محرک عبور دهید. آنها را با فاصله جدا کنید. manual نمی توان با هیچ محرک دیگری ترکیب کرد. |
انحراف | شماره | رشته | 0 | جبران پوپاور نسبت به هدفش. برای اطلاعات بیشتر به اسناد افست پوپر مراجعه کنید . |
جایگزینی | رشته | آرایه | تلنگر | اجازه دهید مشخص کنید که پوپر از کدام موقعیت در بازگشت استفاده می کند. برای اطلاعات بیشتر به اسناد رفتاری پوپر مراجعه کنید |
کلاس سفارشی | رشته | عملکرد | '' | وقتی پاپاور نشان داده شد، کلاسها را به آن اضافه کنید. توجه داشته باشید که این کلاس ها علاوه بر کلاس های مشخص شده در قالب اضافه خواهند شد. برای اضافه کردن چند کلاس، آنها را با فاصله از هم جدا کنید همچنین میتوانید تابعی را ارسال کنید که باید یک رشته حاوی نامهای کلاس اضافی را برگرداند. |
مرز | رشته | عنصر | 'scrollParent' | مرز محدودیت سرریز پاپاور. مقادیر 'viewport' , 'window' , 'scrollParent' یا مرجع HTMLElement (فقط جاوا اسکریپت) را می پذیرد. برای اطلاعات بیشتر به اسناد Popper's preventOverflow مراجعه کنید . |
ضدعفونی کردن | بولی | درست است، واقعی | پاکسازی را فعال یا غیرفعال کنید. در صورت فعال شدن 'template' ، گزینه 'content' ها 'title' ضد عفونی خواهند شد. بخش ضدعفونی کننده را در مستندات جاوا اسکریپت ما ببینید. |
لیست سفید | هدف - شی | مقدار پیش فرض | شیئی که حاوی ویژگی ها و برچسب های مجاز است |
sanitizeFn | null | عملکرد | خالی | در اینجا می توانید عملکرد ضدعفونی کننده خود را ارائه دهید. اگر ترجیح می دهید از یک کتابخانه اختصاصی برای انجام پاکسازی استفاده کنید، می تواند مفید باشد. |
popperConfig | null | هدف - شی | خالی | برای تغییر تنظیمات Popper پیشفرض Bootstrap، به پیکربندی Popper مراجعه کنید |
ویژگی های داده برای پاپاورهای فردی
همانطور که در بالا توضیح داده شد، میتوان گزینههای مربوط به پاپاورهای فردی را از طریق استفاده از ویژگیهای داده مشخص کرد.
مواد و روش ها
روش ها و انتقال های ناهمزمان
همه متدهای API ناهمزمان هستند و یک انتقال را شروع می کنند . آنها به محض شروع انتقال اما قبل از پایان آن به تماس گیرنده باز می گردند . علاوه بر این، فراخوانی متد بر روی یک جزء انتقال نادیده گرفته خواهد شد .
$().popover(options)
پاپاورها را برای یک مجموعه عناصر راه اندازی می کند.
.popover('show')
پاپاور یک عنصر را آشکار می کند. قبل از اینکه پاپاور واقعاً نشان داده شود (یعنی قبل از shown.bs.popover
وقوع رویداد) به تماس گیرنده برمی گردد. این به عنوان یک راهاندازی «دستی» پاپاور در نظر گرفته میشود. پاپاورهایی که عنوان و محتوای آنها هر دو با طول صفر است هرگز نمایش داده نمی شوند.
$('#element').popover('show')
.popover('hide')
پاپاور یک عنصر را پنهان می کند. قبل از اینکه پاپاور واقعاً پنهان شود (یعنی قبل از hidden.bs.popover
وقوع رویداد) به تماس گیرنده برمی گردد. این به عنوان یک راهاندازی «دستی» پاپاور در نظر گرفته میشود.
$('#element').popover('hide')
.popover('toggle')
popover یک عنصر را تغییر می دهد. قبل از اینکه پاپاور واقعاً نشان داده یا پنهان شود (یعنی قبل از وقوع رویداد shown.bs.popover
یا hidden.bs.popover
رویداد) به تماس گیرنده برمی گردد. این به عنوان یک راهاندازی «دستی» پاپاور در نظر گرفته میشود.
$('#element').popover('toggle')
.popover('dispose')
پاپاور یک عنصر را پنهان کرده و از بین می برد. پاپاورهایی که از تفویض استفاده میکنند (که با استفاده از selector
گزینه ایجاد میشوند ) را نمیتوان بهصورت جداگانه در عناصر ماشهای نزول از بین برد.
$('#element').popover('dispose')
.popover('enable')
به پاپاور یک عنصر قابلیت نشان دادن می دهد. Popover ها به طور پیش فرض فعال هستند.
$('#element').popover('enable')
.popover('disable')
قابلیت نمایش پاپاور یک عنصر را حذف می کند. Popover فقط در صورت فعال شدن مجدد قابل نمایش است.
$('#element').popover('disable')
.popover('toggleEnabled')
قابلیت نمایش یا پنهان کردن پاپاور یک عنصر را تغییر میدهد.
$('#element').popover('toggleEnabled')
.popover('update')
موقعیت popover یک عنصر را به روز می کند.
$('#element').popover('update')
مناسبت ها
نوع رویداد | شرح |
---|---|
show.bs.popover | این رویداد بلافاصله پس از show فراخوانی متد نمونه فعال می شود. |
نشان داده شده.ب.اس.پاپور | این رویداد زمانی فعال می شود که پاپاور برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال CSS می شود). |
hide.bs.popover | این رویداد بلافاصله پس از hide فراخوانی متد نمونه فعال می شود. |
hidden.bs.popover | این رویداد زمانی فعال می شود که پاپ اور از کاربر مخفی شود (منتظر تکمیل انتقال CSS می شود). |
درج شده.bs.popover | این رویداد پس از show.bs.popover رویداد زمانی که قالب popover به DOM اضافه شده است فعال می شود. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})