الفرق بين المراجعتين لصفحة: «Bootstrap/list group»
لا ملخص تعديل |
لا ملخص تعديل |
||
| (5 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:مجموعات القوائم List group في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:مجموعات القوائم List group في إطار العمل Bootstrap}}</noinclude> | ||
مجموعات | مجموعات القوائم هي مكوِّن مرن وفعّال لعرض سلاسل من المحتوى؛ يمكن التعديل عليها وتمديدها لدعم أي نوع من المحتوى داخلها. | ||
== مثال قاعديّ == | == مثال قاعديّ == | ||
أبسط مثال على استخدام مجموعات | أبسط مثال على استخدام مجموعات القوائم هو قائمة غير مُرتَّبة تحوي عناصر القائمة والأصناف المناسبة. أسِّس على هذه اللوائح بالخيّارات المشروحة أدناه أو باستخدام CSS خاصّ بك حسب الحاجة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ul class="list-group"> | <ul class="list-group"> | ||
| سطر 13: | سطر 13: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== العناصر النشطة == | == العناصر النشطة == | ||
أضف الصنف <code>.active</code> إلى عنصُر في | أضف الصنف <code>.active</code> إلى عنصُر في القائمة (<code>.list-group-item</code>) للإشارة إلى أنّ العنصُر نشط. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ul class="list-group"> | <ul class="list-group"> | ||
| سطر 24: | سطر 24: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== العناصر المُعطَّلة == | == العناصر المُعطَّلة == | ||
أضف الصنف <code>.disabled</code> إلى عنصُر في | أضف الصنف <code>.disabled</code> إلى عنصُر في القائمة (<code>.list-group-item</code>) لجعله ''يظهر'' مُعطّلا. تُرجى ملاحظة أنّ بعض العناصر (الروابط مثلًا) تحتاج لشفرة [[JavaScript]] إضافيّة لتعطيل أحداث النقر عليها تمامًا. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ul class="list-group"> | <ul class="list-group"> | ||
<li class="list-group-item disabled">Cras justo odio</li> | <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li> | ||
<li class="list-group-item">Dapibus ac facilisis in</li> | <li class="list-group-item">Dapibus ac facilisis in</li> | ||
<li class="list-group-item">Morbi leo risus</li> | <li class="list-group-item">Morbi leo risus</li> | ||
| سطر 35: | سطر 35: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== الروابط والأزرار == | == الروابط والأزرار == | ||
طبّق الصنف <code>.list-group-item-action</code> على العناصر <code><a></code> أو <code><button></code> لإنشاء عناصر يمكن تنفيذ إجراءات بالنقر عليها ضمن | طبّق الصنف <code>.list-group-item-action</code> على العناصر <code>[[HTML/a|<a>]]</code> أو <code>[[HTML/button|<button>]]</code> لإنشاء عناصر يمكن تنفيذ إجراءات بالنقر عليها ضمن القائمة. تتوفّر عناصر القائمة في عند تطبيق الصنف على حالات الحومان (hover)، والتعطيل والنشاط. يفصل إطار العمل Bootstrap بين الأصناف الزائفة للحالات المذكورة لضمان أنّ أعضاء اللائحة المُنشئين باستخدام عناصر غير تفاعليّة (مثل <code>[[HTML/li|<li>]]</code> و <code>[[HTML/div|<div>]]</code>) لا توفّر قابليّة النقر أو الضغط. | ||
تأكّد من '''عدم استخدام الأصناف المعياريّة <code>.btn</code> هنا.''' | تأكّد من '''عدم استخدام الأصناف المعياريّة <code>.btn</code> هنا.''' | ||
| سطر 46: | سطر 46: | ||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> | <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> | ||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a> | <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a> | ||
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a> | <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
يمكن بالنسبة للأزرار (<code><button></code>) استخدام الخاصيّة <code>disabled</code> بدلًا من الصنف <code>.disabled</code> للأسف لا تدعم الروابط (<code><a></code>) الخاصيّة <code>disabled</code>. | يمكن بالنسبة للأزرار (<code>[[HTML/button|<button>]]</code>) استخدام الخاصيّة <code>disabled</code> بدلًا من الصنف <code>.disabled</code> للأسف لا تدعم الروابط (<code>[[HTML/a|<a>]]</code>) الخاصيّة <code>disabled</code>. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 63: | سطر 63: | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== تسطيح | == تسطيح القائمة == | ||
أضف الصنف <code>.list-group-flush</code> إلى | أضف الصنف <code>.list-group-flush</code> إلى القائمة لحذف بعضٍ من الحدود والحوافّ المُدوَّرة لجعل عناصر القائمة متراصّة ضمن حاويّة (مثل البطاقات). | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ul class="list-group list-group-flush"> | <ul class="list-group list-group-flush"> | ||
| سطر 74: | سطر 74: | ||
</ul> | </ul> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== الأصناف السياقيّة == | |||
استخدم الأصناف السياقيّة لتنسيق عناصر | == الوضع الأفقي == | ||
أضف <code>.list-group-horizontal</code> لتغيير خطاطة عناصر القائمة من الوضع العمودي إلى الوضع الأفقي عبر جميع النقاط الحدية. يمكنك أيضًا اختيار متغير تجاوبي <code>list-group-horizontal-{sm|md|lg|xl}</code> لجعل القائمة أفقية بدءا من نقطة حدية <code>min-width</code>. لا يمكن حاليا دمج القوائم الأفقية مع القوائم المسطحة. | |||
تنبيه: إن أردت تصميم قائمة عناصرها متساوية العرض، أضف <code>.flex-fill</code> إلى كل عنصر من عناصر القائمة مثل:<syntaxhighlight lang="html"> | |||
<ul class="list-group list-group-horizontal-sm"> | |||
<li class="list-group-item">Cras justo odio</li> | |||
<li class="list-group-item">Dapibus ac facilisis in</li> | |||
<li class="list-group-item">Morbi leo risus</li> | |||
</ul> | |||
</syntaxhighlight>أو:<syntaxhighlight lang="html"> | |||
<ul class="list-group list-group-horizontal-sm"> | |||
<li class="list-group-item">Cras justo odio</li> | |||
<li class="list-group-item">Dapibus ac facilisis in</li> | |||
<li class="list-group-item">Morbi leo risus</li> | |||
</ul> | |||
</syntaxhighlight> | |||
أو:<syntaxhighlight lang="html"> | |||
<ul class="list-group list-group-horizontal-md"> | |||
<li class="list-group-item">Cras justo odio</li> | |||
<li class="list-group-item">Dapibus ac facilisis in</li> | |||
<li class="list-group-item">Morbi leo risus</li> | |||
</ul> | |||
</syntaxhighlight>أو:<syntaxhighlight lang="html"> | |||
<ul class="list-group list-group-horizontal-lg"> | |||
<li class="list-group-item">Cras justo odio</li> | |||
<li class="list-group-item">Dapibus ac facilisis in</li> | |||
<li class="list-group-item">Morbi leo risus</li> | |||
</ul> | |||
</syntaxhighlight> | |||
أو:<syntaxhighlight lang="html"> | |||
<ul class="list-group list-group-horizontal-xl"> | |||
<li class="list-group-item">Cras justo odio</li> | |||
<li class="list-group-item">Dapibus ac facilisis in</li> | |||
<li class="list-group-item">Morbi leo risus</li> | |||
</ul> | |||
</syntaxhighlight> | |||
== الأصناف السياقيّة (Contextual classes) == | |||
استخدم الأصناف السياقيّة لتنسيق عناصر القائمة بخلفيّة ولون يوضّحان حالتها. | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ul class="list-group"> | <ul class="list-group"> | ||
| سطر 89: | سطر 129: | ||
</ul> | </ul> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
تعمل الأصناف السياقيّة كذلك مع الصنف <code>.list-group-item-action</code>. لاحظ أنّ تأثيرات الحومان غير حاضرة في المثال السابق. يُدعَم كذلك الصنف <code>.active</code> الذي يؤدّي تطبيقه إلى الإشارة إلى العنصُر النشط ضمن | تعمل الأصناف السياقيّة كذلك مع الصنف <code>.list-group-item-action</code>. لاحظ أنّ تأثيرات الحومان غير حاضرة في المثال السابق. يُدعَم كذلك الصنف <code>.active</code> الذي يؤدّي تطبيقه إلى الإشارة إلى العنصُر النشط ضمن قائمة بأصناف سياقيّة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ul class="list-group"> | <ul class="list-group"> | ||
| سطر 102: | سطر 142: | ||
<li class="list-group-item list-group-item-action list-group-item-dark">عنصُر بصنف سيّاقيّ غامق</li> | <li class="list-group-item list-group-item-action list-group-item-dark">عنصُر بصنف سيّاقيّ غامق</li> | ||
</ul> | </ul> | ||
</syntaxhighlight> | </syntaxhighlight>تنبيه: توصيل المعنى إلى التقنيّات المساعدة | ||
يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي)أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف <code>.sr-only</code>. | يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف <code>.sr-only</code>. | ||
== استخدام الشارات Badges == | == استخدام الشارات (Badges) == | ||
استخدم الشارات بالتعاون مع أدوات Flex على أيّ عنصُر في اللائحة لعرض عدّاد للرسائل غير المقروءة، النشاط أو ما شابه. | استخدم الشارات بالتعاون مع [[Bootstrap/flex|أدوات Flex]] على أيّ عنصُر في اللائحة لعرض عدّاد للرسائل غير المقروءة، النشاط أو ما شابه. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ul class="list-group"> | <ul class="list-group"> | ||
| سطر 122: | سطر 162: | ||
</li> | </li> | ||
</ul> | </ul> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== المُحتوى المُخصَّص == | == المُحتوى المُخصَّص == | ||
أضف شفرة HTML داخل عناصر القوائم بمساعدة أدوات Flex كما في المثال التالي. | أضف شفرة [[HTML]] داخل عناصر القوائم بمساعدة [[Bootstrap/flex|أدوات Flex]] كما في المثال التالي. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<div class="list-group"> | <div class="list-group"> | ||
<a href="#" class="list-group-item list-group-item-action | <a href="#" class="list-group-item list-group-item-action active"> | ||
<div class="d-flex w-100 justify-content-between"> | <div class="d-flex w-100 justify-content-between"> | ||
<h5 class="mb-1">ترويسة عنصُر في قائمة عناصر</h5> | <h5 class="mb-1">ترويسة عنصُر في قائمة عناصر</h5> | ||
| سطر 135: | سطر 176: | ||
<small>Donec id elit non mi porta.</small> | <small>Donec id elit non mi porta.</small> | ||
</a> | </a> | ||
<a href="#" class="list-group-item list-group-item-action | <a href="#" class="list-group-item list-group-item-action"> | ||
<div class="d-flex w-100 justify-content-between"> | <div class="d-flex w-100 justify-content-between"> | ||
<h5 class="mb-1">ترويسة عنصُر في قائمة عناصر</h5> | <h5 class="mb-1">ترويسة عنصُر في قائمة عناصر</h5> | ||
| سطر 143: | سطر 184: | ||
<small class="text-muted">Donec id elit non mi porta.</small> | <small class="text-muted">Donec id elit non mi porta.</small> | ||
</a> | </a> | ||
<a href="#" class="list-group-item list-group-item-action | <a href="#" class="list-group-item list-group-item-action"> | ||
<div class="d-flex w-100 justify-content-between"> | <div class="d-flex w-100 justify-content-between"> | ||
<h5 class="mb-1">ترويسة عنصُر في قائمة عناصر</h5> | <h5 class="mb-1">ترويسة عنصُر في قائمة عناصر</h5> | ||
| سطر 154: | سطر 195: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== كتابة شفرة JavaScript مخصّصة == | == كتابة شفرة JavaScript مخصّصة == | ||
استخدم ملحق JavaScript - بتضمينه منفردًا أو عبر الملف المُجمَّع <code>bootstrap.js</code> - لتمديد مكوِن مجموعة عناصر القوائم في إطار العمل Bootstrap وإنشاء لوحات محتوى مُبوَّب. | استخدم ملحق JavaScript - بتضمينه منفردًا أو عبر الملف المُجمَّع <code>bootstrap.js</code> - لتمديد مكوِن مجموعة عناصر القوائم في إطار العمل Bootstrap وإنشاء لوحات محتوى مُبوَّب (tabbable panes). | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<div class="row"> | <div class="row"> | ||
<div class="col-4"> | <div class="col-4"> | ||
<div class="list-group" id="list-tab" role="tablist"> | <div class="list-group" id="list-tab" role="tablist"> | ||
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home"> | <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">الرئيسية</a> | ||
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">الملف | <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">الملف الشخصي</a> | ||
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">الرسائل</a> | <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">الرسائل</a> | ||
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">الإعدادات</a> | <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">الإعدادات</a> | ||
| سطر 167: | سطر 208: | ||
<div class="col-8"> | <div class="col-8"> | ||
<div class="tab-content" id="nav-tabContent"> | <div class="tab-content" id="nav-tabContent"> | ||
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list"> | <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div> | ||
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"> | <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div> | ||
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list"> | <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div> | ||
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list"> | <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div> | ||
</div> | </div> | ||
</div> | </div> | ||
| سطر 176: | سطر 217: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== استخدام خاصيّات البيانات === | === استخدام خاصيّات البيانات === | ||
يمكن تفعيل التنقّل بين مجموعة العناصر دون كتابة شفرة JavaScript بسهولة عن طريق الخاصيّة | يمكن تفعيل التنقّل بين مجموعة العناصر دون كتابة شفرة JavaScript بسهولة عن طريق الخاصيّة <code>data-toggle="list"</code> أو عنصُر. استخدم خاصيّات البيانات على العناصر <code>.list-group-item</code>. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<!-- مجموعة العناصر --> | <!-- مجموعة العناصر --> | ||
| سطر 195: | سطر 236: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== كتابة شفرات JavaScript === | === كتابة شفرات JavaScript === | ||
استخدم JavaScript لتفعيل إنشاء التبويبات عبر مجموعات العناصر (يجب تفعيل كل عنصُر في اللائحة): | استخدم JavaScript لتفعيل إنشاء التبويبات (tabs) عبر مجموعات العناصر (يجب تفعيل كل عنصُر في اللائحة): | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
$('#myList a').on('click', function (e) { | $('#myList a').on('click', function (e) { | ||
| سطر 212: | سطر 253: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== تأثير الخفوت Fade === | === تأثير الخفوت (Fade) === | ||
أضف الصنف <code>.fade</code> إلى كلّ تبويب <code>.tab-pane</code> لجعل التبويبات تخفُت عند الانتقال إلى غيرها. يجب أن يُطبَّق الصنف <code>.show</code> على التبويب الأوّل لجعل المحتوى الابتدائيّ | أضف الصنف <code>.fade</code> إلى كلّ تبويب <code>.tab-pane</code> لجعل التبويبات تخفُت عند الانتقال إلى غيرها. يجب أن يُطبَّق الصنف <code>.show</code> على التبويب الأوّل لجعل المحتوى الابتدائيّ مرئيًّا. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 225: | سطر 266: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== التوابع == | |||
=== | === <code> $().tab</code> === | ||
يفعّل عنصُر من عناصر القائمة وحاويّة محتوى. يجب أن يُطبَّق التابع <code>tab</code> على خاصيّة <code>data-target</code> أو رابط (<code>href</code>) يستهدف حاويّة في كائن المستند. | يفعّل عنصُر من عناصر القائمة وحاويّة محتوى. يجب أن يُطبَّق التابع <code>tab</code> على خاصيّة <code>data-target</code> أو رابط (<code>href</code>) يستهدف حاويّة في كائن المستند. | ||
| سطر 253: | سطر 294: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>.tab('show')</code> === | |||
يحدّد عنصُر القائمة المُمرَّر ويعرض التبويب الموافق له. يُلغى تحديد أيّ عنصُر آخر غير العنصُر المُمرَّر ويُخفَى التبويب الموافق له. '''يعود إلى شفرة الاستدعاء قبل عرض التبويب''' (على سبيل المثال قبل وقوع الحدث <code>shown.bs.tab</code>) | يحدّد عنصُر القائمة المُمرَّر ويعرض التبويب الموافق له. يُلغى تحديد أيّ عنصُر آخر غير العنصُر المُمرَّر ويُخفَى التبويب الموافق له. '''يعود إلى شفرة الاستدعاء قبل عرض التبويب''' (على سبيل المثال قبل وقوع الحدث <code>shown.bs.tab</code>) | ||
| سطر 262: | سطر 303: | ||
تقع الأحداث عند عرض تبويب وفق الترتيب التالي: | تقع الأحداث عند عرض تبويب وفق الترتيب التالي: | ||
# <code>hide.bs.tab</code> (على التبويب النشط | # <code>hide.bs.tab</code> (على التبويب النشط حاليًا). | ||
# <code>show.bs.tab</code> (على التبويب المستهدَف) | # <code>show.bs.tab</code> (على التبويب المستهدَف). | ||
# <code>hidden.bs.tab</code> (على التبويب النشط سابقا، نفس التبويب الذي يقع عليه الحدث <code>hide.bs.tab</code>) | # <code>hidden.bs.tab</code> (على التبويب النشط سابقا، نفس التبويب الذي يقع عليه الحدث <code>hide.bs.tab</code>). | ||
# <code>shown.bs.tab</code> (على التبويب النشط الجديد، نفس التبويب الذي وقع عليه الحدث <code>show.bs.tab</code>) | # <code>shown.bs.tab</code> (على التبويب النشط الجديد، نفس التبويب الذي وقع عليه الحدث <code>show.bs.tab</code>). | ||
لا يقع الحدثان<code>hide.bs.tab</code> و <code>hidden.bs.tab</code> عندما لا يوجد تبويب نشط | لا يقع الحدثان<code>hide.bs.tab</code> و <code>hidden.bs.tab</code> عندما لا يوجد تبويب نشط مسبقًا. | ||
{|class="wikitable" | {| class="wikitable" | ||
!نوع الحدث | !نوع الحدث | ||
!الوصف | !الوصف | ||
| سطر 294: | سطر 335: | ||
== مصادر == | == مصادر == | ||
* [https://getbootstrap.com/docs/4. | * [https://getbootstrap.com/docs/4.5/components/list-group/#horizontal صفحة List group على توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap]][[تصنيف:Bootstrap components]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
[[تصنيف:Bootstrap components|{{SUBPAGENAME}}]] | |||
المراجعة الحالية بتاريخ 09:03، 12 يوليو 2020
مجموعات القوائم هي مكوِّن مرن وفعّال لعرض سلاسل من المحتوى؛ يمكن التعديل عليها وتمديدها لدعم أي نوع من المحتوى داخلها.
مثال قاعديّ
أبسط مثال على استخدام مجموعات القوائم هو قائمة غير مُرتَّبة تحوي عناصر القائمة والأصناف المناسبة. أسِّس على هذه اللوائح بالخيّارات المشروحة أدناه أو باستخدام CSS خاصّ بك حسب الحاجة.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
العناصر النشطة
أضف الصنف .active إلى عنصُر في القائمة (.list-group-item) للإشارة إلى أنّ العنصُر نشط.
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
العناصر المُعطَّلة
أضف الصنف .disabled إلى عنصُر في القائمة (.list-group-item) لجعله يظهر مُعطّلا. تُرجى ملاحظة أنّ بعض العناصر (الروابط مثلًا) تحتاج لشفرة JavaScript إضافيّة لتعطيل أحداث النقر عليها تمامًا.
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
الروابط والأزرار
طبّق الصنف .list-group-item-action على العناصر <a> أو <button> لإنشاء عناصر يمكن تنفيذ إجراءات بالنقر عليها ضمن القائمة. تتوفّر عناصر القائمة في عند تطبيق الصنف على حالات الحومان (hover)، والتعطيل والنشاط. يفصل إطار العمل Bootstrap بين الأصناف الزائفة للحالات المذكورة لضمان أنّ أعضاء اللائحة المُنشئين باستخدام عناصر غير تفاعليّة (مثل <li> و <div>) لا توفّر قابليّة النقر أو الضغط.
تأكّد من عدم استخدام الأصناف المعياريّة .btn هنا.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>
يمكن بالنسبة للأزرار (<button>) استخدام الخاصيّة disabled بدلًا من الصنف .disabled للأسف لا تدعم الروابط (<a>) الخاصيّة disabled.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>
تسطيح القائمة
أضف الصنف .list-group-flush إلى القائمة لحذف بعضٍ من الحدود والحوافّ المُدوَّرة لجعل عناصر القائمة متراصّة ضمن حاويّة (مثل البطاقات).
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
الوضع الأفقي
أضف .list-group-horizontal لتغيير خطاطة عناصر القائمة من الوضع العمودي إلى الوضع الأفقي عبر جميع النقاط الحدية. يمكنك أيضًا اختيار متغير تجاوبي list-group-horizontal-{sm|md|lg|xl} لجعل القائمة أفقية بدءا من نقطة حدية min-width. لا يمكن حاليا دمج القوائم الأفقية مع القوائم المسطحة.
تنبيه: إن أردت تصميم قائمة عناصرها متساوية العرض، أضف .flex-fill إلى كل عنصر من عناصر القائمة مثل:
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
أو:
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
أو:
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
أو:
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
أو:
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
الأصناف السياقيّة (Contextual classes)
استخدم الأصناف السياقيّة لتنسيق عناصر القائمة بخلفيّة ولون يوضّحان حالتها.
<ul class="list-group">
<li class="list-group-item">عنصُر بدون صنف سيّاقيّ</li>
<li class="list-group-item list-group-item-primary">عنصُر بصنف سيّاقيّ أوّلي</li>
<li class="list-group-item list-group-item-secondary">عنصُر بصنف سيّاقيّ ثانويّ</li>
<li class="list-group-item list-group-item-success">عنصُر بصنف سيّاقيّ للنجاح</li>
<li class="list-group-item list-group-item-danger">عنصُر بصنف سيّاقيّ للخطر</li>
<li class="list-group-item list-group-item-warning">عنصُر بصنف سيّاقيّ للتحذير</li>
<li class="list-group-item list-group-item-info">عنصُر بصنف سيّاقيّ للمعلومات</li>
<li class="list-group-item list-group-item-light">عنصُر بصنف سيّاقيّ خفيف</li>
<li class="list-group-item list-group-item-dark">عنصُر بصنف سيّاقيّ غامق</li>
</ul>
تعمل الأصناف السياقيّة كذلك مع الصنف .list-group-item-action. لاحظ أنّ تأثيرات الحومان غير حاضرة في المثال السابق. يُدعَم كذلك الصنف .active الذي يؤدّي تطبيقه إلى الإشارة إلى العنصُر النشط ضمن قائمة بأصناف سياقيّة.
<ul class="list-group">
<li class="list-group-item list-group-item-action">عنصُر بدون صنف سيّاقيّ</li>
<li class="list-group-item list-group-item-action list-group-item-primary">عنصُر بصنف سيّاقيّ أوّلي</li>
<li class="list-group-item list-group-item-action list-group-item-secondary">عنصُر بصنف سيّاقيّ ثانويّ</li>
<li class="list-group-item list-group-item-action list-group-item-success">عنصُر بصنف سيّاقيّ للنجاح</li>
<li class="list-group-item list-group-item-action list-group-item-danger">عنصُر بصنف سيّاقيّ للخطر</li>
<li class="list-group-item list-group-item-action list-group-item-warning">عنصُر بصنف سيّاقيّ للتحذير</li>
<li class="list-group-item list-group-item-action list-group-item-info">عنصُر بصنف سيّاقيّ للمعلومات</li>
<li class="list-group-item list-group-item-action list-group-item-light">عنصُر بصنف سيّاقيّ خفيف</li>
<li class="list-group-item list-group-item-action list-group-item-dark">عنصُر بصنف سيّاقيّ غامق</li>
</ul>
تنبيه: توصيل المعنى إلى التقنيّات المساعدة
يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف .sr-only.
استخدام الشارات (Badges)
استخدم الشارات بالتعاون مع أدوات Flex على أيّ عنصُر في اللائحة لعرض عدّاد للرسائل غير المقروءة، النشاط أو ما شابه.
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
المُحتوى المُخصَّص
أضف شفرة HTML داخل عناصر القوائم بمساعدة أدوات Flex كما في المثال التالي.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">ترويسة عنصُر في قائمة عناصر</h5>
<small>قبل ثلاثة أيّام</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">ترويسة عنصُر في قائمة عناصر</h5>
<small class="text-muted">قبل ثلاثة أيّام</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">ترويسة عنصُر في قائمة عناصر</h5>
<small class="text-muted">قبل ثلاثة أيّام</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
كتابة شفرة JavaScript مخصّصة
استخدم ملحق JavaScript - بتضمينه منفردًا أو عبر الملف المُجمَّع bootstrap.js - لتمديد مكوِن مجموعة عناصر القوائم في إطار العمل Bootstrap وإنشاء لوحات محتوى مُبوَّب (tabbable panes).
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">الرئيسية</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">الملف الشخصي</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">الرسائل</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">الإعدادات</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
استخدام خاصيّات البيانات
يمكن تفعيل التنقّل بين مجموعة العناصر دون كتابة شفرة JavaScript بسهولة عن طريق الخاصيّة data-toggle="list" أو عنصُر. استخدم خاصيّات البيانات على العناصر .list-group-item.
<!-- مجموعة العناصر -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">الرئيسيّة</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">الملفّ الشخصيّ</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">الرسائل</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">الإعدادات</a>
</div>
<!-- محتوى التبويبات -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">محتوى تبويب الرئيسية</div>
<div class="tab-pane" id="profile" role="tabpanel">محتوى تبويب الملف الشخصيّ</div>
<div class="tab-pane" id="messages" role="tabpanel">محتوى تبويب الرسائل</div>
<div class="tab-pane" id="settings" role="tabpanel">محتوى تبويب الإعدادات</div>
</div>
كتابة شفرات JavaScript
استخدم JavaScript لتفعيل إنشاء التبويبات (tabs) عبر مجموعات العناصر (يجب تفعيل كل عنصُر في اللائحة):
$('#myList a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
توجد أكثر من طريقة لتفعيل عناصر اللائحة فرادى:
$('#myList a[href="#profile"]').tab('show') // الاختيّار حسب اسم التبويب
$('#myList a:first-child').tab('show') // اختيّار التبويب الأوّل
$('#myList a:last-child').tab('show') // اختيّار التبويب الأخير
$('#myList a:nth-child(3)').tab('show') // اختيّار التبويب الثالث
تأثير الخفوت (Fade)
أضف الصنف .fade إلى كلّ تبويب .tab-pane لجعل التبويبات تخفُت عند الانتقال إلى غيرها. يجب أن يُطبَّق الصنف .show على التبويب الأوّل لجعل المحتوى الابتدائيّ مرئيًّا.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
التوابع
$().tab
يفعّل عنصُر من عناصر القائمة وحاويّة محتوى. يجب أن يُطبَّق التابع tab على خاصيّة data-target أو رابط (href) يستهدف حاويّة في كائن المستند.
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">الرئيسيّة</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">الملفّ الشخصيّ</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">الرسائل</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">الإعدادات</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
$(function () {
$('#myList a:last-child').tab('show')
})
</script>
.tab('show')
يحدّد عنصُر القائمة المُمرَّر ويعرض التبويب الموافق له. يُلغى تحديد أيّ عنصُر آخر غير العنصُر المُمرَّر ويُخفَى التبويب الموافق له. يعود إلى شفرة الاستدعاء قبل عرض التبويب (على سبيل المثال قبل وقوع الحدث shown.bs.tab)
$('#someListItem').tab('show')
الأحداث
تقع الأحداث عند عرض تبويب وفق الترتيب التالي:
hide.bs.tab(على التبويب النشط حاليًا).show.bs.tab(على التبويب المستهدَف).hidden.bs.tab(على التبويب النشط سابقا، نفس التبويب الذي يقع عليه الحدثhide.bs.tab).shown.bs.tab(على التبويب النشط الجديد، نفس التبويب الذي وقع عليه الحدثshow.bs.tab).
لا يقع الحدثانhide.bs.tab و hidden.bs.tab عندما لا يوجد تبويب نشط مسبقًا.
| نوع الحدث | الوصف |
|---|---|
show.bs.tab
|
يقع هذا الحدث عند طلب عرض التبويب، ولكن قبل أن يُعرَض. استخدم event.target وevent.relatedTarget لاستهداف التبويب النشط الجديد والتبويب النشط السابق (إنْ وُجد) على التوالي .
|
shown.bs.tab
|
يقع هذا الحدث بعد عرض التبويب. استخدم event.target وevent.relatedTarget لاستهداف التبويب النشط الجديد والتبويب النشط السابق (إنْ وُجد) على التوالي .
|
hide.bs.tab
|
يقع هذا الحدث عندما يوجد تبويب يُراد عرضُه (وبالتالي يُراد إخفاء التبويب النشط السابق). استخدم event.target وevent.relatedTarget لاستهداف التبويب النشط حاليًّا والتبويب الذي سيكون نشطًا قريبًا على التوالي.
|
hidden.bs.tab
|
يقع هذا الحدث بعد عرض التبويب الجديد (وبالتالي بعد إخفاء التبويب النشط السابق). استخدم event.target وevent.relatedTarget لاستهداف التبويب النشط سابقًا والتبويب النشط حاليًّا على التوالي.
|
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
e.target // التبويب النشط الجديد
e.relatedTarget // التبويب النشط السابق
})