ثريد front end
كيف عمل مفتاح تحويل switch
بإستخدام html and css
👇🏻
كيف عمل مفتاح تحويل switch
بإستخدام html and css
👇🏻
في البدايه يجب إنشاء عناصر html و
عمل التنسيق الأساسي
الصور تحت.
نلاحظ انه تم إخفاء input
الهدف الأساسي عند النقر على label
يتم تحديد قيمه ال input checkbox
و بهذه الطريقة لن نحتاج إلى إظهار ال input
👇🏻
عمل التنسيق الأساسي
الصور تحت.
نلاحظ انه تم إخفاء input
الهدف الأساسي عند النقر على label
يتم تحديد قيمه ال input checkbox
و بهذه الطريقة لن نحتاج إلى إظهار ال input
👇🏻
نقوم بتحديد التنسيق الأساسي لل span
الصوره تحت
span::before
يستخدم في عمل الدائرة التي بداخل switch
الصوره تحت
span::before
يستخدم في عمل الدائرة التي بداخل switch
في الصورة تحت يتم إستخدام ال
input:checked
من أجل التحكم في مكان الدائرة بداخل switch
و لون خلفيه ال switch
إذا تم النقر على ال label يتم تغيير قيمه ال input checkbox الى true
و يتم تطبيق التنسيق تحت
input:checked
من أجل التحكم في مكان الدائرة بداخل switch
و لون خلفيه ال switch
إذا تم النقر على ال label يتم تغيير قيمه ال input checkbox الى true
و يتم تطبيق التنسيق تحت
و عند النقر مره أخرى يتم تغيير قيمه ال input checkbox
إلى false و لا يتم تطبيق التنسيق 🙃
بمعنى آخر
input:checked
يتم تطبيق التنسيق بداخلها عندما يتم عمل check لل
input checkbox
اشاره ال + تعني
العنصر الأخ
👇🏻
إلى false و لا يتم تطبيق التنسيق 🙃
بمعنى آخر
input:checked
يتم تطبيق التنسيق بداخلها عندما يتم عمل check لل
input checkbox
اشاره ال + تعني
العنصر الأخ
👇🏻
مثلا
input:checked + span
تعني إختيار العنصر span
إذا تم عمل check لل input checkbox
👇🏻
input:checked + span
تعني إختيار العنصر span
إذا تم عمل check لل input checkbox
👇🏻
نلتقي في ثريد أخر 😇
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
Loading suggestions...