مكتبة UIKIT : شرح اضافة toggleable notifications في موقعك

مكتبة UIKIT : شرح اضافة toggleable notifications في موقعك 
شرح اضافة زر اشعارات وكيفية اضافته لموقعك. 

شرح اضافة زر اشعارات وكيفية اضافته لموقعك.


شرح اضافة زر اشعارات

السلام عليكم متابعينا اليوم درس جديد من مكتبة UIKIT التي سبق وشرحنا العديد من مميزاتها وستجد الدروس في قسم البرمجة ومن أهم هذه الدروس هو درس  ايقونات التواصل الاجتماعي بشكل جديد لمكتبة uikit . اليوم ستضيف في موقعك زر اشعارات وهو معناه ان عند الضغط علي Button سيظهر لك رسالة من اعلي الموقع مثل الاشعارات تماما ويمكنك التعديل عليه كما تشاء.

وهذا فيديو بسيط قمنا بانشاءه لتوضيح اضافة زر الاشعارات 

كما تري الفيديو يوضح كل شي حول اضافة هذا الدرس نأتي الي شرح وضع الاضافة ولكن قبل وضع الاضافة يجب عليك وضع أكواد مكتبة UIKIT 

شرح وضع اكواد مكتبة UIKIT 

قم بالبحث عن <head> وضع هذه الأكواد أسفله 
  <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script> code-box

و بعد ذلك سنتوجه الي وضع الاضافة ذات نفسها وكيفية وضعها داخل مدونتك أوموقعك


شرح اضافة toggleable notifications

هي تضع في أماكن عديدة يمكنك وضعها في أي مكان HTML 
<button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: '<span uk-icon=\'icon: check\'></span>ضع رسالتك هنا'})">اسم الزر</button> code-box


كلمة أسم الزر الملون بـ اللون الأصفر هي أسم الزر Button 
كملة ضع رسالتك هنا الملونة بـ اللون الأحمر هي ما بداخل الرسالة التي ستظهر أعلي الموقع مثل notifications فقط كل ماعليك هو وضعهم في أي مكان HTML وليكن مثلا داخل المشاركات أو الصفحات ،اتمني ان يفيدكم هذا الدرس لاتنسي زيارة قسم بلوجر  لمزيد من المقالات والشروحات واذا واجهتك اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا,  او اذا كنت تريد  شرح معين عن  أي شي  لاتتردد في كتابته في التعليقات , وقم بالاطلاع علي شهادات الموقع

ارسال تعليق

أحدث أقدم