با کشویی های خسته کننده خداحافظی کنید: منوهای کشویی سفارشی با رابط کاربری Headless ایجاد کنید

ایجاد یک وب سایت کار کوچکی نیست. این نیاز به برنامه ریزی دقیق، طراحی استراتژیک و اجرای متفکرانه دارد. و یکی از مهمترین عناصر هر وب سایت رابط کاربری (UI) آن است.

مؤلفه‌های رابط کاربری تعاملی یک وب‌سایت به‌عنوان دروازه‌ای عمل می‌کنند که از طریق آن کاربران با سایت تعامل دارند و نقش مهمی در شکل‌دهی تجربه کاربر دارند.

از منوهای کرکره‌ای گرفته تا مدال‌ها و تب‌ها، اجزای رابط کاربری برای کاربرپسندتر کردن وب‌سایت‌ها و شهودی‌تر کردن آنها ضروری هستند. اما ادغام این اجزاء کار آسانی نیست زیرا آنها همچنین باید کاملاً در دسترس باشند و همچنین دارای گزینه‌های قابلیت استفاده مجدد و سفارشی‌سازی باشند.

و اینجاست که UI Headless به کمک می آید.

Headless UI یک بسته npm است که یک راه حل عملی برای این مشکل ارائه می دهد. این به شما امکان می‌دهد تا اجزای رابط کاربری کاملاً بدون استایل بسازید که کاملاً در دسترس هستند و به راحتی در وب‌سایت شما ادغام می‌شوند. این توسط آزمایشگاه های Tailwind که همچنین خالقان TailwindCSS هستند ایجاد شده است.

با استفاده از Headless UI، می‌توانید بیشتر روی استایل‌سازی اجزای خود با TailwindCSS تمرکز کنید و کمتر روی جنبه‌های کاربردی و قابلیت دسترسی چیزها تمرکز کنید. این امر UI Headless را از سایر کتابخانه‌های رابط کاربری بسیار خوش‌بینانه‌تر مانند چاکرا و بوت استرپ جدا می‌کند، زیرا تمام مسئولیت استایل بر عهده توسعه‌دهنده است.

و بر اساس آن، ما یک منوی کشویی با استفاده از Headless UI و TailwindCSS در این وبلاگ خواهیم ساخت.

بیا شروع کنیم.

راه اندازی محیط توسعه دهنده

هنگامی که می خواهید از TailwindCSS در داخل یک برنامه React استفاده کنید، ابتدا باید آن را تنظیم و پیکربندی کنید.

• ابتدا با اجرای دستور یک برنامه React ایجاد کنید:

npx create-react-app my-app

• در مرحله بعد، TailwindCSS و سایر وابستگی ها مانند postcss و autoprefixer را با استفاده از دستور نصب کنید:

npm install -D tailwindcss postcss autoprefixer

• با اجرای دستور زیر فایل های کانفیگ ایجاد کنید:

npx tailwindcss init -p

حالا فایل tailwind.config.css را باز کنید و محتوا را با قطعه کد ارائه شده جایگزین کنید.

/** @type {import('tailwindcss').Config} */

module.exports = {
content: [
   "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

• قطعه کد زیر را در فایل src/index.css قرار دهید:

@tailwind base;
@tailwind components;
@tailwind utilities;

اکنون می توانید از TailwindCSS در برنامه React خود استفاده کنید.

• نصب Headless UI نسبتا ساده است. فقط این دستور را اجرا کنید و سپس می توانید آن را در هر جایی از برنامه React خود استفاده کنید.

npm install @headlessui/react

ایجاد یک منوی کشویی سنتی

در حالی که ایجاد یک منوی کشویی اولیه یک کار نسبتاً ساده است، اما می تواند دست و پا گیر شود و شما را از اجرای ویژگی های بسیار مهم تر باز دارد.

import { useState } from 'react'

function App() {
 const [isOpen, setIsOpen] = useState(false)


 return (
   <div className="relative inline-block text-left">
     <button
       type="button"
       className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm text-gray-700 hover:bg-gray-50"
       onClick={() => setIsOpen(!isOpen)}
     >
       More
     </button>
     {isOpen && (
       <div className="absolute z-10 mt-2 w-56 rounded-md shadow-lg bg-white ">
         <div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
           <a href="https://dev.to/account-settings" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Account settings</a>
           <a href="http://dev.to/documentation" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Documentation</a>
           <span className="block px-4 py-2 text-sm text-gray-700 opacity-50" role="menuitem">Invite a friend (coming soon!)</span>
         </div>
       </div>
     )}
   </div>
 )
}

export default App

برای ایجاد یک منوی کشویی کاربردی، باید حدود 20 خط کد مانند تصویر بالا بنویسید.

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

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

ایجاد یک منوی کشویی قابل تنظیم با رابط کاربری Headless

هنگام استفاده از Headless UI برای منوی کشویی، درک مفاهیم اولیه بسیار مهم است.

چهار جزء اصلی وجود دارد: “Menu”، “Menu.Button”، “Menu.Items” و “Menu.Item”. همانطور که از نام ها پیداست، مولفه “Menu” شامل همه چیز است، “Menu.Button” اساسا یک دکمه است، و مولفه “Menu.Items” شامل چندین مولفه “Menu.Item” است.

این مفهوم ترکیب کامپوننت ها سنگ بنای Headless UI است و شاهد تکرار این الگو برای سایر اجزای UI مانند پاپاورها و دیالوگ ها خواهید بود.

با این گفته، در اینجا کد اصلی بر اساس مستندات رسمی است.

import { Menu } from '@headlessui/react'

function App() {
  return (
    <Menu>
      <Menu.Button>More</Menu.Button>
      <Menu.Items>
        <Menu.Item>
          {({ active }) => (
            <a
              className={`${active && 'bg-blue-500'}`}
              href="https://dev.to/account-settings"
            >
              Account settings
            </a>
          )}
        </Menu.Item>
        <Menu.Item>
          {({ active }) => (
            <a
              className={`${active && 'bg-blue-500'}`}
              href="https://dev.to/account-settings"
            >
              Documentation
            </a>
          )}
        </Menu.Item>
        <Menu.Item disabled>
          <span className="opacity-75">Invite a friend (coming soon!)</span>
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

export default App 

در قطعه کد، ویژگی “active” به عنوان آرگومان برای تابع استفاده می شود.

هنگامی که “active” درست است، ویژگی className عنصر “a” روی “bg-blue-500” تنظیم می شود و به آن رنگ پس زمینه آبی می دهد. برعکس، زمانی که “active” false باشد، ویژگی className روی یک رشته خالی تنظیم می شود و رنگ پس زمینه حذف می شود.

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

اکنون که یک منوی کشویی کاربردی داریم، وقت آن است که سبکی را اضافه کنیم. از آنجایی که TailwindCSS را نصب کرده ایم، می توانیم از آن برای افزودن سبک به منوی خود استفاده کنیم.

import { Menu } from '@headlessui/react'

function App() {
 return (
   <div className="shadow-md bg-white w-48">
     <Menu>
       <Menu.Button className="px-4 py-2 text-sm font-medium text-gray-700">
         More
       </Menu.Button>
       <Menu.Items className="py-2 text-sm font-medium text-gray-700">
         <Menu.Item>
           {({ active }) => (
             <a
               className={`block px-4 py-2 ${active ? 'bg-blue-500 text-white' : 'text-gray-700'
                 }`}
               href="https://dev.to/account-settings"
             >
               Account settings
             </a>
           )}
         </Menu.Item>
         <Menu.Item>
           {({ active }) => (
             <a
               className={`block px-4 py-2 ${active ? 'bg-blue-500 text-white' : 'text-gray-700'
                 }`}
               href="https://dev.to/account-settings"
             >
               Documentation
             </a>
           )}
         </Menu.Item>
         <Menu.Item disabled>
           <span className="block px-4 py-2 text-gray-400">
             Invite a friend (coming soon!)
           </span>
         </Menu.Item>
       </Menu.Items>
     </Menu>
   </div>
 )
}

export default App

در اینجا خروجی است:

قابلیت سفارشی‌سازی در اینجا متوقف نمی‌شود – Headless UI همچنین به شما اجازه می‌دهد تا عملکرد منوی کشویی خود را بیشتر تنظیم کنید. به عنوان مثال، می توانید با گذراندن علامت، زمان باز و بسته شدن منو را به صورت دستی کنترل کنید open وclose به اجزای مربوطه کمک می کند.

برای مثال، می‌توانید کد زیر را که از کد زیر استفاده می‌کند، بررسی کنید open وclose لوازم جانبی

import { Menu } from '@headlessui/react'

function App() {
 return (
   <Menu>
     {({ open }) => (
       <>
         <Menu.Button>More</Menu.Button>
         {open && (
           <div>
             <Menu.Items static>
               <Menu.Item>
                 {({ active }) => (
                   <a
                     className={`${active
                       ? 'bg-gray-100 text-gray-900'
                       : 'text-gray-700'
                       } block px-4 py-2 text-sm`}
                     href="https://dev.to/account-settings"
                   >
                     Account settings
                   </a>
                 )}
               </Menu.Item>
               <Menu.Item>
                 {({ active }) => (
                   <a
                     className={`${active
                       ? 'bg-gray-100 text-gray-900'
                       : 'text-gray-700'
                       } block px-4 py-2 text-sm`}
                     href="http://dev.to/documentation"
                   >
                     Documentation
                   </a>
                 )}
               </Menu.Item>
               <Menu.Item disabled>
                 <span className="block px-4 py-2 text-sm text-gray-400">
                   Invite a friend (coming soon!)
                 </span>
               </Menu.Item>
             </Menu.Items>
           </div>
         )}
       </>
     )}
   </Menu>
 )
}

export default App

و چنین API مؤلفه‌هایی وجود دارد که Headless UI ارائه می‌کند.

با استفاده از این ویژگی های قدرتمند، می توانید یک منوی کشویی واقعاً سفارشی ایجاد کنید که تمام نیازهای منحصر به فرد شما را برآورده می کند.

رها کردن قدرت UI Headless

در مورد ادغام صحبت می کنیم، رابط کاربری Headless را می توان به راحتی در برنامه های React و Next.js ادغام کرد. و همچنین می‌توانید با TailwindCSS استایل‌ها را به اجزای خود اضافه کنید.

یکی دیگر از مزایای کلیدی استفاده از Headless UI ویژگی های دسترسی عالی آن مانند مدیریت فوکوس، تعامل با ماوس و تعامل با صفحه کلید است.

همچنین، کتابخانه از تمام ویژگی‌های مرتبط ARIA مراقبت کرده است و چندین ویژگی دیگر مانند «فعال»، «باز»، «بستن»، «به‌عنوان»، «unmount» و بسیاری موارد دیگر را ارائه کرده است تا به شما در سفارشی‌سازی بیشتر مؤلفه‌ها کمک کند. بر اساس نیاز شما

بنابراین، چه بخواهید یک منوی کشویی ساده بسازید یا یک مؤلفه رابط کاربری پیچیده تر، Headless UI تمام قابلیت های لازم و ویژگی های دسترسی را برای آسان تر و کارآمدتر کردن فرآیند توسعه شما فراهم می کند.

در حالی که UI Headless برای ساخت اجزای رابط کاربری قابل دسترس که خارج از جعبه کار می کنند و به طور یکپارچه با TailwindCSS ادغام می شوند عالی است، برای شروع به یک پایگاه کد React پاسخگو با TailwindCSS نیاز دارید.

با استفاده از پلاگین Locofy.ai می توانید کدهای پاسخگو را مستقیماً از فایل های طراحی خود در Figma و Adobe XD ایجاد کنید.

Locofy به طور خودکار تنظیمات و محدودیت های چیدمان خودکار Figma شما را برای تولید کد پاسخگو با ویژگی های انعطاف پذیر انتخاب می کند. علاوه بر این، می‌توانید از TailwindCSS به‌عنوان گزینه استایل پیش‌فرض استفاده کنید تا کد تولید شده توسط Locofy شما از TailwindCSS برای مدیریت سبک‌ها استفاده کند.

سپس می‌توانید از این مؤلفه‌های Headless UI برای ترکیب کردن کشویی‌های قابل دسترس، تکمیل خودکار، برگه‌ها و سایر مؤلفه‌های مشابه استفاده کنید.

امیدوارم دوست داشته باشید.

همین – با تشکر.