مجموعات الأزرار في إطار العمل Bootstrap

اجمع سلسلةً من الأزرار معًا ضمن سطرٍ واحد بمكوِّن مجموعة الأزرار في إطار العمل Bootstrap؛ وأضف إليها وظائف جديدة باستخدام JavaScript.

مثال قاعديّ

استخدم الصنف ‎.btn-group لتغليف مجموعة أزرار يُطبَّق عليها الصنف ‎.btn. يمكنك إضافة سلوك مشابه لصناديق التأشير (checkboxes) وأزرار الانتقاء (radio buttons) باستخدام مُلحَق JavaScript في Bootstrap الخاصّ بالأزرار.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">يسار</button>
  <button type="button" class="btn btn-secondary">وسط</button>
  <button type="button" class="btn btn-secondary">يمين</button>
</div>

تأكّد من قيمة الخاصيّة role وأضف لافتة

يجب توفير قيمة مناسبة للخاصيّة role لتوصيل فكرة تجميع سلسلة من الأزرار إلى التقنيّات المساعدة في القراءة (مثل قارئات الشاشة). يمكن أن تكون القيمة role="group"‎ مناسبة لمجموعة من الأزرار، في ما يتوجّب أن تكون لأشرطة الأدوات القيمة role="toolbar"‎.

علاوةً على ذلك؛ يجب أنْ تُضاف لافتات Labels صريحة لمجموعات الأزرار وأشرطة الأدوات؛ إذْ أنّ التقنيّات المساعدة في القراءة لن تقرأها في غياب هذه اللّافتات؛ على الرغم من وجود الدور (role) الصحيح. تستخدم الأمثلة المذكورة هنا اللافتة aria-label؛ إلّا أنّه يمكن استخدام قيم بديلة مثل aria-labelledby.

شريط أدوات مكوَّن من أزرار

يمكن تجميع عدد من مجموعات الأزرار ضمن شريط أدوات من الأزرار لإنشاء مكوِّنات أكثر تعقيدا. استخدم الأصناف الخدميّة حسب الحاجة للمباعدة بين المجموعات، الأزرار وغيرها.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

لا يوجد مانع من الخلط بين مجموعات الإدخال ومجموعات الأزرار (‎.input-group) ضمن شريط الأدوات. ستحتاج على الأرجح إلى أدواتٍ للمباعدة، على نحو مشابه للمثال أعلاه.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="مثال على مجموعة إدخال" aria-label="مثال على مجموعة إدخال" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="مثال على مجموعة إدخال" aria-label="مثال على مجموعة إدخال" aria-describedby="btnGroupAddon2">
  </div>
</div>

تحديد القياس

أضف الأصناف ‎.btn-group-*‎ إلى كلّ مجموعة أزرار ‎.btn-group، بما في ذلك المجموعات في المستويات الفرعيّة إنْ وُجدت، بدلًا من إضافة أصناف الحجم إلى كلّ زرّ في المجموعة.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

مجموعات الأزرار الفرعيّة

ضع مجموعة أزرار (‎.btn-group) داخل مجموعة أزرار أخرى عندما تريد إنشاء قوائم منسدلة ضمن مجموعة من الأزرار.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      قائمة منسدلة
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">رابط في قائمة منسدلة</a>
      <a class="dropdown-item" href="#"رابط في قائمة منسدلة</a>
    </div>
  </div>
</div>

التموضع العمودي

يمكن جعل تجمّعًا من الأزرار يظهر عموديًّا بدلاً من التموضع أفقيّا. شقّ المجموعة لتظهر فيها عناصر القائمة المنسدلة غير مدعوم.

مصادر

• صفحة Button group في توثيق Bootstrap.