معرفی
آیا تا به حال خواسته اید محتوا را به صورت پویا تنظیم کنید و دید عناصر UI را بر اساس حالت نمایش یک وب سایت سفارشی کنید؟ جلوترش رو نگاه نکن! من خوشحالم که شما را با آن آشنا می کنم tailwindcss-modes-display modes افزونه، یک افزونه قدرتمند برای Tailwind CSS که طراحی وب ریسپانسیو را با ارائه انواع اضافی برای حالت های نمایش خاص ساده می کند.
در این مقاله، بررسی خواهیم کرد که چگونه این افزونه می‌تواند فرآیند توسعه شما را متحول کند و به شما کمک کند تا بدون دردسر تجارب کاربری تطبیقی ایجاد کنید.
انگیزه
در طول سفرم به عنوان یک توسعه‌دهنده، هنگام ساختن یک برنامه وب پیشرو (PWA) با چالش خاصی روبرو شدم. من به روشی بی‌نظیر برای اصلاح محتوا و تنظیم سبک‌های یک عنصر UI بر اساس حالت‌های مختلف نمایش نیاز داشتم. علیرغم جستجوی یک افزونه Tailwind CSS که این قابلیت را ارائه می دهد، نتوانستم راه حل مناسبی پیدا کنم. با درک مزایای بالقوه برای توسعه دهندگان همکار که با همین معضل مواجه هستند، ماموریتی را برای ایجاد tailwindcss-modes-display modes.
درک حالت های نمایش
این tailwindcss-modes-display modes این افزونه از چهار حالت نمایش پشتیبانی می کند: مستقل، حداقل رابط کاربری، مرورگر و تمام صفحه.
برای درک دقیق عملکرد هر حالت نمایش، می توانید به اسناد موجود در MDN مراجعه کنید.
در حال نصب افزونه
برای افزودن این افزونه به پروژه خود دستور زیر را اجرا کنید.
npm i tailwindcss-diaplaymodes
اکنون این افزونه را در خود ثبت کنید tailwind.config.js/ts فایل.
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss-displaymodes'),
],
};
استفاده از انواع حالت نمایش
یکی از چالش‌های رایج در ساخت اپلیکیشن‌های وب پیشرو (PWA) این است که تصمیم بگیرید چه چیزی را به‌عنوان URL ریشه نشان دهید، به‌خصوص زمانی که به‌عنوان یک صفحه فرود عمل می‌کند که قابلیت‌های برنامه شما را برجسته می‌کند. با این حال، هنگامی که کاربران PWA شما را روی دستگاه های تلفن همراه یا دسکتاپ خود نصب کردند، ممکن است نخواهید به طور مداوم صفحه فرود را به آنها نشان دهید. با استفاده از این افزونه، دستیابی به این سطح از کنترل بدون دردسر می شود.
با استفاده از انواع حالت نمایش ارائه شده توسط افزونه، می توانید به راحتی صفحه فرود خود را برای کاربرانی که قبلا PWA شما را نصب کرده اند پنهان کنید. درعوض، می‌توانید پیوندهای سریعی را به آنها ارائه دهید تا مستقیماً به بخش‌های خاص حرکت کنند یا حتی داشبورد شخصی‌شده‌شان را پس از راه‌اندازی به آنها نشان دهید.
این انعطاف‌پذیری به شما امکان می‌دهد تجربه را بر اساس دستگاه کاربر و سابقه تعامل آنها با برنامه خود تنظیم کنید.
این انواع حالت های نمایش درست مانند انواع عادی عمل می کنند hover: یا focus: در دم باد بنابراین اگر اضافه کنید standalone:hidden کلاس به یک عنصر و سپس زمانی که کاربر pwa شما را پس از نصب باز می کند، آن عنصر پنهان می شود.
<div class="standalone:hidden">
This content will be hidden in standalone mode.
</div>
شما می‌توانید یک نسخه آزمایشی در Hex Cal پیدا کنید، یک pwa که من در حال حاضر روی آن کار می‌کنم. و کد منبع اینجاست.
نتیجه
با استفاده از این افزونه، ابزار قدرتمندی برای ایجاد وب سایت های واکنش گرا که به طور یکپارچه با حالت های مختلف نمایش سازگار می شوند، در اختیار دارید. با تنظیمات دستی خداحافظی کنید و به گردش کار توسعه کارآمدتر سلام کنید.
به یاد داشته باشید، در دنیای توسعه وب مدرن، ارائه تجربیات استثنایی کاربر در دستگاه‌های مختلف و حالت‌های نمایش بسیار مهم است. با tailwindcss-modes-display modes، شما به ابزارهای مناسب برای انجام این کار مجهز هستید.
هک مبارک
