Fa'asolo ile anotusi autu Fa'asolo ile fa'ata'ita'iga o fa'amatalaga
in English

Lisi vaega

Lisi vaega o se vaega fetuutuunai ma mamana mo le faʻaalia o se faasologa o anotusi. Suia ma faalautele atu e lagolago ai so'o se anotusi i totonu.

Basic example

Ole vaega pito sili ona taua ole lisi ole lisi e le fa'atonuina ma lisi mea ma vasega talafeagai. Fausia i luga ma filifiliga e mulimuli mai, poʻo lau oe CSS pe a manaʻomia.

  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
  • O se mea lona fa
  • Ma le lona lima
<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>

Mea gaioi

Fa'aopoopo .activei le a .list-group-iteme fa'ailoa ai le filifiliga o lo'o galue nei.

  • O se mea faigaluega
  • O se mea lona lua
  • O se mea lona tolu
  • O se mea lona fa
  • Ma le lona lima
<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>

Mea ua le atoatoa

Fa'aopoopo .disabledi le .list-group-itema fa'aali mai e le atoatoa. Manatua o nisi elemene o le .disableda manaʻomia foʻi le JavaScript aganuʻu e faʻamalo atoatoa ai a latou kiliki mea e tutupu (faʻataʻitaʻiga, soʻotaga).

  • O se mea e le atoatoa le malosi
  • O se mea lona lua
  • O se mea lona tolu
  • O se mea lona fa
  • Ma le lona lima
<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'aoga <a>le s po'o <button>le s e fatu ai mea e mafai ona fa'agaioi le kulupu fa'atasi ma fa'afefe, fa'aletonu, ma fa'agaoioi setete e ala i le fa'aopoopoina o le .list-group-item-action. Matou te tu'u'ese'ese nei vasega fa'afoliga ina ia fa'amautinoa e le'o maua mai se kiliki po'o le tap vaega o lo'o faia i elemene e le o feso'ota'i (pei o <li>s po'o s).<div>

Ia mautinoa e aua le faʻaaogaina .btnvasega masani iinei .

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

Faatasi ai ma <button>le s, e mafai foi ona e faʻaogaina le disableduiga nai lo le .disabledvasega. O le mea e faanoanoa ai, <a>e le lagolagoina le uiga fa'aletonu.

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

Fufulu

Fa'aopoopo .list-group-flushe aveese nisi o tuaoi ma tulimanu lapotopoto e fa'ailoa ai aitema vaega o le lisi i le pito i le pito i totonu o se koneteina matua (fa'ata'ita'iga, kata).

  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
  • O se mea lona fa
  • Ma le lona lima
<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>

Faanumera

Fa'aopoopo le .list-group-numberedvasega fa'aliliu (ma fa'aaoga se <ol>elemene) e filifili ai i mea fa'anumera lisi vaega. O numera e fa'atupuina e ala i le CSS (e fa'afeagai ma le <ol>fa'aogaina o le su'esu'ega fa'apitoa) mo le tu'uina lelei i totonu o mea fa'avae lisi ma fa'ataga ai le fa'avasegaina lelei.

O numera e fa'atupuina i counter-resetluga o le <ol>, ona fa'ailogaina lea ma tu'u i se ::beforefa'ailoga-elemene i luga o le <li>ma counter-incrementma content.

  1. Se mea lisi
  2. Se mea lisi
  3. Se mea lisi
<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>

O nei mea e aoga tele i mea faʻapitoa faʻapitoa foi.

  1. Soa ulutala
    Anotusi mo mea lisi
    14
  2. Soa ulutala
    Anotusi mo mea lisi
    14
  3. Soa ulutala
    Anotusi mo mea lisi
    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>
      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>

Fa'asagaga

Fa'aopoopo .list-group-horizontale sui ai le fa'atulagaina o lisi o mea fa'avae mai luga i luga o le va'a i luga ole va'aiga uma. I le isi itu, filifili se mea e tali mai .list-group-horizontal-{sm|md|lg|xl|xxl}e fai ai se lisi fa'ata'amilosaga e amata mai i le va'a o le min-width. I le taimi nei , e le mafai ona tu'ufa'atasia kulupu lisi fa'ata'atia ma kulupu lisi fa'afefete.

Fautuaga: Mana'o e tutusa-lautele le lisi o aitema pe a faalava? Faaopoopo .flex-filli aitema vaega taitasi o le lisi.

  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
<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>

Vasega fa'atatau

Fa'aoga vasega fa'apitoa e si'itia ai lisi o mea e iai se tala fa'asolopito ma lanu.

  • O se mea fa'apitoa fa'ale-vaega lisi
  • O se vaega faigofie o le lisi autu
  • O se vaega faigofie lona lua o vaega
  • O se lisi fa'aupuga fa'amanuiaga faigofie
  • Se mea faigofie o le lisi o mea mata'utia
  • Se mea faigofie o le lisi o lapataiga
  • O se fa'amatalaga faigofie fa'asoa fa'alapotopotoga
  • Se mea faigofie o le lisi o le vaega
  • O se mea faigofie o le lisi pogisa
<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>

E galulue foi vasega fa'atatau i le .list-group-item-action. Manatua le faʻaopoopoina o sitaili faʻafefe iinei e le o iai i le faʻataʻitaʻiga muamua. E lagolagoina foi le .activesetete; fa'aoga e fa'ailoa mai ai se filifiliga malosi i luga o se lisi fa'aupuga o mea.

<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>
Tu'uina atu le uiga i tekinolosi fesoasoani

O le fa'aogaina o le lanu e fa'aopoopo ai le uiga e na'o se fa'aaliga va'aia, e le fa'ailoa atu i tagata fa'aoga o tekonolosi fesoasoani - e pei o le au faitau mata. Ia fa'amautinoa o fa'amatalaga o lo'o fa'ailogaina i le lanu e manino mai le anotusi lava ia (fa'ata'ita'iga o tusitusiga va'aia), pe fa'aofi mai i isi auala, e pei o tusitusiga fa'aopoopo natia i le .visually-hiddenvasega.

Faatasi ai ma pine

Fa'aopoopo fa'ailoga i so'o se lisi o mea e fa'aalia ai le faitau aofa'i, gaioioiga, ma isi mea fa'atasi ma le fesoasoani a nisi mea aoga .

  • Se lisi mea 14
  • O le lisi lona lua o mea 2
  • O le lisi lona tolu o mea 1
<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>

Tulaga fa'apitoa

Fa'aopoopo toetoe lava o so'o se HTML i totonu, e o'o lava mo fa'alapotopotoga fa'afeso'ota'i pei o lo'o i lalo, fa'atasi ai ma le fesoasoani a le flexbox utilities .

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

Pusa siaki ma leitio

Tuu pusa siaki ma leitio a Bootstrap i totonu o le lisi o aitema ma fa'avasega pe a mana'omia. E mafai ona e fa'aogaina e aunoa ma <label>le s, ae fa'amolemole ia manatua e aofia ai se aria-labeluiga ma se tau mo le fa'aogaina.

  • Pusa siaki muamua
  • Pusa siaki lona lua
  • Pusa siaki lona tolu
  • Pusa siaki lona fa
  • Pusa siaki lona lima
<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>

Ma afai e te manaʻo <label>e pei o le .list-group-itemmo nofoaga tetele lavelave, e mafai foi ona e faia lena mea.

<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

Fuafuaga

$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

Fa'aoga fa'atasi ma $theme-colorsle fa'atupuina o va'aiga eseese mo .list-group-itemle s.

@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;
      }
    }
  }
}

Ta'amilosaga

Loop e fa'atupuina ai vasega fa'aliliu fa'atasi ma le 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);
}

Amioga JavaScript

Fa'aoga le fa'aupuga JavaScript plugin-fa'aofia ai ta'ito'atasi pe ala i le bootstrap.jsfaila tu'ufa'atasia-e fa'alautele ai la matou vaega lisi e fai ai fa'amaufa'ailoga o mea fa'apitonu'u.

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

Fa'aaogaina uiga fa'amaumauga

E mafai ona e fa'agaoioia se fa'asalalauga kulupu lisi e aunoa ma le tusiaina o so'o se JavaScript i le na'o le fa'amaoti data-bs-toggle="list"po'o luga o se elemene. Fa'aoga nei uiga fa'amaumauga ile .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>

E ala i le JavaScript

Fa'aaga mea lisi lisi e ala i le JavaScript (e mana'omia ona fa'agaoioia ta'itasi mea lisi):

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()
  })
})

E mafai ona e fa'agaoioia mea lisi ta'itasi i ni auala se tele:

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

Aafiaga mou

Ina ia fa'agesegese i totonu le laulau, fa'aopoopo .fadei .tab-pane. E tatau fo'i .showi le fa'ailoga muamua ona fa'aalia le mea muamua.

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

Metotia

constructor

Fa'aagaoioia se elemene mea lisi ma pusa anotusi. O le Tab e tatau ona i ai se data-bs-targetpoʻo se hreffaʻatatau i se pusa pusa i le 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>

fa'aali

Filifili le mea lisi ua tu'uina atu ma fa'aali atu lona fa'ailoga e feso'ota'i. So'o se isi lisi o mea na filifilia muamua e le'i filifilia ma o lona fa'ailoga e natia. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le fa'ailoga o le fa'ailoga (fa'ata'ita'iga, a'o le'i tupu le shown.bs.tabmea na tupu).

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

  tab.show()

lafoa'i

Fa'aleaga le lisi o se elemene.

getInstance

Metotia static lea e mafai ai ona e maua le faʻataʻitaʻiga faʻataʻitaʻiga e fesoʻotaʻi ma se elemene DOM

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

getOrCreateInstance

Metotia static lea e mafai ai e oe ona maua le faʻataʻitaʻiga faʻataʻitaʻiga e fesoʻotaʻi ma se elemene DOM, poʻo le fatuina o se mea fou i le tulaga e leʻi amataina.

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

Mea na tutupu

Pe a fa'aalia se lisi fou, e mu mea na tutupu i le fa'asologa lenei:

  1. hide.bs.tab(i luga o le lisi o lo'o galue nei)
  2. show.bs.tab(i luga o le faʻailoga o le a faʻaalia)
  3. hidden.bs.tab(i luga o le lisi galue muamua, tutusa ma le hide.bs.tabmea na tupu)
  4. shown.bs.tab(i luga o le faʻailoga fou faatoa faʻaalia, tutusa ma le show.bs.tabmea na tupu)

Afai e leai se tab ua uma ona galue, o le hide.bs.tabma hidden.bs.tabmea tutupu o le a le tapeina.

Ituaiga mea na tupu Fa'amatalaga
show.bs.tab O lenei mea na tupu e mu i luga o faʻaaliga faʻaaliga, ae leʻi faʻaalia le faʻailoga fou. Fa'aoga event.targetma event.relatedTargetfa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi.
shown.bs.tab O lenei mea na tupu e mu i luga o le faʻaaliga faʻapipiʻi pe a uma ona faʻaalia se tab. Fa'aoga event.targetma event.relatedTargetfa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi.
hide.bs.tab E mu lenei mea pe a fa'aalia se fa'ailoga fou (ma fa'apea e natia ai le fa'agaioiga muamua). Fa'aoga event.targetma event.relatedTargetfa'atatau i le lisi o lo'o i ai nei ma le lisi fou e le o toe mamao-to-be-active.
hidden.bs.tab O lenei mea na tupu e mu pe a uma ona faʻaalia se laupepa fou (ma faʻapea o loʻo natia le laupepa muamua). Fa'aoga event.targetma event.relatedTargetfa'atatau i le ta'ifa'agaaga muamua ma le fa'ailoga fou fou, fa'asologa.
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
  })
}