بٹن گروپ
بٹن گروپ کے ساتھ ایک لائن پر بٹنوں کی ایک سیریز کو ایک ساتھ گروپ کریں، اور JavaScript کے ساتھ انہیں سپر پاور کریں۔
بٹنوں کی ایک سیریز کو اندر کے ساتھ .btn
لپیٹیں .btn-group
۔ ہمارے بٹن پلگ ان کے ساتھ اختیاری JavaScript ریڈیو اور چیک باکس طرز کا رویہ شامل کریں ۔
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
درست کو یقینی بنائیں role
اور لیبل فراہم کریں۔
معاون ٹیکنالوجیز (جیسے اسکرین ریڈرز) کو یہ بتانے کے لیے کہ بٹنوں کی ایک سیریز کو گروپ کیا گیا ہے، ایک مناسب role
وصف فراہم کرنے کی ضرورت ہے۔ بٹن گروپس کے لیے، یہ ہوگا role="group"
، جبکہ ٹول بار میں ہونا چاہیے role="toolbar"
۔
اس کے علاوہ، گروپس اور ٹول بار کو ایک واضح لیبل دیا جانا چاہیے، کیونکہ زیادہ تر معاون ٹیکنالوجیز ان کا اعلان نہیں کریں گی، صحیح کردار کی خصوصیت کی موجودگی کے باوجود۔ یہاں فراہم کردہ مثالوں میں، ہم استعمال کرتے ہیں 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>
اپنے ٹول بار میں بٹن گروپس کے ساتھ ان پٹ گروپس کو بلا جھجھک ملا دیں۔ اوپر کی مثال کی طرح، آپ کو ممکنہ طور پر کچھ افادیت کی ضرورت ہوگی اگرچہ چیزوں کو مناسب طریقے سے جگہ دینے کے لیے۔
<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="Input group example" aria-label="Input group example" 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="Input group example" aria-label="Input group example" 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
ایک دوسرے کے اندر رکھیں ۔.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">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
بٹنوں کا ایک سیٹ افقی کے بجائے عمودی طور پر اسٹیک کیا ہوا دکھائیں۔ اسپلٹ بٹن ڈراپ ڈاؤن یہاں تعاون یافتہ نہیں ہیں۔
<div class="btn-group-vertical">
...
</div>