Source

گروپی لیست

گروپەکانی لیست پێکهاتەیەکی نەرم و بەهێزن بۆ پیشاندانی زنجیرەیەک ناوەڕۆک. دەستکاری بکە و درێژیان بکە بۆ پشتگیریکردن لە تەنها نزیکەی هەر ناوەڕۆکێک لە ناوەوە.

نموونەی بنەڕەتی

بنەڕەتیترین گروپی لیست لیستێکی بێ ڕێکخستنە کە بابەتە لیستەکان و پۆلە گونجاوەکانی تێدایە. لەسەری بنیات بنێ بەو بژاردانەی کە لە دوای ئەوە دێن، یان بە CSS ی خۆت بەپێی پێویست.

  • کراس جوستۆ ئۆدیۆ
  • داپیبوس ac facilisis لە
  • مۆربی لیۆ ریسوس
  • پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
  • ڤێستیبولوم لە ئیرۆس
<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بۆ a .list-group-itemبۆ ئاماژەدان بە هەڵبژاردەی چالاکی ئێستا.

  • کراس جوستۆ ئۆدیۆ
  • داپیبوس ac facilisis لە
  • مۆربی لیۆ ریسوس
  • پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
  • ڤێستیبولوم لە ئیرۆس
<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بۆ a .list-group-itemبۆ ئەوەی وا دەرکەوێت کە لەکارکەوتووە. تێبینی بکە کە هەندێک لە توخمەکان لەگەڵ .disabledهەروەها پێویستیان بە جاڤاسکڕێپتی تایبەت دەبێت بۆ ئەوەی ڕووداوەکانی کلیککردنیان بە تەواوی لەکاربخەن (بۆ نموونە، بەستەرەکان).

  • کراس جوستۆ ئۆدیۆ
  • داپیبوس ac facilisis لە
  • مۆربی لیۆ ریسوس
  • پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
  • ڤێستیبولوم لە ئیرۆس
<ul class="list-group">
  <li class="list-group-item disabled">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>

<a>s یان s بەکاربهێنە <button>بۆ دروستکردنی شتەکانی گروپی لیستی کردار بە هۆڤەر، لەکارخراو و باری چالاک بە زیادکردنی .list-group-item-action. ئێمە ئەم پۆلە ساختانە جیا دەکەینەوە بۆ ئەوەی دڵنیا بین لەوەی کە گروپەکانی لیست کە لە توخمە ناکارلێککارەکان دروستکراون (وەک <li>s یان <div>s) توانای کلیککردن یان پەنجەدانێک دابین ناکەن.

دڵنیابە لێرەدا پۆلە ستانداردەکان بەکارنەهێنە.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">Vestibulum at eros</a>
</div>

هەروەها بە <button>s دەتوانیت disabledلەبری .disabledپۆلەکە سوود لە تایبەتمەندییەکە وەربگریت. بەداخەوە <a>s پشتگیری لە تایبەتمەندی لەکارخراو ناکات.

<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بۆ لابردنی هەندێک سنوور و گۆشە گوڵاوەکان بۆ ڕەندەری شتەکانی گروپی لیست لە لێوارەوە بۆ لێوار لە دەفرێکی باوکدا (بۆ نموونە، کارتەکان).

  • کراس جوستۆ ئۆدیۆ
  • داپیبوس ac facilisis لە
  • مۆربی لیۆ ریسوس
  • پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
  • ڤێستیبولوم لە ئیرۆس
<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>

پۆلە کۆنتێکستەکان

پۆلەکانی کۆنتێکست بەکاربهێنە بۆ ستایلی لیستی شتەکان بە پاشبنەما و ڕەنگێکی دۆخدار.

  • داپیبوس ac facilisis لە
  • ئەمە بابەتی گروپی لیستی سەرەکییە
  • ئەمە بابەتی گروپی لیستی لاوەکییە
  • ئەمە بابەتی گروپی لیستی سەرکەوتنە
  • ئەمە بابەتی گروپی لیستی مەترسییە
  • ئەمە بابەتی گروپی لیستی ئاگادارکردنەوە یە
  • ئەمە بابەتی گروپی لیستی زانیارییە
  • ئەمە بابەتی گروپی لیستی ڕووناکییە
  • ئەمە بابەتی گروپی لیستی تاریکە
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

هەروەها پۆلە کۆنتێکستەکان لەگەڵ .list-group-item-action. سەرنج بدەنە زیادکردنی ستایلەکانی هۆڤەر لێرەدا کە لە نموونەی پێشوودا نەبوون. هەروەها دەوڵەت پشتگیری دەکرێت .active؛ بەکاری بهێنە بۆ ئاماژەدان بە هەڵبژاردنێکی چالاک لەسەر بابەتی گروپی لیستی کۆنتێکست.

<div class="list-group">
  <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 list-group-item-primary">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان

بەکارهێنانی ڕەنگ بۆ زیادکردنی مانا تەنیا ئاماژەیەکی بینراو دەدات، کە ناگەیەنرێتە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە. دڵنیابە لەوەی کە ئەو زانیاریانەی کە بە ڕەنگەکە دیاری دەکرێن یان لە خودی ناوەڕۆکەکەوە دیارن (بۆ نموونە دەقی بینراو)، یان لە ڕێگەی ئامرازی بەدیلەوە جێگیر دەکرێن، وەک دەقی زیادە کە لەگەڵ .sr-onlyپۆلەکەدا شاراوەتەوە.

بە نیشانە

زیادکردنی نیشانەکان بۆ هەر بابەتێکی گروپی لیست بۆ پیشاندانی ژمارە نەخوێندراوەکان، چالاکییەکان و زۆر شتی تر بە یارمەتی هەندێک لە سوودمەندەکان .

  • کراس جوستۆ ئۆدیۆ14. 14
  • داپیبوس ac facilisis لە2. 2
  • مۆربی لیۆ ریسوس1. 1
<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ێک لە ناوەوە زیاد بکە، تەنانەت بۆ گروپەکانی لیستی بەستراو وەک ئەوەی خوارەوە، بە یارمەتی سوودمەندییەکانی flexbox .

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</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 flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</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 flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</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>

هەڵسوکەوتی جاڤاسکڕێپت

پێوەکراوەکەی جاڤاسکڕێپتی تاب بەکاربهێنە-بە تاک یان لە ڕێگەی bootstrap.jsپەڕگەی کۆکراوەیەوە بیخە ناوەوە-بۆ درێژکردنەوەی گروپی لیستەکەمان بۆ دروستکردنی پەنجەرەی تابکراو لە ناوەڕۆکی ناوخۆیی.

<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">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">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">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">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>

بەکارهێنانی تایبەتمەندیەکانی داتا

دەتوانیت گەشتکردن بە گروپی لیست چالاک بکەیت بەبێ ئەوەی هیچ جاڤاسکڕێپتێک بنووسیت بە تەنها دیاریکردن data-toggle="list"یان لەسەر توخمێک. ئەم تایبەتمەندیانەی داتا لە .list-group-item.

<!-- List group -->
<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">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<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>

لە ڕێگەی جاڤاسکڕێپتەوە

بابەتی لیستی تابەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە (هەر بابەتێکی لیستەکە پێویستە بە تاک چالاک بکرێت):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

دەتوانیت بە چەند ڕێگەیەک بابەتی لیستی تاکەکەسی چالاک بکەیت:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

کاریگەری کاڵبوونەوە

بۆ ئەوەی پانێڵی تابەکان کاڵ بێتەوە، زیاد بکە .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

توخمێکی بابەتی لیست و دەفری ناوەڕۆک چالاک دەکات. تاب دەبێت یان گرێیەکی کۆنتێنەر لە DOM دا 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">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</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('نیشاندان')

بابەتی لیستی پێدراو هەڵدەبژێرێت و پەنجەرەی پەیوەندیدار پیشان دەدات. هەر بابەتێکی تری لیست کە پێشتر هەڵبژێردرابێت هەڵنەبژێردرابێت و پەنجەرەی پەیوەندیدارەکەی دەشاردرێتەوە. پێش ئەوەی لە ڕاستیدا پەنجەرەی تابەکە پیشان بدرێت دەگەڕێتەوە بۆ بانگکەر (بۆ نموونە پێش ئەوەی shown.bs.tabڕووداوەکە ڕووبدات).

$('#someListItem').tab('show')

ڕووداوەکان

لە کاتی پیشاندانی تابێکی نوێدا، ڕووداوەکان بەم ڕیزبەندییەی خوارەوە ئاگر دەکەون:

  1. hide.bs.tab(لە تابە چالاکەکەی ئێستا)
  2. show.bs.tab(لە سەر تابی پیشان دەدرێت)
  3. hidden.bs.tab(لە تابی چالاک پێشوودا، هەمان تابی بۆ hide.bs.tabڕووداوەکە)
  4. shown.bs.tab(لە تابی تازە چالاک کە تازە پیشان دراوە، هەمان تابی بۆ show.bs.tabڕووداوەکە)

ئەگەر پێشتر هیچ تابێک چالاک نەبووە، ڕووداوەکانی hide.bs.tabو hidden.bs.tabتەقە ناکرێن.

جۆری ڕووداو وەسف
show.bs.tab ئەم ڕووداوە لە تاب نمایشدا ئاگر دەکاتەوە، بەڵام پێش ئەوەی تابە نوێیەکە پیشان بدرێت. event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
نیشان دراوە.bs.tab ئەم ڕووداوە لە نمایشی تابدا ئاگر دەبێتەوە دوای ئەوەی تابێک پیشان دەدرێت. event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
شاردنەوەی.bs.tab ئەم ڕووداوە کاتێک ئاگر دەداتەوە کە بڕیارە تابێکی نوێ پیشان بدرێت (و بەم شێوەیە تابە چالاکەکەی پێشوو دەبێ بشاردرێتەوە). event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک ئێستا و تابی نوێی بەم زووانە چالاک دەبێت، بە رێککەوت.
شاراوە.bs.tab ئەم ڕووداوە دوای ئەوەی تابێکی نوێ پیشان دەدرێت ئاگر دەدات (و بەم شێوەیە تاب چالاکەکەی پێشوو دەشاردرێتەوە). event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک پێشوو و تابی چالاک نوێ، بە رێککەوت.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})