|
|
| سطر 1: |
سطر 1: |
| <noinclude>{{DISPLAYTITLE:مكوِّن التنبيهات Alerts في إطار العمل Bootstrap}}</noinclude> | | <noinclude>{{DISPLAYTITLE:مكوِّن دورات الانتظار spinners في إطار العمل Bootstrap}}</noinclude> |
| استفد من رسائل التنبيه المرنة التي يوفّرها إطار العمل Bootstrap لإظهار رسائل تغذيّة راجعة للإجراءات النمطيّة التي يقوم بها الزوّار.
| | وضّح لزوار موقعك حالة التحميل الخاصة بالمكوّن أو الصفحة باستخدام دوارات Bootstrap، وهي مبنية بالكامل باستخدام HTML و CSS، ولا تستخدم JavaScript. |
|
| |
|
| == أمثلة == | | == نظرة عامة == |
| تتوفّر التنبيهات Alerts بصيغة نصوص غير محدودة الطول، كما تتوفّر بصيغة أزرار تجاهل اختياريّة. استخدم واحدًا من أصناف السيّاق الثمانيّة '''الإجباريّة''' من أجل الحصول على تنسيق صحيح للتنبيهات (مثلًا للتنبيه على نجاح إجراء <code>.alert-success</code>). استخدم مُلحَق تنبيهات jQuery إنْ أردت توفير أزرار تجاهل سطريّة Inline.<syntaxhighlight lang="html">
| | يمكن استخدام دوارات Bootstrap لإظهار حالة التحميل في صفحاتك. وهي مبنية باستخدام HTML و CSS فقط، ما يعني أنك لا تحتاج إلى استعمال جافا سكربت لإنشائها. بيد أنّك قد تحتاج إلى استخدام بسيط لجافا سكربت لتبديل لتبديل حالتها بين العرض والإخفاء. يمكن تخصيص مظهرها ومحاذاتها وقياساتها بسهولة باستخدام أصناف مساعدة خاصة. |
| <div class="alert alert-primary" role="alert">
| |
| هذا تنبيه أوّليّّ —تحقّق منه!
| |
| </div>
| |
| <div class="alert alert-secondary" role="alert">
| |
| هذا تنبيه ثانويّ —تحقّق منه!
| |
| </div>
| |
| <div class="alert alert-success" role="alert">
| |
| هذا تنبيه على نجاح إجراء —تحقّق منه!
| |
| </div>
| |
| <div class="alert alert-danger" role="alert">
| |
| هذا تنبيه على خطر —تحقّق منه!
| |
| </div>
| |
| <div class="alert alert-warning" role="alert">
| |
| هذا تنبيه للاحتياط —تحقّق منه!
| |
| </div>
| |
| <div class="alert alert-info" role="alert">
| |
| هذا تنبيه لإعطاء معلومات —تحقّق منه!
| |
| </div>
| |
| <div class="alert alert-light" role="alert">
| |
| هذا تنبيه خفيف —تحقّق منه!
| |
| </div>
| |
| <div class="alert alert-dark" role="alert">
| |
| هذا تنبيه غامق —تحقّق منه!
| |
| </div>
| |
|
| |
|
| | فيما يخص سهولة الوصول، يتوفّر كل مُحمِّل (loader) على سمة role="status" ووسما متشعبا <nowiki><span class="sr-only">جار التحميل...</span></nowiki>. |
|
| |
|
| </syntaxhighlight>
| | إطارات الدوارات |
|
| |
|
| ==== توصيل المعنى إلى التقنيّات المساعدة ====
| | استخدم إطارات الدوارات لعرض حالة التحميل عرضًا خفيفًا. |
| يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف <code>.sr-only</code>.
| |
|
| |
|
| === لون الرابط ===
| | الألوان |
| استخدم الصّنف الخدمي<code>.alert-link</code> لتوفير روابط متماشية مع التنسيقات ضمن التنبيهات.<syntaxhighlight lang="html">
| |
| <div class="alert alert-primary" role="alert"> هذا تنبيه أوّليّ يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
| |
| </div>
| |
| <div class="alert alert-secondary" role="alert">
| |
| هذا تنبيه ثانويّ يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
| |
| </div>
| |
| <div class="alert alert-success" role="alert">
| |
| هذا تنبيه على نجاح إجراء يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
| |
| </div>
| |
| <div class="alert alert-danger" role="alert">
| |
| هذا تنبيه على خطر يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
| |
| </div>
| |
| <div class="alert alert-warning" role="alert">
| |
| هذا تنبيه للاحتيّاط يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
| |
| </div>
| |
| <div class="alert alert-info" role="alert">
| |
| هذا تنبيه لإعطاء ملعومات يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
| |
| </div>
| |
| <div class="alert alert-light" role="alert">
| |
| هذا تنبيه خفيف يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
| |
| </div>
| |
| <div class="alert alert-dark" role="alert">
| |
| هذا تنبيه غامق يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
| |
| </div>
| |
| </syntaxhighlight>
| |
|
| |
|
| === عناصر HTML داخل التنبيهات ===
| | تستخدم الدوارات الإطارية CurrentColor لتلوين إطاراتها، مما يعني أنه بمقدورك تخصيص اللون باستخدام أصناف تلوين النصوص. يمكنك استخدام أي من أصناف تلوين النصوص على الدوارات القياسية. |
| يمكن أن تحتوي التنبيهات على عناصر HTML مثل الترويسات، والفقرات والخطوط الفاصلة (<code>[[HTML/hr|<nowiki><hr></nowiki>]]</code>).<syntaxhighlight lang="html">
| |
| <div class="alert alert-success" role="alert">
| |
| <h4 class="alert-heading">جيّد جدّا!</h4>
| |
| <p>لقد فعلتها، لقد قرأت هذه الرسالة التنبيهيّة المهمّة، هذه. النصّ في هذا المثال طويل نوعًا مّا لترى كيف يعمل التباعد مع هذا النوع من المحتوى داخل التنبيهات</p>
| |
| <hr>
| |
| <p class="mb-0">استخدم أدوات الهوامش كلّ ما دعت الحاجة، حتى تبقى الأمور رائعةً ومُرتّبة</p>
| |
| </div>
| |
|
| |
|
| | ما المانع من استخدام أصناف لون الإطارات border-color؟ تجعل الدوارات الإطارية واحدا من إطاراته على الأقل شفافًا في أحد الجوانب، ما يعني أنّ أصناف.border-{color} ستتجاوز ذلك. |
|
| |
|
| </syntaxhighlight>
| | الدوارات النامية |
|
| |
|
| === تجاهل التنبيهات ===
| | إذا لم تشأ استخدام الدوار الإطارية، فاستخدم بدلا منها الدوارات النامية. صحيح أنّها لا تدور، إلا أنها تنمو تدريجيا وبتكرار. |
| يمكن باستخدام مُلحَق JavaScript الخاصّ بالتنبيهات إضافة أزرار تجاهل على نفس السّطر:
| |
| * تأكّد من تحميل مُلحَق التنبيهات، أو النسخة المُجمَّعة من JavaScript الخاصّة بإطار العمل Bootstrap.
| |
| * إن كنت تُجمِّع JavaScript بنفسك من المصدر فانتبه إلى أنّ المُلحَق يحتاج إلى [[Bootstrap/javascript#Util|الملفّ Util]]. هذا الملفّ مُضمَّن في النسخة المُجمَّعة.
| |
| * أضف زرّ تجاهل والصّنف <code>.alert-dismissible</code> الذي يضيف حاشية إضافيّة إلى اليمين ويحدّد موضع الزرّ <code>.close</code> .
| |
| * أضف الخاصيّة <code>data-dismiss="alert"</code> إلى زرّ التجاهل الذي يفعّل الوظيفة في JavaScript. تأكّد من استخدام العنصُر <code>[[HTML/button|<button>]]</code> لتطبيق زرّ التجاهل من أجل الحصول على سلوك مناسب على جميع الأجهزة.
| |
| * تأكّد من إضافة الصّنفيْن <code>.fade</code> و <code>.show</code> إلى التنبيه لإضافة تأثيرات عليه بعد النقر على زرّ التجاهل.
| |
| جرّب المثال التالي:<syntaxhighlight lang="html">
| |
| <div class="alert alert-warning alert-dismissible fade show" role="alert">
| |
| <strong>انتبه!</strong> يجب أن تتحقّق من بعضٍ من الحقول الموجودة في الأسفل.
| |
| <button type="button" class="close" data-dismiss="alert" aria-label="Close">
| |
| <span aria-hidden="true">×</span>
| |
| </button>
| |
| </div>
| |
|
| |
|
| | مثل الدوار السابق، يستخدم هذا الدوار CurrentColor، لذا يمكنك تغيير مظهره بسهولة عبر أصناف تلوين النص. هذا مثال يظهر بعض الألوان المدعومة. |
|
| |
|
| </syntaxhighlight>
| | المحاذاة |
|
| |
|
| == سلوك JavaScript ==
| | بُنيت الدوارات في Bootstrap باستخدام rems و currentColor و display: inline-flex. لذا يمكنك تغيير أحجامها وتلوينها ومحاذاة بسرعة وسهولة. |
|
| |
|
| === المُنشِّطات Triggers ===
| | الهوامش |
| يمكن تفعيل إمكانيّة تجاهل تنبيه بواسطة JavaScript:<syntaxhighlight lang="javascript">
| |
| $('.alert').alert()
| |
| </syntaxhighlight>كما يمكن استخدام خاصيّات <code>data</code> على زرّ '''داخل التنبيه''' كما في المثال الأخير ضمن فقرة التجاهل:<syntaxhighlight lang="html">
| |
| <button type="button" class="close" data-dismiss="alert" aria-label="Close">
| |
| <span aria-hidden="true">×</span>
| |
| </button>
| |
| </syntaxhighlight>انتبه إلى أنّ إغلاق تنبيه يحذفه من كائن المستند DOM.
| |
|
| |
|
| === التوابع ===
| | استخدام أدوات الهامش المعروفة، مثل .m-5، لتحديد مسافات التباعد. |
| {| class="wikitable"
| |
| !التابع
| |
| !الوصف
| |
| |-
| |
| |<code>$().alert()</code>
| |
| |يجعل التنبيه يُنصِت لأحداث النقر على العناصر الأبناء التي لديها الخاصيّة <code>data-dismiss="alert"</code> . (ليس ضروريًّا عند استخدام التمهيد التلقائي Auto-initialization في واجهة التطبيقات data-api.)
| |
| |-
| |
| |<code>$().alert('close')</code>
| |
| |يغلق تنبيهًا بحذف من كائن المستنَد DOM. إن كان الصّنفان <code>.fade</code> و <code>.show</code> موجوديْن فإن التنبيه سيخبو قبل أن يختفي.
| |
| |-
| |
| |<code>$().alert('dispose')</code>
| |
| |يحذف التنبيه من العنصُر.
| |
| |}
| |
| <syntaxhighlight lang="javascript">
| |
| $(".alert").alert('close')
| |
| </syntaxhighlight>
| |
|
| |
|
| === الأحداث Events ===
| | التموضع |
| يعرض مُلحَق التنبيهات في Bootstrap بضعة أحداث للتعامل مع وظيفة التنبيه.
| |
|
| |
|
| {| class="wikitable"
| | استخدم أدوات Flexbox أو أدوات تعويم العناصر (float) أو أدوات محاذاة النصوص لوضع الدوارات في المكان الذي تريد بدقة. |
| !الحدث
| |
| !الوصف
| |
| |-
| |
| |<code>close.bs.alert</code>
| |
| |ينطلق هذا الحدث مباشرةً بعد استدعاء التابع <code>close</code> .
| |
| |-
| |
| |<code>closed.bs.alert</code>
| |
| |ينطلق هذا الحدث مباشرةً بعد استدعاء التابع <code>close</code> .
| |
| |}
| |
| <syntaxhighlight lang="javascript">
| |
| $('#myAlert').on('closed.bs.alert', function () {
| |
| // افعل شيئًا هنا …
| |
| })
| |
| </syntaxhighlight>
| |
|
| |
|
| == مصادر ==
| | الدوارات المرنة |
| | |
| | عربات |
| | |
| | محاذاة النص |
| | |
| | الحجم |
| | |
| | يمكنك تصغير الدوارات أو تكبيرها عبر إضافة الصنف .spinner-border-sm أو .spinner-grow-sm . |
| | |
| | يمكنك أيضا استخدم أنماط CSS مُخصّصة أو مُضمّنة لتغيير أبعاد الدوار حسب الحاجة. |
| | |
| | الأزرار |
| | |
| | استخدم الدوارات داخل الأزرار للإشارة إلى أنّ إجراء الزر قيد المعالجة حاليًا. يمكنك أيضًا إزالة النص ووضع الدوار بدله إن شئت. |
| * [https://getbootstrap.com/docs/4.5/components/alerts/ صفحة Alerts في توثيق Bootstrap]. | | * [https://getbootstrap.com/docs/4.5/components/alerts/ صفحة Alerts في توثيق Bootstrap]. |
| [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] |
وضّح لزوار موقعك حالة التحميل الخاصة بالمكوّن أو الصفحة باستخدام دوارات Bootstrap، وهي مبنية بالكامل باستخدام HTML و CSS، ولا تستخدم JavaScript.
نظرة عامة
يمكن استخدام دوارات Bootstrap لإظهار حالة التحميل في صفحاتك. وهي مبنية باستخدام HTML و CSS فقط، ما يعني أنك لا تحتاج إلى استعمال جافا سكربت لإنشائها. بيد أنّك قد تحتاج إلى استخدام بسيط لجافا سكربت لتبديل لتبديل حالتها بين العرض والإخفاء. يمكن تخصيص مظهرها ومحاذاتها وقياساتها بسهولة باستخدام أصناف مساعدة خاصة.
فيما يخص سهولة الوصول، يتوفّر كل مُحمِّل (loader) على سمة role="status" ووسما متشعبا <span class="sr-only">جار التحميل...</span>.
إطارات الدوارات
استخدم إطارات الدوارات لعرض حالة التحميل عرضًا خفيفًا.
الألوان
تستخدم الدوارات الإطارية CurrentColor لتلوين إطاراتها، مما يعني أنه بمقدورك تخصيص اللون باستخدام أصناف تلوين النصوص. يمكنك استخدام أي من أصناف تلوين النصوص على الدوارات القياسية.
ما المانع من استخدام أصناف لون الإطارات border-color؟ تجعل الدوارات الإطارية واحدا من إطاراته على الأقل شفافًا في أحد الجوانب، ما يعني أنّ أصناف.border-{color} ستتجاوز ذلك.
الدوارات النامية
إذا لم تشأ استخدام الدوار الإطارية، فاستخدم بدلا منها الدوارات النامية. صحيح أنّها لا تدور، إلا أنها تنمو تدريجيا وبتكرار.
مثل الدوار السابق، يستخدم هذا الدوار CurrentColor، لذا يمكنك تغيير مظهره بسهولة عبر أصناف تلوين النص. هذا مثال يظهر بعض الألوان المدعومة.
المحاذاة
بُنيت الدوارات في Bootstrap باستخدام rems و currentColor و display: inline-flex. لذا يمكنك تغيير أحجامها وتلوينها ومحاذاة بسرعة وسهولة.
الهوامش
استخدام أدوات الهامش المعروفة، مثل .m-5، لتحديد مسافات التباعد.
التموضع
استخدم أدوات Flexbox أو أدوات تعويم العناصر (float) أو أدوات محاذاة النصوص لوضع الدوارات في المكان الذي تريد بدقة.
الدوارات المرنة
عربات
محاذاة النص
الحجم
يمكنك تصغير الدوارات أو تكبيرها عبر إضافة الصنف .spinner-border-sm أو .spinner-grow-sm .
يمكنك أيضا استخدم أنماط CSS مُخصّصة أو مُضمّنة لتغيير أبعاد الدوار حسب الحاجة.
الأزرار
استخدم الدوارات داخل الأزرار للإشارة إلى أنّ إجراء الزر قيد المعالجة حاليًا. يمكنك أيضًا إزالة النص ووضع الدوار بدله إن شئت.