Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

Liste ya groupe

Ba groupes ya liste ezali composante flexible pe ya makasi pona kolakisa série ya contenus. Bobongola mpe bobakisi yango mpo na kosunga kaka pene na makambo nyonso oyo ezali na kati.

Ndakisa ya moboko

Lisanga ya liste ya moboko mingi ezali liste oyo ezali na molongo te na biloko ya liste mpe bakelasi oyo ebongi. Tongela likolo na yango na ba options oyo elandi, to na CSS na yo moko soki esengeli.

  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Likambo ya minei
  • Mpe moko ya mitano
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>

Biloko oyo ezali kosala

Bakisa .activena a .list-group-itemmpo na kolakisa kopona oyo ezali kosala sikoyo.

  • Eloko moko oyo ezali kosala
  • Eloko ya mibale
  • Eloko ya misato
  • Likambo ya minei
  • Mpe moko ya mitano
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>

Biloko oyo ezali na bolɛmbu

Bakisa .disabledna a .list-group-itemmpo emonana lokola ekangami. Yeba ete ba éléments mosusu na .disabledekosenga mpe JavaScript personnalisé mpo na ko désactiver entièrement ba événements na bango ya cliquage (par exemple, ba liens).

  • Eloko moko oyo ekangami
  • Eloko ya mibale
  • Eloko ya misato
  • Likambo ya minei
  • Mpe moko ya mitano
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>

Salelá <a>s to <button>s mpo na kosala biloko ya etuluku ya liste oyo ekoki kosala na makambo oyo ezali na hover, oyo ekangami, mpe oyo ezali kosala na kobakisa .list-group-item-action. Tokaboli ba pseudo-classes oyo pona ko assurer que ba groupes ya liste oyo esalemi na ba éléments non interactifs (lokola <li>s to <div>s) epesa te affordance ya clic to tap.

Sala makasi osalela ba classes standard.btn awa te .

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>

Na <button>s, okoki mpe kosalela disabledattribut na esika ya .disabledkelasi. Likambo ya mawa, <a>s esungaka te attribut oyo ekangami.

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>

Kosukola yango

Bakisa .list-group-flushmpo na kolongola mwa bandelo mpe ba coins ya arrondi mpo na kolakisa biloko ya lisanga ya liste nsɔngɛ na nsɔngɛ na kati ya eloko ya moboti (ndakisa, bakarte).

  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Likambo ya minei
  • Mpe moko ya mitano
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>

Bazali na banimero

Bakisa .list-group-numberedkelasi ya mobongisi (mpe na bolingi kosalela <ol>eleman moko) mpo na kopona na kati ya biloko ya etuluku ya liste oyo ezali na banimero. Mituya esalemi na nzela ya CSS (na bokeseni na <ol>s styling ya navigateur par défaut) mpo na kotia malamu na kati ya biloko ya lisanga ya liste mpe mpo na kopesa nzela na bopesi malamu koleka.

Mituya esalemi na counter-resetna <ol>, mpe na nsima esalemi na lolenge mpe etyami na ::beforepseudo-élément na <li>na counter-incrementmpe content.

  1. Eloko moko ya liste
  2. Eloko moko ya liste
  3. Eloko moko ya liste
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>

Ba oyo basalaka malamu na contenus personnalisé lokola.

  1. Motó ya likambo moke
    Contenu mpo na eloko ya liste
    14
  2. Motó ya likambo moke
    Contenu mpo na eloko ya liste
    14
  3. Motó ya likambo moke
    Contenu mpo na eloko ya liste
    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>

Ya kolala

Bakisa .list-group-horizontalmpo na kobongola bobongisi ya biloko ya lisanga ya liste uta na vertical kino na horizontal na kati ya ba points de rupture nionso. Na lolenge mosusu, pona variante oyo ezo répondre .list-group-horizontal-{sm|md|lg|xl|xxl}pona kosala groupe ya liste horizontale kobanda na point de rupture wana's min-width. Sikawa bituluku ya liste horizontale ekoki kosangisama te na bituluku ya liste ya flush.

ProTip: Olingi biloko ya etuluku ya liste ya bonene ekokani ntango ezali horizontal? Bakisa .flex-fillna eloko mokomoko ya etuluku ya liste.

  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
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>

Ba kelasi ya contexte

Salelá bakelasi ya contexte mpo na kosala liste ya biloko oyo ezali na fond mpe langi ya état.

  • Eloko ya groupe ya liste par défaut ya pete
  • Eloko ya groupe ya liste primaire ya pete
  • Eloko ya groupe ya liste secondaire ya pete
  • Eloko ya groupe ya liste ya succès ya pete
  • Eloko ya groupe ya liste ya makama ya pete
  • Eloko ya etuluku ya liste ya likebisi ya pɛtɛɛ
  • Eloko ya groupe ya liste ya info ya pete
  • Eloko ya etuluku ya liste ya pole ya pɛtɛɛ
  • Eloko ya groupe ya liste ya molili ya pete
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>

Ba kelasi ya contexte esalaka mpe na .list-group-item-action. Boyeba kobakisa ba styles ya hover awa oyo ezali te na ndakisa ya liboso. Lisusu esungami ezali l’ .activeEtat; kosalela yango mpo na kolakisa koponama ya mosala na eloko ya etuluku ya liste ya contexte.

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>
Kopesa ndimbola na ba technologies ya kosunga

Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .visually-hiddenkelasi.

Na ba badges

Bakisa ba badges na eloko nyonso ya groupe ya liste mpo na kolakisa ba comptes oyo etangami te, activité, mpe makambo mosusu na lisalisi ya ba utilitaires mosusu .

  • Eloko moko ya liste14
  • Eloko ya mibale ya liste2. 2
  • Eloko ya misato ya liste1. 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>

Contenu personnalisé

Bakisa pene na HTML nyonso na kati, ata mpo na bituluku ya liste oyo ezali na boyokani lokola oyo ezali awa na nse, na lisalisi ya ba utilitaires ya 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>

Ba cases ya kotiya bilembo mpe ba radios

Tia ba cases ya kotiya bilembo ya Bootstrap mpe ba radios na kati ya biloko ya groupe ya liste mpe sala yango na ndenge esengeli. Okoki kosalela yango kozanga <label>s, kasi kobosana te kotia aria-labelattribut mpe motuya mpo na accessibilité.

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>

Okoki kosalela .stretched-linkna <label>s mpo na kosala ete eloko ya etuluku mobimba ya liste ekoki kofina.

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

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba groupes ya liste basalelaka sikoyo ba variables CSS locales na .list-grouppona personnalisation ya temps réel oyo ematisami. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

  --#{$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};
  

Ba variables ya Sass

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

Ba mixins

Esalemi na bosangani na $theme-colorsmpo na kobimisa ba kelasi ya variante contextuelle mpo na .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;
      }
    }
  }
}

Boucle

Boucle oyo ebimisaka ba classes ya modificateur na list-group-item-variant()mixin.

// 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);
}

Etamboli ya JavaScript

Salelá onglet plugin JavaScript —kotia yango mokomoko to na nzela ya bootstrap.jsfisyé oyo esangisi —mpo na koyeisa monene etuluku na biso ya liste mpo na kosala ba panneaux tabbables ya makambo ya esika.

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

Kosalela ba attributs ya ba données

Okoki ko activer navigation ya groupe ya liste sans kokoma JavaScript moko te na ko préciser kaka data-bs-toggle="list"to na élément moko. Salelá bizaleli oyo ya ba données na .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>

Na nzela ya JavaScript

Activer eloko ya liste ya ba tabbables na nzela ya JavaScript (esengeli ko activer eloko moko na moko ya liste moko moko):

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

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

Okoki ko activer eloko ya liste moko moko na ba façons ebele:

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

Effet ya kosila

Mpo na kosala ete panneau ya ba onglets esili, bakisa .fadena moko na moko .tab-pane. Panneau ya onglet ya liboso esengeli mpe kozala .showna kosala ete makambo ya ebandeli emonanaka.

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

Ba méthodes ya kosala

Ba méthodes asynchrones na ba transitions

Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .

Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .

Ezali ko activer contenus na yo lokola élément ya onglet.

Okoki kosala instance ya tab na constructeur, ndakisa:

const bsTab = new bootstrap.Tab('#myTab')
Metode Ndimbola
dispose Ebebisaka tab ya élément moko.
getInstance Méthode statique oyo e permettre yo ozua instance ya onglet associé na élément DOM, okoki kosalela yango boye: bootstrap.Tab.getInstance(element).
getOrCreateInstance Méthode statique oyo ezongisaka instance ya onglet oyo ezo sangana na élément DOM to ezo sala ya sika au cas où ezalaki initialisé te. Okoki kosalela yango boye: bootstrap.Tab.getOrCreateInstance(element).
show Pona tab oyo epesami mpe elakisaka panneau na yango oyo esangisi yango. Onglet mosusu nyonso oyo eponami liboso ekómaka oyo eponami te mpe etanda na yango oyo esangisi yango ebombami. Ezongi na mobengi yambo ete esika ya tab elakisama mpenza (elingi koloba liboso ete shown.bs.tablikambo esalema).

Makambo oyo esalemaki

Ntango ozali kolakisa tab ya sika, makambo yango ekobeta na molɔngɔ oyo elandi:

  1. hide.bs.tab(na tab oyo ezali kosala lelo)
  2. show.bs.tab(na tab oyo esengeli kolakisa)
  3. hidden.bs.tab(na onglet actif ya liboso, ndenge moko na oyo ya hide.bs.tabévénement)
  4. shown.bs.tab(na tab oyo euti kolakisa sika oyo ezali kosala sika, ndenge moko na oyo ya show.bs.tablikambo yango)

Soki onglet moko te ezalaki déjà activé, alors ba événements hide.bs.tabmpe hidden.bs.tabekobeta te.

Lolenge ya likambo Ndimbola
hide.bs.tab Evenement oyo ezo beta tango onglet ya sika esengeli kolakisa (et donc onglet actif ya kala esengeli kobombama). Salelá event.targetmpe event.relatedTargetmpo na kopesa motuya na tab oyo ezali kosala sikoyo mpe onglet ya sika oyo ekosalema kala mingi te, na kolanda.
hidden.bs.tab Evenement oyo ezo beta sima ya onglet ya sika elakisami (mpe bongo onglet actif ya kala ebombami). Salelá event.targetmpe mpo na event.relatedTargetko cibler onglet active ya kala mpe onglet active ya sika, respectivement.
show.bs.tab Evenement oyo ezo beta na tab show, mais avant onglet ya sika elakisama. Salelá event.targetmpe mpo na event.relatedTargetko cibler onglet active mpe onglet active ya kala (soki ezali) respectivement.
shown.bs.tab Evenement oyo ezo beta na tab show sima ya tab moko elakisama. Salelá event.targetmpe mpo na event.relatedTargetko cibler onglet active mpe onglet active ya kala (soki ezali) respectivement.
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
  })
})