ثريد Front end
طريقة عمل switch btn
بإستخدام input وأحد فقط
و بدون javascript
قراءة ممتعة 😇
🧵👇🏻
طريقة عمل switch btn
بإستخدام input وأحد فقط
و بدون javascript
قراءة ممتعة 😇
🧵👇🏻
الصوره رقم 1
تحتوي على البنيه الاساسيه
الخاصية الجديدة هي
appearance: none;
و الهدف منها التخلص من التنسيق الأساسي الذي يقوم المتصفح بعمله لل
input checkbox
بعد التخلص من التنسيق الأساسي من الممكن أضافه التنسيق الخاص بنا بكل سهولة.
👇🏻
تحتوي على البنيه الاساسيه
الخاصية الجديدة هي
appearance: none;
و الهدف منها التخلص من التنسيق الأساسي الذي يقوم المتصفح بعمله لل
input checkbox
بعد التخلص من التنسيق الأساسي من الممكن أضافه التنسيق الخاص بنا بكل سهولة.
👇🏻
في الصورة رقم 2
نلاحظ ان الأب
.switch
يحتوي على الإبن
.switch::before
👇🏻
نلاحظ ان الأب
.switch
يحتوي على الإبن
.switch::before
👇🏻
في الصورة رقم 3
تم إضافة تنسيق للعنصر before
👇🏻
تم إضافة تنسيق للعنصر before
👇🏻
بعد أضافه التنسيق الخاص بنا
في الصورة رقم 4
يتم تغيير خلفيه الأب
و تغيير خلفية و مكان الإبن
نستخدم
:checked
من أجل تحديد إذا تم النقر على input checkbox
إذا تم النقر يتم تطبيق الخواص
👇🏻
في الصورة رقم 4
يتم تغيير خلفيه الأب
و تغيير خلفية و مكان الإبن
نستخدم
:checked
من أجل تحديد إذا تم النقر على input checkbox
إذا تم النقر يتم تطبيق الخواص
👇🏻
ملاحظة مهمة
الخاصية appearance
غير مدعومة في كل المتصفحات و يجب أضافه ال prefix
👇🏻
الخاصية appearance
غير مدعومة في كل المتصفحات و يجب أضافه ال prefix
👇🏻
نلتقي في ثريد أخر 😇
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
جاري تحميل الاقتراحات...