گروپی لیست

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

لەم پەیجەدا

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

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

شتێک
بڕگەی دووەم
بڕگەی سێیەم
بڕگەیەکی چوارەم
وە یەکێکی پێنجەمیان

html

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

بابەتە چالاکەکان

زیاد بکە .activeبۆ a .list-group-itemبۆ ئاماژەدان بە هەڵبژاردەی چالاکی ئێستا.

بابەتێکی چالاکە
بڕگەی دووەم
بڕگەی سێیەم
بڕگەیەکی چوارەم
وە یەکێکی پێنجەمیان

html

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

بابەتە لەکارخراوەکان

زیاد بکە .disabledبۆ a .list-group-itemبۆ ئەوەی وا دەرکەوێت کە لەکارکەوتووە. تێبینی بکە کە هەندێک لە توخمەکان لەگەڵ .disabledهەروەها پێویستیان بە جاڤاسکڕێپتی تایبەت دەبێت بۆ ئەوەی ڕووداوەکانی کلیککردنیان بە تەواوی لەکاربخەن (بۆ نموونە، بەستەرەکان).

بابەتی لەکارخراو
بڕگەی دووەم
بڕگەی سێیەم
بڕگەیەکی چوارەم
وە یەکێکی پێنجەمیان

html

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

لینك و دوگمەكان

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

دڵنیابە لێرەدا پۆلە ستانداردەکان بەکارنەهێنە.btn .

بابەتی بەستەری ئێستا بابەتی لینکی دووەم بابەتی لینکی سێیەم بابەتی لینکی چوارەم بابەتی بەستەرێکی لەکارخراو

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

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

html

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

فڵش بکە

زیادکردن .list-group-flushبۆ لابردنی هەندێک سنوور و گۆشە گوڵاوەکان بۆ ڕەندەری شتەکانی گروپی لیست لە لێوارەوە بۆ لێوار لە دەفرێکی باوکدا (بۆ نموونە، کارتەکان).

شتێک
بڕگەی دووەم
بڕگەی سێیەم
بڕگەیەکی چوارەم
وە یەکێکی پێنجەمیان

html

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

ژمارەدارە

پۆلی دەستکاریکەر زیاد بکە .list-group-numbered(و بە ئیختیاری <ol>توخمێک بەکاربهێنە) بۆ هەڵبژاردنی بابەتەکانی گروپی لیستی ژمارەدار. ژمارەکان لە ڕێگەی CSS دروست دەکرێن (بە پێچەوانەی a<ol> ستایلی پێشوەختەی وێبگەڕی s) بۆ جێگیرکردنی باشتر لە ناو بابەتە گروپەکانی لیست و بۆ ڕێگەدان بە باشترکردنی خۆکارکردن.

ژمارەکان لەلایەن counter-resetلەسەر , دروست دەکرێن <ol>، و پاشان ستایل دەکرێن و بە ::beforeتوخمێکی ساختە لەسەر <li>with counter-incrementو دادەنرێت content.

بابەتی لیستێک
بابەتی لیستێک
بابەتی لیستێک

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

ئەمانە زۆر باش کاردەکەن لەگەڵ ناوەڕۆکی تایبەتمەند بە هەمان شێوە.

سەردێڕی لاوەکی
ناوەڕۆک بۆ بابەتی لیست
14. 14
سەردێڕی لاوەکی
ناوەڕۆک بۆ بابەتی لیست
14. 14
سەردێڕی لاوەکی
ناوەڕۆک بۆ بابەتی لیست
14. 14

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

ئاسۆیی

زیادکردن .list-group-horizontalبۆ گۆڕینی شێوازی بابەتە گروپەکانی لیست لە ڕاستەوە بۆ ئاسۆیی لە سەرانسەری هەموو خاڵەکانی شکاندن. یانیش، جۆرێکی وەڵامدەرەوە هەڵبژێرە .list-group-horizontal-{sm|md|lg|xl|xxl}بۆ ئەوەی گروپێکی لیست بە ئاسۆیی بکەیت کە لەو خاڵە شکاندنەوە دەست پێدەکات min-width. لە ئێستادا گروپەکانی لیستی ئاسۆیی ناتوانرێت لەگەڵ گروپەکانی لیستی فڵش تێکەڵ بکرێت.

ProTip: دەتەوێت بابەتی گروپی لیستی پانایی یەکسان کاتێک ئاسۆیی بێت؟ زیاد بکە .flex-fillبۆ هەر بابەتی گروپی لیست.

شتێک
بڕگەی دووەم
بڕگەی سێیەم

شتێک
بڕگەی دووەم
بڕگەی سێیەم

شتێک
بڕگەی دووەم
بڕگەی سێیەم

شتێک
بڕگەی دووەم
بڕگەی سێیەم

شتێک
بڕگەی دووەم
بڕگەی سێیەم

شتێک
بڕگەی دووەم
بڕگەی سێیەم

html

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

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

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

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

html

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

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

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

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان

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

بە نیشانە

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

بابەتی لیستێک14. 14
بابەتی دووەمی لیست2. 2
بڕگەی سێیەمی لیست1. 1

html

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

ناوەڕۆکی تایبەت بەخۆت

نزیکەی هەر HTMLێک لە ناوەوە زیاد بکە، تەنانەت بۆ گروپەکانی لیستی بەستراو وەک ئەوەی خوارەوە، بە یارمەتی سوودمەندییەکانی flexbox .

سەردێڕی بابەتی گروپ بنووسە

٣ رۆژ پێش ئێستا

هەندێک ناوەڕۆکی شوێنگرەوە لە بڕگەیەکدا.

وە هەندێک چاپی بچووک.

سەردێڕی بابەتی گروپ بنووسە

٣ رۆژ پێش ئێستا

هەندێک ناوەڕۆکی شوێنگرەوە لە بڕگەیەکدا.

وە هەندێک چاپی بچووکی بێدەنگ.

سەردێڕی بابەتی گروپ بنووسە

٣ رۆژ پێش ئێستا

هەندێک ناوەڕۆکی شوێنگرەوە لە بڕگەیەکدا.

وە هەندێک چاپی بچووکی بێدەنگ.

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <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">Some placeholder content in a paragraph.</p>
    <small>And some small print.</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">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</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">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

بۆکسەکانی هەڵبژاردن و ڕادیۆکان

بۆکسەکانی هەڵبژاردن و ڕادیۆکانی Bootstrap لەناو شتەکانی گروپی لیستەکەدا دابنێ و بەپێی پێویست خۆت خۆت دروستی بکە. دەتوانیت بەبێ <label>s بەکاریان بهێنیت، بەڵام تکایە لەبیرت بێت کە aria-labelتایبەتمەندی و بەهایەک بۆ دەستڕاگەیشتن دابنێیت.

یەکەم بۆکسی هەڵبژاردن
دووەم بۆکسی هەڵبژاردن
سێیەم بۆکسی هەڵبژاردن

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

یەکەم ڕادیۆ
ڕادیۆی دووەم
ڕادیۆی سێیەم

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

دەتوانیت .stretched-linkلەسەر <label>s بەکاری بهێنیت بۆ ئەوەی تەواوی بابەتی گروپی لیستەکە بتوانرێت کلیک بکرێت.

یەکەم بۆکسی هەڵبژاردن
دووەم بۆکسی هەڵبژاردن
سێیەم بۆکسی هەڵبژاردن

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

گۆڕاوەکان

لە v5.2.0 زیاد کراوە

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS ی پەرەسەندوو لە Bootstrap، ئێستا گروپەکانی لیست گۆڕاوە ناوخۆییەکانی CSS بەکاردەهێنن لەسەر .list-groupبۆ باشترکردنی خۆکارکردنی کاتی ڕاستەقینە. بەهاکان بۆ گۆڕاوەکانی CSS لە ڕێگەی Sass دادەنرێت، بۆیە هێشتا پشتگیری لە خۆکارکردنی Sass دەکرێت، هەروەها.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

گۆڕاوەکانی ساس

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

میکسینەکان

بەکاردێت بە تێکەڵکردن لەگەڵ $theme-colorsبۆ دروستکردنی پۆلەکانی جۆری کۆنتێکست بۆ .list-group-items.

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

ئەڵقە

لوپێک کە پۆلەکانی دەستکاریکەر بە list-group-item-variant()میکسین دروست دەکات.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

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

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

ماڵەوە پرۆفایل پەیامەکان دانانەوە

هەندێک ناوەڕۆکی شوێنگرەوە لە بڕگەیەکدا کە پەیوەندی بە "ماڵەوە" هەیە. وە هەندێک ناوەڕۆکی تر، لێرەدا بەکاردێت تەنها بۆ پادکردن و پڕکردنەوەی ئەم تابە پانێڵە. لە بەرهەمهێناندا، دیارە لێرەدا ناوەڕۆکی ڕاستەقینەترت دەبێت. وە نەک تەنها دەق. دەتوانێت هەر شتێک بێت، بەڕاستی. دەق، وێنە، فۆرم.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-toggle="list"یان لەسەر توخمێک. ئەم تایبەتمەندیانەی داتا لە .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-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>
</div>

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

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

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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>

شێوازەکان

شێواز و گواستنەوە ناهاوسەنگەکان

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

بۆ زانیاری زیاتر سەیری بەڵگەنامەکانی جاڤاسکڕێپت بکە .

ناوەڕۆکەکەت وەک توخمێکی تاب چالاک دەکات.

دەتوانیت بە بنیاتنان نموونەی تاب دروست بکەیت، بۆ نموونە:

const bsTab = new bootstrap.Tab('#myTab')

ڕێگا	وەسف
`dispose`	تابی توخمێک لەناو دەبات.
`getInstance`	شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی تابەکە بەدەستبهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، دەتوانیت بەم شێوەیە بەکاری بهێنیت: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	شێوازی ئیستاتیک کە نموونەیەکی تاب دەگەڕێنێتەوە کە پەیوەندی بە توخمێکی DOMەوە هەیە یان یەکێکی نوێ دروست دەکات لە ئەگەری دەستپێنەکردن. دەتوانیت بەم شێوەیە بەکاری بهێنیت: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	تابە پێدراوەکە هەڵدەبژێرێت و پەنجەرەی پەیوەندیدارەکەی پیشان دەدات. هەر تابێکی تر کە پێشتر هەڵبژێردرابێت هەڵنەبژێردرابێت و پەنجەرەی پەیوەندیدارەکەی دەشاردرێ��ەوە. پێش ئەوەی لە ڕاستیدا پەنجەرەی تابەکە پیشان بدرێت (واتە پێش ئەوەی `shown.bs.tab`ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر.

ڕووداوەکان

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

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

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

جۆری ڕووداو	وەسف
`hide.bs.tab`	ئەم ڕووداوە کاتێک ئاگر دەداتەوە کە بڕیارە تابێکی نوێ پیشان بدرێت (و بەم شێوەیە تابە چالاکەکەی پێشوو دەبێ بشاردرێتەوە). `event.target`و بەکاربهێنە `event.relatedTarget`بۆ ئامانجکردنی تابی چالاک ئێستا و تابی نوێی بەم زووانە چالاک دەبێت، بە رێککەوت.
`hidden.bs.tab`	ئەم ڕووداوە دوای ئەوەی تابێکی نوێ پیشان دەدرێت ئاگر دەدات (و بەم شێوەیە تاب چالاکەکەی پێشوو دەشاردرێتەوە). `event.target`و بەکاربهێنە `event.relatedTarget`بۆ ئامانجکردنی تابی چالاک پێشوو و تابی چالاک نوێ، بە رێککەوت.
`show.bs.tab`	ئەم ڕووداوە لە تاب نمایشدا ئاگر دەکاتەوە، بەڵام پێش ئەوەی تابە نوێیەکە پیشان بدرێت. `event.target`و بەکاربهێنە `event.relatedTarget`بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
`shown.bs.tab`	ئەم ڕووداوە لە نمایشی تابدا ئاگر دەبێتەوە دوای ئەوەی تابێک پیشان دەدرێت. `event.target`و بەکاربهێنە `event.relatedTarget`بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})