پاپاور و دیالوگ

پاپاور هر عنصری است که دارای ویژگی popover است و برای طیف وسیعی از الگوهای تعاملی، از جمله راهنمای ابزار، هشدارها، نان تست‌ها و موارد دیگر مفید است.

<div id="my-popover" popover>My popover content</div>

ویژگی popover به طور پیش فرض عنصر را پنهان می کند و شما باید راهی برای باز کردن آن برای کاربران فراهم کنید. در حالی که پاپ‌اورها در لایه بالایی قرار می‌گیرند، بالاتر از سایر محتواها، حالت مودال ندارند. این بدان معنی است که شما همچنان می توانید با محتوای خارج از پاپاور تعامل داشته باشید.

کنترل پاپاورها

قبل از اینکه انواع پاپاورها و نحوه رفتار آنها را بررسی کنیم، به نحوه باز و بسته کردن پاپاورها نگاه کنید.

به صورت اعلامی

Popover ها را می توان به طور کامل در HTML، بدون نیاز به استفاده از جاوا اسکریپت، با استفاده از دکمه ها (و ورودی هایی با نوع button ) و ویژگی popovertarget کنترل کرد.

پاپاور در قطعه کد قبلی دارای id my-popover است و می‌توانید از آن برای مراجعه به پاپ‌اور استفاده کنید.

<button popovertarget="my-popover">Toggle</button>

همچنین می‌توانید با استفاده از popovertargetaction="show" و popovertargetaction="hide" مشخص کنید که آیا یک دکمه باید پاپاور را باز یا بسته کند.

با جاوا اسکریپت

همچنین می‌توانید با استفاده از جاوا اسکریپت پاپاور را کنترل کنید، که زمانی مفید است که می‌خواهید یک پاپاور را در پاسخ به چیزی به غیر از کلیک کاربر روی یک دکمه نشان دهید. برای انجام این کار، باید عنصر popover را دریافت کنید و سپس showPopover() , hidePopover() یا togglePopover() فراخوانی کنید.

انواع پاپاور

وقتی پاپاور را به سایت خود اضافه می کنید، تعاملات زیادی وجود دارد که باید در نظر بگیرید. چگونه باز می شود؟ کاربران چگونه می توانند آن را رد کنند؟ چه اتفاقی برای پاپاورهای باز دیگر می افتد؟ سه نوع پاپاور وجود دارد، و شما می توانید نوعی را انتخاب کنید که رفتار و تعاملات مورد نیاز مورد استفاده شما را ارائه دهد.

پاپاورهای خودکار

پاپ‌اورهای خودکار بیشترین عملکرد را دارند و اگر نوع خاصی را مشخص نکنید، پیش‌فرض هستند.

<div id="popover" popover>My popover</div>

در بسیاری از موارد، شما نمی خواهید چندین پاپاور را به طور همزمان باز کنید، بنابراین پاپاورهای خودکار دیگر پاپاورهای خودکار را هنگامی که باز می شوند، می بندند. آنها همچنین از "light dismiss" پشتیبانی می کنند، به این معنی که اگر خارج از popover کلیک کنید، به طور خودکار بسته می شود. همچنین می توان آن را با کلید Esc بست.

پاپاورهای دستی

در حالی که رفتار پاپ‌اور خودکار موارد استفاده زیادی را پوشش می‌دهد، مواردی وجود دارد که ممکن است به کنترل بیشتری بر پاپ‌اورهای خود نیاز داشته باشید. با پاپاورهای دستی، شما کنترل بسیار بیشتری دارید، و همچنین مسئول رفتار بسیار بیشتری هستید.

<div id="popover" popover="manual">My popover</div>

این پاپ‌اور فقط زمانی بسته می‌شود که صریحاً آن را ببندید – با رد کردن نور یا کلید Esc نمی‌توان آن را بست. این به شما امکان می دهد چندین پاپاور را به طور همزمان باز کنید.

اشاره پاپاورها

همچنین ممکن است بخواهید از پاپاورها برای افزودن راهنمای ابزار به صفحه خود استفاده کنید. در این الگو، شما می خواهید بتوانید ماوس را روی یک آیتم نگه دارید و توضیحی را ببینید. فقط یکی باید در یک زمان باز باشد. اگر از پاپاورهای خودکار استفاده می کنید، باز کردن یکی از پاپاورهای خودکار دیگر بسته می شود. اگر از پاپاورهای دستی استفاده می کنید، باید بسیاری از رفتارها را به صورت دستی پیاده سازی کنید، از جمله بستن پاپاورهای دیگر. پاپاورهای راهنمایی گزینه سومی را با رفتاری مشابه پاپاورهای خودکار ارائه می دهند. با این حال، باز کردن پاپ‌اور اشاره، پاپ‌اورهای خودکار را نمی‌بندد.

<div id="popover" popover="hint">My popover</div>

پاپاورهای راهنمایی برای اطلاعات تکمیلی که ثانویه نسبت به محتوای اولیه هستند مفید هستند. اغلب می خواهید با رویدادهای بدون کلیک مانند نشان دادن یا فوکوس، پاپاورهای اشاره را راه اندازی کنید.

قرار دادن پاپاور خود

به طور پیش فرض، پاپاورهای شما در وسط صفحه باز می شوند. آنها به لایه بالایی اضافه می شوند، بالاتر از همه محتوای دیگر، و می توانند نسبت به viewport قرار گیرند.

این همیشه ایده‌آل نیست، زیرا اغلب می‌خواهید popover خود را نزدیک موردی که باعث ایجاد آن می‌شود قرار دهید. موقعیت لنگر راهی برای انجام آن فراهم می کند.

دو مرحله برای تعیین موقعیت لنگر وجود دارد: تعریف عنصر لنگر و قرار دادن عنصر خود نسبت به آن لنگر. پاپاورها می توانند با تنظیم یک لنگر ضمنی برای شما، اولین مرحله را انجام دهند. وقتی پاپاور را با استفاده از <button popovertarget> باز می کنید، دکمه لنگر ضمنی است. اگر با استفاده از جاوا اسکریپت پاپاور باز می‌کنید، می‌توانید لنگر ضمنی را با گزینه source تنظیم کنید.

به طور پیش‌فرض، یک پاپاور با استفاده از margin: auto . برای استفاده از موقعیت لنگر، احتمالاً باید با تنظیم margin: unset آن را لغو کنید.

سبک ها و انیمیشن ها

عنصر شبه :: پس زمینه

Popover ها در یک لایه بالا، بالاتر از همه محتوای دیگر در صفحه شما باز می شوند. در زیر پاپاور یک عنصر شبه ::backdrop وجود دارد که می توان به آن استایل داد.

مهم است که توجه داشته باشید که محتوای خارج از پاپاور بی اثر نیست - همچنان می توانید روی دکمه ها کلیک کنید و از صفحه کلید خود برای پیمایش صفحه استفاده کنید. شما نباید محتویات صفحه را پنهان کنید، مثلاً با اعمال یک افکت تاری شدید یا تنظیم پس‌زمینه روی یک رنگ مات.

طبقه شبه :popover-open

فرض کنید می خواهید محتوای پاپاور خود را با استفاده از شبکه های CSS چیدمان کنید. شما [popover]{ display: grid } را اضافه می کنید و ناگهان همه پاپاورهای شما نمایان می شوند. این به این دلیل است که پاپاورها با استفاده از display: none . شما می‌توانید از کلاس شبه :popover-open برای اعمال سبک‌ها فقط زمانی استفاده کنید که popover باز است.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open همچنین زمانی مفید است که در حال انیمیشن کردن یک پاپاور هستید.

متحرک سازی پاپاورها

3 مرحله در انیمیشن پاپاور وجود دارد:

1. @starting-style {popover:popover-open { } } -سبک‌های اولیه برای popover به محض اینکه قابل مشاهده است. توجه داشته باشید که این باید در stylesheet شما بعد از #2 تعریف شود.
2. popover:popover-open { } -سبک‌های popover زمانی که باز است.
3. popover { } -سبک‌هایی که popover هنگام بسته شدن به آن‌ها می‌رود.

یک پاپاور با استفاده از display: none زمانی که باز نیست. برای متحرک سازی این، باید transition-behavior: allow-discrete تنظیم کنید، و همچنین display به لیست ویژگی های در transition اضافه کنید.

اگر popover خود را با یک لنگر ضمنی قرار می دهید، باید overlay در لیست ویژگی های در transition اضافه کنید. رابطه لنگر ضمنی پس از حذف پاپاور از لایه بالایی حذف می‌شود، بنابراین افزودن یک انتقال به ویژگی overlay آن را تا زمانی که انتقال خروج کامل شود به تأخیر می‌اندازد.

تعامل بین پاپاورها

شما احتمالاً چندین پاپاور در یک صفحه خواهید داشت و نحوه تعامل آنها به نوع آنها و نحوه استفاده آنها بستگی دارد.

پاپاورهای تو در تو

در برخی موارد، ممکن است لازم باشد پاپاور را از داخل پاپاور دیگری باز کنید. به عنوان مثال، ممکن است یک منوی پاپاور داشته باشید و یکی از آیتم های منو یک منوی فرعی را باز کند. وقتی کاربر منوی اصلی را می بندد، نمی خواهید زیر منو باز بماند. Popover ها می توانند به طور خودکار به کنترل آن کمک کنند.

اگر در حال باز کردن پاپ‌اور اشاره‌ای از پاپ‌اور راهنمایی یا پاپ‌اور خودکار از پاپ‌اور خودکار هستید، پاپ‌اورها در یک پشته قرار می‌گیرند. با بستن پاپاور، تمام پاپاورهای بعد از آن در پشته نیز بسته می شود. این همچنین با رد کردن نور کار می کند - اگر روی پاپاور کلیک کنید، همه پاپاورهای بعد از آن در پشته بسته می شوند، اما پاپاورهای قبلی باز می مانند.

اگر عنصر منبع آن داخل پاپاور باشد، پاپاور به پشته اضافه می شود. وقتی از popovertarget روی دکمه استفاده می‌کنید یا با جاوا اسکریپت با تنظیم گزینه source هنگام فراخوانی .showPopover({source}) یا .togglePopover({source}) عنصر منبع به‌طور خودکار تنظیم می‌شود.

یک پشته برای پاپاورهای خودکار و یک پشته جداگانه برای پاپاورهای اشاره وجود دارد. با این حال، اگر یک پاپ‌اور راهنمایی را از داخل پاپ‌اور خودکار باز کنید، به پشته خودکار اضافه می‌شود.

به یاد داشته باشید که پاپ‌اورهای راهنمایی برای اطلاعات ساده‌تر و گذرا در نظر گرفته شده‌اند، بنابراین نمی‌توانید پاپ‌اور خودکار را از یک پاپ‌اور راهنمایی راه‌اندازی کنید.

اگر از پاپاورهای دستی استفاده می کنید، باید همه اینها را به صورت دستی مدیریت کنید.

بستن سایر انواع پاپاور

شما آموخته اید که باز کردن یک پاپاور خودکار دیگر پاپاورهای خودکار را می بندد، اما انواع مختلف چگونه با هم تعامل دارند؟ این را با مثالی از صفحه ای که از هر سه نوع استفاده می کند کاوش کنید. یک منوی ناوبری با دکمه هایی وجود دارد که از پاپاورهای خودکار برای باز و بسته کردن استفاده می کنند. متنی در صفحه وجود دارد که از پاپاورهای اشاره برای نشان دادن نکات متنی استفاده می کند. و در نهایت، یک نان تست با پاپاور دستی وجود دارد که به کاربر اطلاع می‌دهد که یک کار پس‌زمینه انجام شده است.

نکات ابزار زودگذر هستند و زمانی که ماوس را روی متن قرار می دهیم ظاهر می شوند. ما انتظار داریم که در هر لحظه فقط یک راهنمای ابزار قابل مشاهده باشد، و با راه‌اندازی پاپ‌اور اشاره دوم، مورد اول بسته می‌شود.

هنگامی که منو را با کلیک کردن بر روی یک دکمه باز می کنید، به دو دلیل راهنمایی بسته می شود. ابتدا، کلیک خارج از اشاره باعث رد شدن نور می شود. دوم، باز کردن پاپ‌اور خودکار، تمام پاپ‌اورهای اشاره باز را رد می‌کند. این به این دلیل است که کاربر چیزی را که روی آن تمرکز می‌کند تغییر داده است و محتوای زودگذر در پاپ‌اور اشاره دیگر مرتبط نیست. این به این معنی است که اگر showPopover() را در یک popover خودکار فراخوانی کنید، هر popover اشاره باز بسته خواهد شد.

منوهای کشویی به صورت خودکار پاپاور هستند. با منوهای کشویی، شما انتظار دارید که هر بار فقط یکی باز باشد و باز کردن یکی، دیگری را می بندد. همانطور که دیدید، باز کردن پاپ‌اور خودکار، پاپ‌اورهای اشاره باز را نیز می‌بندد.

با این حال، در حالی که یک منوی کشویی باز است، ممکن است بخواهید محتوای یک راهنمای ابزار نامرتبط را مشاهده کنید. نمایش یک نکته ابزار راهنمایی، پاپاورهای خودکار را نمی‌بندد.

پاپ‌اور دستی تحت تأثیر پاپ‌اورهای خودکار یا اشاره‌ای قرار نمی‌گیرد و وقتی باز می‌شود، هیچ اشاره یا پاپ‌اور خودکاری را نمی‌بندد. با این حال، اگر پاپاور دستی را با کلیک کردن بر روی یک دکمه باز کنید، این امر باعث می‌شود که اشاره و پاپ‌اور خودکار حذف شود.

فعل و انفعالات بین انواع پاپاور ممکن است پیچیده به نظر برسد، اما اگر از انواع در موقعیت‌های صحیح استفاده کنید، الگوهای استفاده متداول را ممکن می‌سازند. اگر پاپاورهای شما آنطور که انتظار می رود با هم تعامل ندارند، دوباره از کدام نوع استفاده می کنید.

درک خود را بررسی کنید