التمرير الرأسي والأفقي هما طريقتان للتنقل في صفحة ويب باستخدام الماوس أو لوحة اللمس أو الإصبع. يتم استخدام التمرير العمودي عندما يتجاوز محتوى العنصر ارتفاع الحاوية. بينما يتم استخدام التمرير الأفقي عندما يتجاوز المحتوى داخل عنصر عرض الحاوية. يتيح التمرير العمودي للمستخدمين تحريك صفحة الويب لأعلى ولأسفل بينما يسمح التمرير الأفقي للصفحة بالتحرك إلى اليسار واليمين. يوفر Tailwind CSS فئات أدوات مساعدة لتمكين التمرير الرأسي والأفقي على صفحات الويب.
هذه المقالة سوف تمثل:
كيفية تمكين التمرير العمودي في Tailwind؟
لتمكين التمرير العمودي في Tailwind ، استخدم ' تجاوز ص التمرير 'فئة الأداة المساعدة مع العنصر المطلوب في برنامج HTML. يسمح بالتمرير العمودي ويظهر دائمًا أشرطة التمرير ما لم يقم المستخدم بتعطيل أشرطة التمرير 'المرئية دائمًا' في إعدادات النظام الخاصة به.
بناء الجملة
< عنصر فصل = 'overflow-y-scroll ...' > ... عنصر >
مثال: تمكين التمرير الرأسي
في هذا المثال ، سننشئ حاوية مرنة مع بعض العناصر المرنة في عمود ونطبق ' تجاوز ص التمرير 'فائدة لذلك:
< جسم >
< شعبة فصل = 'فلكس فليكس كول overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 1 شعبة >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 2 شعبة >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 3 شعبة >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 4 شعبة >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 5 شعبة >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 6 شعبة >
شعبة >
جسم >
هنا ، في الأصل
- ' ثني 'لضبط أحجام العنصر الفرعي على أساس المساحة المتاحة من خلال إنشاء تخطيط مرن.
- ' فليكس كول 'فئة تحدد الاتجاه المرن للحاوية لعمود.
- ' تجاوز ص التمرير 'فئة التمرير الرأسي.
- ' bg-purple-700 'فئة تعيين اللون الأرجواني لخلفية الحاوية.
- ' ص 4 'فئة 4 وحدات من الحشو على جميع جوانب الحاوية.
- ' MX-14 'فئة تطبق 14 وحدة من الهامش على المحور x للحاوية.
- ' طن متري 5 تطبق فئة 5 وحدات من الهامش على الجزء العلوي من الحاوية.
- ' ساعة 36 تحدد فئة ارتفاع الحاوية على 36 وحدة.
في الطفل
- ' bg-yellow-400 تضبط فئة 'خلفية عناصر الشبكة باللون الأصفر.
- ' ص -2 'فئة تضيف 3 وحدات من الحشو إلى المحتوى داخل العناصر المرنة.
- ' م -2 'فئة تحدد هامش 2 وحدة للعناصر المرنة.
انتاج |
في الإخراج أعلاه ، يمكن ملاحظة أن التمرير العمودي قد تم تمكينه بنجاح.
كيفية تمكين التمرير الأفقي في Tailwind؟
لتمكين التمرير الأفقي في Tailwind ، استخدم ' تجاوز x التمرير 'فئة الأداة المساعدة مع العنصر المحدد في برنامج HTML. يتيح التمرير الأفقي ويعرض أشرطة التمرير دائمًا ما لم يقم المستخدم بتعطيل أشرطة التمرير 'المرئية دائمًا' في إعدادات النظام الخاصة به.
بناء الجملة
< عنصر فصل = 'overflow-x-scroll ...' > ... عنصر >
مثال: تمكين التمرير الأفقي
في هذا المثال ، سننشئ حاوية مرنة مع بعض العناصر المرنة في صف ونطبق ' تجاوز x التمرير 'فائدة لذلك:
< جسم >< شعبة فصل = 'فلكس فليكس صف فائض-س-تمرير فضاء-س -24 BG-أرجواني-700 ف 4 مكس-14 طن -5 ساعة -36' >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 1 شعبة >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 2 شعبة >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 3 شعبة >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 4 شعبة >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 5 شعبة >
< شعبة فصل = 'bg-yellow-400 p-2 m-2' > 6 شعبة >
شعبة >
جسم >
هنا في الأصل
انتاج |
يشير الإخراج أعلاه إلى أنه تم تمكين التمرير الأفقي بنجاح.
خاتمة
لتمكين التمرير الرأسي والأفقي في Tailwind ، فإن الخيار ' تجاوز ص التمرير ' و ' تجاوز x التمرير ”يتم استخدام فئات المرافق على التوالي. يتم تطبيق هذه الأدوات المساعدة على العناصر المطلوبة في برنامج HTML لتمكين التمرير الرأسي والأفقي وإظهار أشرطة التمرير دائمًا. توضح هذه المقالة طريقة تمكين التمرير الرأسي والأفقي في Tailwind.