in English

Kyerɛw kuw no din

List groups yɛ ade a ɛyɛ mmerɛw na ɛwɔ tumi a wɔde da nsɛm a ɛtoatoa so adi. Sesa na trɛw mu ma ɛboa ɛkame ayɛ sɛ nsɛm biara a ɛwɔ mu no.

Nhwɛso titiriw

List kuw a ɛho hia sen biara ne list a wɔanhyehyɛ no yiye a list nneɛma ne adesua ahorow a ɛfata wom. Fa akwan horow a edi hɔ no si so, anaasɛ fa w’ankasa CSS sɛnea ɛho hia.

  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade a ɛto so anan
  • Na nea ɛto so anum
<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>

Nneɛma a ɛyɛ nnam

Fa ka .activea ho .list-group-itemna kyerɛ mprempren a woapaw a ɛreyɛ adwuma no.

  • Ade a ɛyɛ nnam
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade a ɛto so anan
  • Na nea ɛto so anum
<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>

Nneɛma a wɔadi dɛm

Fa ka .disableda ho .list-group-itemna ama ayɛ te sɛ nea wɔagyae. Hyɛ no nsow sɛ elements bi a ɛwɔ .disablednso bɛhwehwɛ custom JavaScript na ama wɔatumi asiw wɔn click events no ano koraa (sɛ nhwɛso no, links).

  • Ade a wɔadi dɛm
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade a ɛto so anan
  • Na nea ɛto so anum
<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>

Fa <a>s anaa <button>s yɛ adeyɛ list kuw nneɛma a ɛwɔ hover, disabled, ne active states denam .list-group-item-action. Yɛtetew saa pseudo-classes yi mu de hwɛ hu sɛ list akuw a wɔde nneɛma a ɛnyɛ nkitahodi (te sɛ <li>s anaa <div>s) ayɛ no remma click anaa tap affordance.

Hwɛ hu sɛ woremfa .btnadesua ahorow a ɛwɔ hɔ no nni dwuma wɔ ha .

Mprempren link ade no Link adeɛ a ɛtɔ so mmienu Link adeɛ a ɛtɔ so mmiɛnsa Link adeɛ a ɛtɔ so nnan Link adeɛ a wɔagyae 
<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>

Sɛ wode <button>s di dwuma a, wubetumi nso de disabledsu no adi dwuma sen sɛ wode .disabledadesuakuw no bedi dwuma. Awerɛhosɛm ne sɛ, <a>s ntumi mmoa su a wɔadi dɛm no.

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

Flush a wɔde hyɛ mu

Fa ka .list-group-flushho na yi ahyeɛ binom ne ntwea a ɛyɛ kurukuruwa de kyerɛ list kuw nneɛma ase-kɔ-ano wɔ ɔwofoɔ ahina mu (sɛ nhwɛsoɔ, kaad).

  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade a ɛto so anan
  • Na nea ɛto so anum
<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>

Ne tɛtrɛtɛ mu

Fa ka .list-group-horizontalho na sesa list group nneɛma no nhyehyɛe fi vertical kɔ horizontal wɔ breakpoints nyinaa so. Sɛnea ɛbɛyɛ a, paw mmuae variant .list-group-horizontal-{sm|md|lg|xl}na ama list kuw bi ayɛ horizontal a efi ase wɔ saa breakpoint no min-width. Mprempren wontumi mfa horizontal list akuw no nka flush list akuw ho.

ProTip: Wopɛ list kuw nneɛma a ne tɛtrɛtɛ yɛ pɛ bere a ɛwɔ soro no? Fa ka .flex-filllist kuw ade biara ho.

  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
<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>

Adesua ahorow a ɛfa nsɛm a ɛfa ho

Fa contextual classes di dwuma fa style list nneɛma a ɛwɔ stateful akyi ne kɔla.

  • Default list kuw ade a ɛnyɛ den
  • Mfitiase list kuw ade a ɛnyɛ den
  • Asɛm a ɛnyɛ den a ɛto so abien list kuw ade
  • A simple nkonimdi list kuw ade
  • Asiane list kuw ade a ɛnyɛ den
  • Kɔkɔbɔ list kuw ade a ɛnyɛ den
  • A simple info list kuw ade
  • Hann list kuw ade a ɛnyɛ den
  • Esum list kuw ade a ɛnyɛ den
<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>

Nsɛm a ɛfa ho adesua ahorow nso ne .list-group-item-action. Hyɛ hover styles a ɛwɔ ha a enni nhwɛso a atwam no mu no nsow. Ɔman no nso boa .active; fa di dwuma de kyerɛ nea wɔapaw a ɛyɛ nnam wɔ nsɛm a ɛfa ho list kuw ade bi so.

Default list kuw ade a ɛnyɛ den Mfitiase list kuw ade a ɛnyɛ den Asɛm a ɛnyɛ den a ɛto so abien list kuw ade A simple nkonimdi list kuw ade Asiane list kuw ade a ɛnyɛ den Kɔkɔbɔ list kuw ade a ɛnyɛ den A simple info list kuw ade Hann list kuw ade a ɛnyɛ den Esum list kuw ade a ɛnyɛ den 
<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>
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-onlyadesuakuw no mu.

Wɔde badge ahorow ahyɛ mu

Fa badge ahorow ka list kuw ade biara ho de kyerɛ akontaabu a wonkenkanee, dwumadi, ne nea ɛkeka ho denam utilities binom mmoa so .

  • Asɛm bi a wɔahyehyɛ14. 15
  • Ade a ɛto so abien a wɔahyehyɛ2. 2.
  • Ade a ɛto so abiɛsa a wɔahyehyɛ1. 1. 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Nsɛm a wɔahyehyɛ a wɔahyɛ da ayɛ

Ɛkame ayɛ sɛ fa HTML biara ka ho wɔ mu, mpo ma linked list groups te sɛ nea ɛwɔ ase ha no, denam flexbox utilities mmoa so .

Kyerɛw kuw no asɛmti
Nnafua 3 a atwam ni

Nsɛm bi a ɛwɔ nkyekyɛm bi mu a wɔde besi hɔ.

Na nsɛm nketenkete bi nso.
Kyerɛw kuw no asɛmti
Nnafua 3 a atwam ni

Nsɛm bi a ɛwɔ nkyekyɛm bi mu a wɔde besi hɔ.

Na ebinom nso yɛɛ mum nkyerɛwee nketewa.
Kyerɛw kuw no asɛmti
Nnafua 3 a atwam ni

Nsɛm bi a ɛwɔ nkyekyɛm bi mu a wɔde besi hɔ.

Na ebinom nso yɛɛ mum nkyerɛwee nketewa. 
<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">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>

JavaScript nneyɛe

Fa tab JavaScript plugin no di dwuma—fa ka ho mmiako mmiako anaa fa bootstrap.jsfael a wɔaboaboa ano no so—na trɛw yɛn list kuw no mu ma yɛ tabbable panes a ɛwɔ mpɔtam hɔ nsɛm no mu.

Ebinom placeholder nsɛm wɔ nkyekyɛm bi a ɛfa "Fie" ho. Na ebinom bio nsɛm, a wɔde di dwuma wɔ ha kɛkɛ sɛ pad out na ahyɛ tab panel yi ma. Wɔ production mu no, ɛda adi sɛ anka wubenya nsɛm ankasa pii wɔ ha. Na ɛnyɛ text kɛkɛ. Ebetumi ayɛ biribiara, ampa. Nsɛm a wɔakyerɛw, mfonini ahorow, nkyerɛwde ahorow.

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-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 su ahorow a wɔde bedi dwuma

data-toggle="list"Wubetumi ama list group navigation ayɛ adwuma a worenkyerɛw JavaScript biara denam element bi a wobɛkyerɛ kɛkɛ anaasɛ wobɛda so. Fa saa data su ahorow yi di dwuma wɔ .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-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>
</div>

Ɛdenam JavaScript so

Ma tabbable list item no nyɛ adwuma denam JavaScript so (ɛsɛ sɛ wode list item biara yɛ adwuma mmiako mmiako):

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

Wubetumi ama ankorankoro list item no ayɛ adwuma wɔ akwan horow pii so:

$('#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 nkɛntɛnso

Sɛ wopɛ sɛ tabs panel no bɛyera a, fa ka .fadeemu biara ho .tab-pane. Ɛsɛ sɛ tab pane a edi kan no nso .showma nsɛm a edi kan no da adi.

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

Akwan a wɔfa so yɛ

$().tab no ho nsɛm

Ɛma list item element ne content container bi yɛ adwuma. Ɛsɛ sɛ tab nya a data-targetanaasɛ hreftargeting a container node wɔ DOM no mu.

<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('kyerɛ') .

Paw list ade a wɔde ama no na ɛkyerɛ ne pane a ɛbata ho. List adeɛ foforɔ biara a wɔadi kan apaw no bɛyɛ nea wɔanpaw na ne pane a ɛbata ho no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ tab pane no ankasa (sɛ nhwɛso no, ansa na shown.bs.tabasɛm no asi).

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

Nsɛm a esisi

Sɛ worekyerɛ tab foforo a, nsɛm a esisi no bɛtow wɔ nnidiso nnidiso a edidi so yi mu:

  1. hide.bs.tab(wɔ tab a ɛreyɛ adwuma mprempren no so)
  2. show.bs.tab(wɔ tab a wɔrebɛkyerɛ no so)
  3. hidden.bs.tab(wɔ active tab a atwam no so no, nea ɛwɔ hide.bs.tabadeyɛ no ho no ara)
  4. shown.bs.tab(wɔ tab a wɔakyerɛ seesei ara a ɛyɛ adwuma foforo no so no, nea ɛwɔ show.bs.tabadeyɛ no ho no ara)

Sɛ na tab biara nni hɔ a ɛyɛ adwuma dedaw a, wɔrentow hide.bs.tabne hidden.bs.tabnsɛm a esisi no.

Adeyɛ no su Nkyerɛmu
kyerɛ.bs.tab no Saa adeyɛ yi tow wɔ tab show so, nanso ansa na wɔakyerɛ tab foforo no. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
wɔakyerɛ.bs.tab Saa adeyɛ yi tow wɔ tab show so bere a wɔakyerɛ tab bi akyi. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
hide.bs.tab no ho nsɛm Saa adeyɛ yi tow bere a ɛsɛ sɛ wɔkyerɛ tab foforo (na ɛnam saa kwan yi so no ɛsɛ sɛ wɔde tab a ɛyɛ adwuma a atwam no sie). Fa event.targetne di dwuma event.relatedTargetfa w’ani si tab a ɛreyɛ adwuma mprempren ne tab foforo a ɛrenkyɛ na ɛreyɛ adwuma no so, sɛnea ɛte biara.
ahintaw.bs.tab no Saa adeyɛ yi tow bere a wɔakyerɛ tab foforo akyi (na ɛnam saa kwan yi so no wɔde tab a ɛyɛ adwuma a atwam no asie). Fa event.targetne di dwuma event.relatedTargetfa w’ani si tab a ɛreyɛ adwuma a atwam no ne tab a ɛreyɛ adwuma foforo no so, sɛnea ɛte biara. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})