تگ جدید HTML: یک تغییر مطلق بازی

Summarize this content to 400 words in Persian Lang

توسعه Frontend که توسط New تغییر شکل یافته است برچسب بزنید

❌ قبل از:

ایجاد دیالوگ قبلاً یک کار سخت بود. در اینجا این است که چقدر کار طول کشید:

class=”dialog-overlay”>
class=”dialog”>
Dialog content…
class=”close-button”>Close

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

/* CSS for the dialog */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}

.dialog {
background: white;
padding: 20px;
border-radius: 5px;
}

.close-button {
background: #f44336;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و این فقط CSS برای عملکرد اصلی گفتگو است. هنوز هم بسیار ساده به نظر می رسد و برای باز کردن و بستن گفتگو به جاوا اسکریپت اضافی نیاز دارد.

✅ اکنون:

با جدید برچسب، ما می‌توانیم با تلاش بسیار کمتری به همین عملکرد دست پیدا کنیم.

Dialog content…
class=”close-button”>Close

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

// JavaScript to show and close the dialog
const dialog = document.querySelector(‘dialog’);
dialog.showModal(); // To show the dialog
dialog.querySelector(‘.close-button’).addEventListener(‘click’, () => dialog.close());

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما حتی می توانیم استفاده کنیم show() روشی برای نمایش دیالوگ غیر مدال، که کمتر مزاحم است زیرا پس‌زمینه ندارد.

// JavaScript to show a non-modal dialog
const dialog = document.querySelector(‘dialog’);
dialog.show(); // To show a non-modal dialog

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دیالوگ ها: یک مؤلفه UI حیاتی

دیالوگ ها همیشه ابزاری قدرتمند برای جلب توجه کاربران و ارائه اطلاعات مهم بوده اند. آنها یک ویژگی کلیدی در هر سیستم طراحی UI هستند، از طراحی متریال تا طراحی روان.

با این حال، استفاده از دیالوگ ها اغلب به کتابخانه های شخص ثالث یا اجزای سفارشی نیاز دارد. بسیاری از این کتابخانه‌ها از بهترین روش‌ها برای قابلیت استفاده و دسترسی، مانند رد کردن گفتگو با کلید Escape، پیروی نمی‌کنند.

جدید برچسب همه اینها را ساده می کند.

باز کردن خودکار گفتگو

را open ویژگی گفتگو را از لحظه بارگیری صفحه باز نگه می دارد:

open>
Auto-open dialog content…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دکمه بستن خودکار

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

Dialog content…
class=”close-button” onclick=”this.closest(‘dialog’).close()”>Close

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک ظاهر طراحی شده برچسب بزنید

را برچسب خاصی دارد ::backdrop شبه عنصر برای یک ظاهر طراحی شده پس زمینه.

dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سبک دادن به عنصر اصلی ساده است:

dialog {
background: white;
padding: 20px;
border-radius: 5px;
border: none;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

افکار نهایی

با HTML جدید تگ، ایجاد مدال ها و دیالوگ ها در برنامه های وب ما هرگز آسان تر و سریع تر نبوده است. این تگ پیچیدگی اجرای دیالوگ ها را به میزان قابل توجهی کاهش می دهد، دسترسی را افزایش می دهد و به توسعه دهندگان اجازه می دهد بهترین شیوه ها را بدون زحمت دنبال کنند.لطفا وبلاگ من را به اشتراک بگذارید و هر طور که می خواهید واکنش نشان دهید …

با من در https://topmate.io/manojgohel ملاقات کنید

 class="dialog-overlay">
  
 class="dialog">
    Dialog content...
     class="close-button">Close
  

/* CSS for the dialog */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

.close-button {
  background: #f44336;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

  Dialog content...
   class="close-button">Close

// JavaScript to show and close the dialog
const dialog = document.querySelector('dialog');
dialog.showModal(); // To show the dialog
dialog.querySelector('.close-button').addEventListener('click', () => dialog.close());

// JavaScript to show a non-modal dialog
const dialog = document.querySelector('dialog');
dialog.show(); // To show a non-modal dialog

 open>
  Auto-open dialog content...

  Dialog content...
   class="close-button" onclick="this.closest('dialog').close()">Close

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

dialog {
  background: white;
  padding: 20px;
  border-radius: 5px;
  border: none;
}