تگ جدید 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 ملاقات کنید
توسعه Frontend که توسط New تغییر شکل یافته است برچسب بزنید
❌ قبل از:
ایجاد دیالوگ قبلاً یک کار سخت بود. در اینجا این است که چقدر کار طول کشید:
class="dialog-overlay">
class="dialog">
Dialog content...
/* 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...
// 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
ویژگی گفتگو را از لحظه بارگیری صفحه باز نگه می دارد:
دکمه بستن خودکار
میتوانید عملکردهای نزدیک را با شنوندگان رویداد استاندارد اضافه کنید close()
روش، اما ساخته شده است این کار را حتی ساده تر می کند – بدون نیاز به جاوا اسکریپت.
Dialog content...
یک ظاهر طراحی شده برچسب بزنید
را برچسب خاصی دارد
::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 ملاقات کنید