Aqbeż għall-kontenut prinċipali Aqbeż għan-navigazzjoni tad-dokumenti
in English

Lista tal-grupp

Gruppi tal-lista huma komponent flessibbli u b'saħħtu għall-wiri ta 'serje ta' kontenut. Immodifika u estendihom biex jappoġġjaw kważi kull kontenut ġewwa.

Eżempju bażiku

L-aktar grupp ta 'lista bażika huwa lista mhux ordnata b'oġġetti tal-lista u l-klassijiet xierqa. Ibni fuqha bl-għażliet li jsegwu, jew bis-CSS tiegħek kif meħtieġ.

  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
  • Ir-raba' oġġett
  • U l-ħames waħda
<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>

Oġġetti attivi

Żid .activema 'a .list-group-itembiex tindika l-għażla attiva attwali.

  • Oġġett attiv
  • It-tieni oġġett
  • It-tielet oġġett
  • Ir-raba' oġġett
  • U l-ħames waħda
<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>

Oġġetti b'diżabilità

Żid .disabledma ' .list-group-itembiex tidher b'diżabilità. Innota li xi elementi .disabledb'se jeħtieġu wkoll JavaScript personalizzat biex jiskonnettjaw bis-sħiħ l-avvenimenti tal-ikklikkja tagħhom (eż., links).

  • Oġġett b'diżabilità
  • It-tieni oġġett
  • It-tielet oġġett
  • Ir-raba' oġġett
  • U l-ħames waħda
<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>

Uża <a>s jew <button>s biex toħloq oġġetti tal-grupp tal-lista azzjonabbli bi stati hover, diżabilitati u attivi billi żżid .list-group-item-action. Aħna nisseparaw dawn il-psewdo-klassijiet biex niżguraw li l-gruppi tal-lista magħmula minn elementi mhux interattivi (bħal <li>s jew <div>s) ma jipprovdux affordance ta' klikk jew vit.

Kun żgur li ma tużax il- .btnklassijiet standard hawn .

<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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

B <button>'s, tista' wkoll tagħmel użu mill- disabledattribut minflok il- .disabledklassi. Sfortunatament, <a>s ma jappoġġjawx l-attribut diżabbli.

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

Aħsel

Żid .list-group-flushbiex tneħħi xi fruntieri u kantunieri fit-tond biex tirrendi oġġetti tal-grupp tal-lista tarf sa tarf f'kontenitur prinċipali (eż. karti).

  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
  • Ir-raba' oġġett
  • U l-ħames waħda
<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>

Numerati

Żid il- .list-group-numberedklassi modifikatur (u b'għażla uża <ol>element) biex tagħżel oġġetti tal-grupp tal-lista numerata. In-numri huma ġġenerati permezz tas-CSS (għall-kuntrarju tal- <ol>grafika default tal-brawżer) għal tqegħid aħjar ġewwa l-oġġetti tal-grupp tal-lista u biex jippermettu adattament aħjar.

In-numri huma ġġenerati minn counter-resetfuq il- <ol>, u mbagħad stil u mqiegħda bi ::beforepsewdo-element fuq il- <li>ma ' counter-incrementu content.

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

Dawn jaħdmu tajjeb ukoll b'kontenut tad-dwana.

  1. Subtitlu
    Cras justo odio
    14
  2. Subtitlu
    Cras justo odio
    14
  3. Subtitlu
    Cras justo odio
    14
<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>
      Cras justo odio
    </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>
      Cras justo odio
    </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>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Orizzontali

Żid .list-group-horizontalbiex tibdel it-tqassim tal-oġġetti tal-grupp tal-lista minn vertikali għal orizzontali fil-punti ta' waqfien kollha. Inkella, agħżel varjant li jirrispondu .list-group-horizontal-{sm|md|lg|xl|xxl}biex tagħmel grupp ta' lista orizzontali li jibda minn dak il-punt ta' waqfien min-width. Attwalment il-gruppi ta' lista orizzontali ma jistgħux jiġu kkombinati ma' gruppi ta' lista ta' flush.

ProTip: Trid oġġetti tal-grupp tal-lista ta 'wisa' ugwali meta orizzontali? Żid .flex-fillma' kull oġġett tal-grupp tal-lista.

  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
  • Oġġett
  • It-tieni oġġett
  • It-tielet oġġett
<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>

Klassijiet kuntestwali

Uża klassijiet kuntestwali biex tfassal oġġetti tal-lista bi sfond u kulur stateful.

  • Oġġett sempliċi tal-grupp tal-lista default
  • Oġġett sempliċi tal-grupp tal-lista primarja
  • Oġġett sempliċi tal-grupp tal-lista sekondarja
  • Oġġett sempliċi tal-grupp tal-lista tas-suċċess
  • Oġġett sempliċi tal-grupp tal-lista tal-periklu
  • Oġġett ta' grupp ta' lista ta' twissija sempliċi
  • Oġġett sempliċi ta' grupp ta' lista ta' informazzjoni
  • Oġġett sempliċi tal-grupp tal-lista tad-dawl
  • Oġġett sempliċi tal-grupp tal-lista skura
<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>

Il-klassijiet kuntestwali jaħdmu wkoll ma' .list-group-item-action. Innota ż-żieda ta 'l-istili hover hawn mhux preżenti fl-eżempju preċedenti. Sostnut ukoll l- .activeistat; applikaha biex tindika għażla attiva fuq oġġett ta' grupp ta' lista kuntestwali.

<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>
Twassal tifsira għal teknoloġiji ta' assistenza

L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tiġi mgħoddija lill-utenti ta 'teknoloġiji ta' assistenza - bħal screen readers. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (eż. it-test viżibbli), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .visually-hiddenklassi.

Bil badges

Żid badges ma 'kwalunkwe oġġett tal-grupp tal-lista biex turi għadd mhux moqrija, attività, u aktar bl-għajnuna ta' xi utilitajiet .

  • Oġġett tal-lista14
  • It-tieni oġġett tal-lista2
  • It-tielet oġġett tal-lista1
<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>

Kontenut apposta

Żid kważi kull HTML fi ħdan, anke għal gruppi ta 'lista konnessi bħal dak ta' hawn taħt, bl-għajnuna ta ' utilitajiet flexbox .

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

Checkboxes u radjijiet

Poġġi l-kaxxi ta' kontroll u r-radjijiet ta' Bootstrap fi ħdan il-lista ta' oġġetti tal-grupp u ppersonalizza kif meħtieġ. Tista' tużahom mingħajr <label>s, imma jekk jogħġbok ftakar li tinkludi aria-labelattribut u valur għall-aċċessibbiltà.

  • L-ewwel checkbox
  • It-tieni checkbox
  • It-tielet checkbox
  • Ir-raba' checkbox
  • Il-ħames checkbox
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

U jekk trid <label>s bħala l .list-group-itemgħal żoni kbar hit, inti tista 'tagħmel dan, wisq.

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Sass

Varjabbli

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

Mixins

Użat flimkien ma $theme-colors' biex jiġġenera l -klassijiet varjanti kuntestwali għal .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;
      }
    }
  }
}

Loop

Loop li jiġġenera l-klassijiet modifikaturi bil- 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);
}

Imġieba JavaScript

Uża t-tab JavaScript plugin—inkludih individwalment jew permezz tal- bootstrap.jsfajl ikkumpilat—biex testendi l-grupp tal-lista tagħna biex toħloq panewijiet tabbable ta' kontenut lokali.

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

L-użu ta' attributi tad-data

Tista' tattiva navigazzjoni ta' grupp ta' lista mingħajr ma tikteb JavaScript billi sempliċement tispeċifika data-bs-toggle="list"jew fuq element. Uża dawn l-attributi tad-dejta fuq .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>

Via JavaScript

Ippermetta l-oġġett tal-lista li jista' jittabx permezz ta' JavaScript (kull oġġett tal-lista jeħtieġ li jiġi attivat individwalment):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Tista' tattiva oġġett tal-lista individwali f'diversi modi:

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

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Effett fade

Biex tagħmel tabs panel fade, żid .fadema 'kull .tab-pane. L-ewwel pannell tat-tab irid ikollu wkoll .showjagħmel il-kontenut inizjali viżibbli.

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

Metodi

constructor

Jattiva element ta' oġġett tal-lista u kontenitur tal-kontenut. Tab għandu jkollha jew a data-bs-targetjew hrefnode ta 'kontenitur fil-mira fid-DOM.

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

<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>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

juru

Jagħżel l-oġġett tal-lista mogħtija u juri l-panew assoċjat tiegħu. Kwalunkwe oġġett ieħor tal-lista li kien magħżul qabel ma jintgħażel u l-ħġieġa assoċjata tagħha hija moħbija. Jirritorna lil min iċempel qabel ma l-panew tat-tab fil-fatt intwera (per eżempju, qabel ma shown.bs.tabjseħħ l-avveniment).

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

jiddisponi

Jeqred tab ta' element.

getInstance

Metodu statiku li jippermettilek tikseb l-istanza tat-tab assoċjata ma 'element DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Metodu statiku li jippermettilek li tikseb l-istanza tat-tab assoċjata ma' element DOM, jew toħloq waħda ġdida f'każ li ma kinitx inizjalizzata

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Avvenimenti

Meta turi tab ġdida, l-avvenimenti jisparaw fl-ordni li ġejja:

  1. hide.bs.tab(fuq it-tab attiva kurrenti)
  2. show.bs.tab(fuq it-tab li trid tintwera)
  3. hidden.bs.tab(fuq it-tab attiva preċedenti, l-istess bħal għall- hide.bs.tabavveniment)
  4. shown.bs.tab(fuq it-tab li għadha kif intwera, l-istess bħal dik tal- show.bs.tabavveniment)

Jekk l-ebda tab ma kienet diġà attiva, l- avvenimenti hide.bs.tabu hidden.bs.tabmhux se jiġu sparati.

Tip ta' avveniment Deskrizzjoni
show.bs.tab Dan l-avveniment jispara fuq tab show, iżda qabel ma tkun intweriet it-tab il-ġdida. Uża event.targetu event.relatedTargetbiex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament.
shown.bs.tab Dan l-avveniment jispara fuq tab show wara li tkun intweriet tab. Uża event.targetu event.relatedTargetbiex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament.
hide.bs.tab Dan l-avveniment jispara meta trid tintwera tab ġdida (u għalhekk it-tab attiva preċedenti trid tinħeba). Uża event.targetu event.relatedTargetbiex timmira t-tab attiva attwali u t-tab il-ġdida li dalwaqt tkun attiva, rispettivament.
hidden.bs.tab Dan l-avveniment jispara wara li tintwera tab ġdida (u għalhekk it-tab attiva preċedenti hija moħbija). Uża event.targetu event.relatedTargetbiex timmira t-tab attiva preċedenti u t-tab attiva l-ġdida, rispettivament.
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}