Source

Nxaxamelo wa ntlawa

Mintlawa ya nxaxamelo i xiphemu lexi cinca-cincaka ni lexi nga ni matimba xo kombisa nxaxamelo wa swilo leswi nga endzeni. Cinca no swi andlala ku seketela ntsena kwalomu ka nhundzu yihi na yihi endzeni.

Xikombiso xa xisekelo

Ntlawa wa nxaxamelo wa xisekelo swinene i nxaxamelo lowu nga hlelekangiki lowu nga ni swilo swa nxaxamelo ni titlilasi leti faneleke. Aka ehenhla ka yona hi swihlawulekisi leswi landzelaka, kumbe hi CSS ya wena tanihilaha swi lavekaka hakona.

  • Cras ntsena odio
  • Dapibus ac xitirhisiwa eka
  • Morbi leo risus
  • Porta ac xihlamusela-marito xa xitsonga
  • Vestibulum eka 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>

Swilo leswi tirhaka

Engetela .activeeka a .list-group-itemku kombisa nhlawulo lowu tirhaka wa sweswi.

  • Cras ntsena odio
  • Dapibus ac xitirhisiwa eka
  • Morbi leo risus
  • Porta ac xihlamusela-marito xa xitsonga
  • Vestibulum eka 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>

Swilo leswi lamaleke

Engetelani .disabledeka a .list-group-itemku endla leswaku yi vonaka yi nga tirhi. Xiya leswaku swiaki swin’wana leswi nga na .disabledswi ta tlhela swi lava JavaScript ya ntolovelo ku tshikisa hi ku helela swiendlakalo swa swona swa ku tsindziyela (xikombiso, swihlanganisi).

  • Cras ntsena odio
  • Dapibus ac xitirhisiwa eka
  • Morbi leo risus
  • Porta ac xihlamusela-marito xa xitsonga
  • Vestibulum eka 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>

Tirhisa <a>s kumbe <button>s ku tumbuluxa swilo swa ntlawa wa nxaxamelo lowu nga endliwaka.list-group-item-action hi ku hover, disabled, na swiyimo leswi tirhaka hi ku engetela . Hi hambanyisa titlilasi leti ta vuxisi ku tiyisisa leswaku mintlawa ya nxaxamelo leyi endliweke hi swiaki leswi nga tirhisiki (ku fana na <li>s kumbe <div>s) a yi nyiki ku tikhoma kumbe ku pompa affordance.

Tiyiseka leswaku a wu tirhisi .btntitlilasi ta ntolovelo laha .

Cras ntsena odio Dapibus ac xitirhisiwa eka Morbi leo risus Porta ac xihlamusela-marito xa xitsonga Vestibulum eka 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>

Hi <button>s, u nga ha tlhela u tirhisa disabledxihlawulekisi ematshan’wini ya .disabledtlilasi. Lexi twisaka ku vava, <a>s a yi seketeli xihlawulekisi lexi lamaleke.

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

Hlantswa

Engetela .list-group-flushku susa mindzilakano yin’wana na tikhoneni leti rhendzelekaka ku humesa swilo swa ntlawa wa nxaxamelo ku ya eka tlhelo eka xigwitsirisi xa mutswari (xikombiso, makhadi).

  • Cras ntsena odio
  • Dapibus ac xitirhisiwa eka
  • Morbi leo risus
  • Porta ac xihlamusela-marito xa xitsonga
  • Vestibulum eka 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>

Titlilasi ta mongo

Tirhisa titlilasi ta mongo ku xitayili xa nxaxamelo wa swilo leswi nga na xivumbeko xa le ndzhaku na muvala.

  • Dapibus ac xitirhisiwa eka
  • Lexi i nchumu wa ntlawa wa nxaxamelo wa nkoka
  • Lexi i nchumu wa ntlawa wa nxaxamelo wa vumbirhi
  • Lexi i nchumu wa ntlawa wa nxaxamelo wa ku humelela
  • Lexi i nchumu wa ntlawa wa nxaxamelo wa khombo
  • Lexi i nchumu wa ntlawa wa nxaxamelo wa switsundzuxo
  • Lexi i nchumu wa ntlawa wa nxaxamelo wa info
  • Lexi i nchumu wa ntlawa wa nxaxamelo wa ku vonakala
  • Lexi i nchumu wa ntlawa wa nxaxamelo wa munyama
<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>

Titlilasi ta mongo na tona ti tirha na .list-group-item-action. Xiya ku engeteriwa ka switayele swa hover laha leswi nga riki kona eka xikombiso lexi hundzeke. Nakambe ku seketeriwa .activemfumo; yi tirhise ku kombisa nhlawulo lowu tirhaka eka nchumu wa ntlawa wa nxaxamelo wa mongo.

Dapibus ac xitirhisiwa eka Lexi i nchumu wa ntlawa wa nxaxamelo wa nkoka Lexi i nchumu wa ntlawa wa nxaxamelo wa vumbirhi Lexi i nchumu wa ntlawa wa nxaxamelo wa ku humelela Lexi i nchumu wa ntlawa wa nxaxamelo wa khombo Lexi i nchumu wa ntlawa wa nxaxamelo wa switsundzuxo Lexi i nchumu wa ntlawa wa nxaxamelo wa info Lexi i nchumu wa ntlawa wa nxaxamelo wa ku vonakala Lexi i nchumu wa ntlawa wa nxaxamelo wa munyama 
<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>
Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .sr-onlytlilasi.

Hi tibeji

Engetelani tibeji eka nchumu wihi na wihi wa ntlawa wa nxaxamelo ku kombisa tinhlayo leti nga hlayiwangiki, ntirho ni swin’wana hi ku pfuniwa hi switirhisiwa swin’wana .

  • Cras ntsena odio14.
  • Dapibus ac xitirhisiwa eka2.
  • 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>

Swilo leswi nga endzeni ka ntolovelo

Engetelani kwalomu ka HTML yihi na yihi endzeni, hambi ku ri eka mintlawa ya nxaxamelo lowu hlanganisiweke ku fana ni leyi nga laha hansi, hi ku pfuniwa hi switirhisiwa swa flexbox .

Xaxameta nhlokomhaka ya nchumu wa ntlawa
3 wa masiku lama hundzeke

Donec id elit leyi nga riki na mi porta gravida eka eget metus. Maecenas sed diam yi humesa risus varius blandit.

Donec id elit leyi nga riki mi porta.
Xaxameta nhlokomhaka ya nchumu wa ntlawa
3 wa masiku lama hundzeke

Donec id elit leyi nga riki na mi porta gravida eka eget metus. Maecenas sed diam yi humesa risus varius blandit.

Donec id elit leyi nga riki mi porta.
Xaxameta nhlokomhaka ya nchumu wa ntlawa
3 wa masiku lama hundzeke

Donec id elit leyi nga riki na mi porta gravida eka eget metus. Maecenas sed diam yi humesa risus varius blandit.

Donec id elit leyi nga riki 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>

Mahanyelo ya JavaScript

Tirhisa thebhu ya JavaScript plugin—yi katsa hi yoxe kumbe hi ku tirhisa bootstrap.jsfayili leyi hlengeletiweke—ku ndlandlamuxa ntlawa wa hina wa nxaxamelo ku endla tipheji ta thebhu ta swilo swa laha kaya.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa ku endla vutiolori bya ku endla vutiolori ku baleka nkarhinyana. Voluptate deserunt tshama sunt nisi aliqua ku baleka proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt ku navela ku endla vutiolori id ut nulla. Ea na ku baleka aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua eka cupidatat nisi xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga.

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>

Ku tirhisa swihlawulekisi swa data

U nga endla leswaku ku famba-famba ka ntlawa wa nxaxamelo ku tirha handle ko tsala JavaScript yihi na yihi hi ku boxa ntsena data-toggle="list"kumbe eka elemente. Tirhisa swihlawulekisi leswi swa datha eka .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>

Hi ku tirhisa JavaScript

Endla leswaku nchumu wa nxaxamelo wa tithebhu wu tirha hi ku tirhisa JavaScript (nchumu wun’wana ni wun’wana wa nxaxamelo wu lava ku tirhisiwa hi woxe):

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

U nga tirhisa nchumu wa nxaxamelo wa munhu hi xiyexe hi tindlela to hlayanyana:

$('#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

Fade effect

Ku endla leswaku phanele ya tithebhu yi nyamalala, engetela .fadeeka yin’wana ni yin’wana .tab-pane. Phejini yo sungula ya thebhu yi fanele ku tlhela yi va na .showku endla leswaku nhundzu yo sungula yi vonaka.

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

Maendlelo

$().thebhu ya kona

Ku tirhisa xiaki xa nchumu wa nxaxamelo na xikhomela-nhundzu. Tab yi fanele ku va na a data-targetkumbe ku hrefkongomisa eka node ya xikhomela eka 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('kombisa') .

Hlawula nchumu wa nxaxamelo lowu nyikiweke ivi u kombisa phejini ya wona leyi fambisanaka na wona. Nchumu wun’wana ni wun’wana wa nxaxamelo lowu a wu hlawuriwile khale wu va lowu nga hlawuriwa naswona phejini ya wona leyi fambisanaka na wona ya tumbetiwa. Ku tlhelela eka mufoyini loko phejini ya thebhu yi nga si kombisiwa hakunene (xikombiso, shown.bs.tabxiendlakalo xi nga si humelela).

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

Swiendlakalo

Loko u kombisa thebhu leyintshwa, swiendlakalo swi pfurha hi ku landzelelana loku landzelaka:

  1. hide.bs.tab(eka thebhu leyi tirhaka sweswi)
  2. show.bs.tab(eka thebhu leyi nga ta kombisiwa)
  3. hidden.bs.tab(eka thebhu leyi tirhaka leyi hundzeke, leyi fanaka ni ya hide.bs.tabxiendlakalo)
  4. shown.bs.tab(eka thebhu leyi tirhaka leyintshwa leyi kombisiweke ntsena, leyi fanaka ni ya show.bs.tabxiendlakalo)

Loko ku nga ri na thebhu leyi se a yi tirha, swiendlakalo swa hide.bs.tabna hidden.bs.taba swi nge tirhisiwi.

Muxaka wa xiendlakalo Nhlamuselo
kombisa.bs.tab Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu, kambe thebhu leyintshwa yi nga si kombisiwa. Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
ku kombisiwile.bs.tab Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu endzhaku ka loko thebhu yi kombisiwile. Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
fihla.bs.tab Xiendlakalo lexi xi pfurha loko ku fanele ku kombisiwa thebhu leyintshwa (xisweswo thebhu leyi tirhaka ya khale yi fanele ku fihliwa). Tirhisa event.targetna event.relatedTargetku kongomisa thebhu ya sweswi leyi tirhaka na thebhu leyintshwa leyi nga ta tirha ku nga ri khale, hi ku landzelelana.
thebhu ya.bs. leyi fihliweke Xiendlakalo lexi xi pfurha endzhaku ka loko ku kombisiwile thebhu leyintshwa (xisweswo thebhu leyi tirhaka ya khale ya fihliwile). Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka ya khale na thebhu leyintshwa leyi tirhaka, hi ku landzelelana. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})