فتح قائمة Radix المنسدلة عند التمرير بدلاً من النقر في ReactJS

تعتبر تجربة المستخدم عنصرًا حيويًا في تطوير تطبيقات الويب، وخصوصًا عندما نتحدث عن العناصر التفاعلية مثل القوائم المنسدلة. في هذا المقال، سنستعرض كيفية تعديل سلوك قائمة Radix المنسدلة في React.js بحيث يتم فتحها عند المرور فوقها بدلاً من النقر عليها، وهو ما يجعل التفاعل معها أكثر سلاسة وراحة للمستخدمين.

لماذا نختار Radix Dropdown Menu؟

تقدم مكتبة Radix مجموعة من المكونات التي تركز على توفير واجهات مستخدم قابلة للوصول وسهلة الاستخدام. تعتبر القائمة المنسدلة من المكونات الشائعة في تطبيقات الويب، إذ توفر للمستخدم إمكانية اختيار قيمة معينة من مجموعة من الخيارات. ومع ذلك، قد يُفضل بعض المطورين فتح هذه القوائم عن طريق التمرير بدلاً من النقر، مما يساهم في تجربة تفاعلية أفضل.

تعديل سلوك القائمة المنسدلة

لنبدأ بإعداد المكون. إذا كنت تستخدم قائمة Radix، فإن المكون المبدئي قد يبدو كالتالي:

import { DropdownMenu } from '@radix-ui/react-dropdown-menu';
export function MyDropdown() {
    return (
        <DropdownMenu>
            <DropdownMenu.Trigger>
                انقر فوق العنصر
            </DropdownMenu.Trigger>
            <DropdownMenu.Content>
                <DropdownMenu.Item>الخيار 1</DropdownMenu.Item>
                <DropdownMenu.Item>الخيار 2</DropdownMenu.Item>
            </DropdownMenu.Content>
        </DropdownMenu>
    );
}

لكي نقوم بتفعيل فتح القائمة عند التمرير، يجب أن نضيف بعض الأحداث المختلفة إلى العنصر الذي نريد استخدامه. من خلال الاستماع لحدث onMouseEnter، يمكننا إطلاق مبدأ فتح القائمة. إليك كيف يمكنك القيام بذلك.

إضافة الأحداث المناسبة

سوف نقوم بتحديث الكود ليشمل أحداث التمرير. إليك النسخة المعدلة:

import { DropdownMenu } from '@radix-ui/react-dropdown-menu';
import { useState } from 'react';
export function MyDropdown() {
    const [open, setOpen] = useState(false);
    return (
        <DropdownMenu open={open} onOpenChange={setOpen}>
            <DropdownMenu.Trigger
                onMouseEnter={() => setOpen(true)}
                onMouseLeave={() => setOpen(false)}
            >
                مرر فوق العنصر
            </DropdownMenu.Trigger>
            <DropdownMenu.Content>
                <DropdownMenu.Item onMouseLeave={() => setOpen(false)}>الخيار 1</DropdownMenu.Item>
                <DropdownMenu.Item onMouseLeave={() => setOpen(false)}>الخيار 2</DropdownMenu.Item>
            </DropdownMenu.Content>
        </DropdownMenu>
    );
}

باستخدام هذا النهج، ستظهر القائمة المنسدلة تلقائيًا عند وضع المؤشر فوق عنصر التشغيل، مما يمنح المستخدم تجربة أكثر سلاسة. وتجدر الإشارة إلى أنه سيكون من الضروري أيضًا إغلاق القائمة عند مغادرة المؤشر للعنصر أو قائمة الخيارات، وهذا ما يتم تنفيذه عبر أحداث onMouseLeave في المثال أعلاه.

التأكد من الوصولية

يجدر بالذكر أنه عندما نفكر في سلوك القوائم المنسدلة، يجب أن نتأكد دائمًا من أن التصميم الخاص بنا يلبي معايير الوصولية. قد يكون من المفيد أيضًا إضافة نصائح مرئية أو توجيه المستخدمين بشأن كيفية استخدام هذه القوائم، خصوصًا إذا كانت التفاعلات غير تقليدية. يمكن أن يساعد ذلك في جعل تجربة استخدام التطبيق أكثر وضوحًا.

الخاتمة

إن تعديل سلوك قائمة Radix المنسدلة بحيث تفتح عند التمرير بدلاً من النقر هو خيار رائع لتحسين تجربة المستخدم. سواء كنت تبحث عن جذب إنتباه المستخدمين أو تحسين واجهة تطبيقاتك، فإن هذا التعديل البسيط قد يحدث فرقًا كبيرًا. إذا كنت تسعى لتعزيز تفاعل المستخدمين مع تطبيقك، فإن استخدام خاصية hover بدلاً من click هو أحد الإضافات الجيدة التي يمكنك تنفيذها. تذكر دائمًا أن تبقي أنماط الاستخدام واضحة وسهلة الفهم لتعزيز بيئة تفاعلية حقيقية.