Source

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.

Fa'ata'ita'iga fa'avae

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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum ma eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Mea gaioi

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum ma eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum ma eros
<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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 .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum ma eros 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</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">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</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).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum ma eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Vasega fa'atatau

Fa'aoga vasega fa'apitoa e si'i ai mea lisi ma se tala fa'atusa ma lanu.

  • Dapibus ac facilisis in
  • Ole lisi muamua lea ole vaega vaega
  • Ole mea lea ole vaega ole lisi lona lua
  • Ole mea lea ole vaega ole lisi manuia
  • Ole mea lea ole vaega ole lisi o mea mata'utia
  • Ole mea lea ole vaega ole lisi o lapataiga
  • O le lisi lea o fa'amatalaga vaega vaega
  • Ole mea lea ole vaega ole lisi mama
  • Ole mea lea ole vaega ole lisi pogisa
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a 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.

Dapibus ac facilisis in Ole lisi muamua lea ole vaega vaega Ole mea lea ole vaega ole lisi lona lua Ole mea lea ole vaega ole lisi manuia Ole mea lea ole vaega ole lisi o mea mata'utia Ole mea lea ole vaega ole lisi o lapataiga O le lisi lea o fa'amatalaga vaega vaega Ole mea lea ole vaega ole lisi mama Ole mea lea ole vaega ole lisi pogisa 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>


  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a 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 .sr-onlyvasega.

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 .

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leo risus1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Tulaga fa'apitoa

Fa'aopoopo toetoe lava o so'o se HTML i totonu, e o'o lava i fa'alapotopotoga fa'afeso'ota'i e 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

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Lisi le ulutala mea vaega
3 aso talu ai

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Lisi le ulutala mea vaega
3 aso talu ai

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

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.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad nonmini tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugit aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

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-toggle="list"po'o luga o se elemene. Fa'aoga nei uiga fa'amaumauga ile .list-group-item.

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

E ala i le JavaScript

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

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

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

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

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

$().tab

Fa'aagaoioia se elemene mea lisi ma pusa anotusi. O le Tab e tatau ona i ai se data-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-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

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

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

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.
fa'aalia.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. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})