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.

I luga o lenei itulau

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>

So'oga ma fa'amau

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 .

Le mea feso'ota'i o lo'o i ai nei O se mea so'otaga lona lua O mea so'oga lona tolu O mea so'oga lona fa Se mea so'oga fa'aletonu

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

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

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

O se mea faigofie o le lisi o mea o lo'o fa'aletonu O se lisi fa'amata'u fa'autafa'i vaega Se mea faigofie lona lua fa'avae vaega Lisi mea faigofie Lisi fa'aupuga fa'ailoga Fa'ailoga faigofie fa'alavelave Lisi vaega fa'alavelave Se fa'alavelave fa'afuase'i fa'ailoga vaega fa'ailoga Fa'amatalaga faigofie fa'amatalaga kulupu fa'aupuga O se moli faigofie fa'avae vaega mea A faigofie lisi pogisa vaega vaega

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

Lisi le ulutala mea vaega

3 aso talu ai

O nisi mea o lo'o tu'u iai i totonu o se parakalafa.

Ma ni nai tusitusiga laiti.

Lisi le ulutala mea vaega

3 aso talu ai

O nisi mea o lo'o tu'u iai i totonu o se parakalafa.

Ma o nisi ua gūgū tama'i tusi.

Lisi le ulutala mea vaega

3 aso talu ai

O nisi mea o lo'o tu'u iai i totonu o se parakalafa.

Ma o nisi ua gūgū tama'i tusi.

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

Pusa siaki muamua Pusa siaki lona lua Pusa siaki lona tolu Pusa siaki lona fa Pusa siaki lona lima

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

Fa'amatalaga Fa'amatalaga Fe'au Fa'atonu

O nisi o lo'o i totonu o se parakalafa e fa'atatau i le "Aiga". Ma nisi anotusi, fa'aaoga iinei na'o le fa'atumu ma fa'atumu le laulau fa'ailoga. I le gaosiga, e mautinoa lava e sili atu au mea moni iinei. Ma e le na o tusitusiga. E mafai ona avea ma soo se mea, moni lava. Tusi, ata, fomu.

O nisi o mea o lo'o tu'uina atu i totonu o se parakalafa e fa'atatau i le "Fa'amatalaga". Ma nisi anotusi, fa'aaoga iinei na'o le fa'atumu ma fa'atumu le laulau fa'ailoga. I le gaosiga, e mautinoa lava e sili atu au mea moni iinei. Ma e le na o tusitusiga. E mafai ona avea ma soo se mea, moni lava. Tusi, ata, fomu.

O nisi o lo'o i totonu o se parakalafa e fa'atatau i "Savali". Ma nisi anotusi, fa'aaoga iinei na'o le fa'atumu ma fa'atumu le laulau fa'ailoga. I le gaosiga, e mautinoa lava e sili atu au mea moni iinei. Ma e le na o tusitusiga. E mafai ona avea ma soo se mea, moni lava. Tusi, ata, fomu.

O nisi o lo'o i totonu o se parakalafa e fa'atatau i "Fa'atonu". Ma nisi anotusi, fa'aaoga iinei na'o le fa'atumu ma fa'atumu le laulau fa'ailoga. I le gaosiga, e mautinoa lava e sili atu au mea moni iinei. Ma e le na o tusitusiga. E mafai ona avea ma soo se mea, moni lava. Tusi, ata, fomu.

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

hide.bs.tab(i luga o le lisi o lo'o galue nei)
show.bs.tab(i luga o le faʻailoga o le a faʻaalia)
hidden.bs.tab(i luga o le lisi galue muamua, tutusa ma le hide.bs.tabmea na tupu)
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.target`ma `event.relatedTarget`fa'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.target`ma `event.relatedTarget`fa'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.target`ma `event.relatedTarget`fa'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.target`ma `event.relatedTarget`fa'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
  })
}