ستوضح هذه المقالة طريقة تطبيق تأثير التمرير على أداة التدفق التلقائي للشبكة في Tailwind CSS.
كيفية تطبيق Hover on Grid Auto Flow في Tailwind؟
لتطبيق تأثير التمرير على التدفق التلقائي للشبكة في Tailwind ، أنشئ ملف HTML واستخدم ' يحوم 'فئة مع' تدفق الشبكة- <كلمة رئيسية> ”في برنامج HTML. يغير موضع عناصر الشبكة عندما يحوم الماوس فوقها. أخيرًا ، اعرض صفحة HTML على الويب وحرك الماوس فوق عناصر الشبكة لضمان التغييرات.
انظر إلى الخطوات المقدمة لتنفيذها العملي:
الخطوة 1: استخدم خاصية التمرير مع شبكة الصف في برنامج HTML
قم بإنشاء برنامج HTML واستخدم ' يحوم 'مع' المطلوب ' تدفق الشبكة- <كلمة رئيسية> ' جدوى. على سبيل المثال ، استخدمنا ' تحوم: صف تدفق الشبكة 'لتغيير موضع عناصر الشبكة من عمود إلى صف عند التمرير فوق الماوس:
< جسم >
< شعبة فصل = 'تحويم الشبكة - التدفق - العمود: فجوة صف تدفق الشبكة - 3 متر - 3 مركز النص' >
< شعبة فصل = 'bg-teal-500 p-5' > 1 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 2 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 3 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 4 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 5 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 6 < / شعبة >
< / شعبة >
< / جسم >
هنا:
- ' شبكة 'فئة تحدد العنصر كحاوية شبكة.
- ' شبكة تدفق العمود يعرّف 'تدفق عناصر الشبكة في الأعمدة.
- ' تحوم: صف تدفق الشبكة 'class يغير تدفق عناصر الشبكة إلى صفوف عندما يحوم الماوس فوق الحاوية.
- ' فجوة 3 يضيف فجوة من 3 وحدات بين عناصر الشبكة.
- ' م -3 يضيف هامشًا بمقدار 3 وحدات حول حاوية الشبكة.
- ' مركز النص 'محاذاة محتوى النص داخل عناصر الشبكة إلى المركز.
الخطوة 2: تحقق من الإخراج
للتحقق من تطبيق تأثير التمرير على التدفق التلقائي للشبكة ، اعرض صفحة الويب وحرك الماوس فوق عناصر الشبكة:
يمكن ملاحظة أن تدفق عناصر الشبكة في البداية يكون في أعمدة وعندما يحوم الماوس فوقها ، يتم تغيير التدفق إلى صفوف. يشير هذا إلى أنه تم تطبيق تأثير التمرير بنجاح على التدفق التلقائي للشبكة.
خاتمة
لتطبيق تأثير التمرير على التدفق التلقائي للشبكة في Tailwind ، استخدم ' يحوم 'فئة مع' المطلوب ' تدفق الشبكة- <كلمة رئيسية> ”في برنامج HTML. يغير موضع عناصر الشبكة عندما يحوم الماوس فوقها. لضمان التغييرات ، اعرض صفحة HTML على الويب وحرك الماوس فوق عناصر الشبكة. توضح هذه المقالة طريقة تطبيق تأثير التمرير على الأداة المساعدة للتدفق التلقائي للشبكة في Tailwind CSS.