Source

Aty lista rehegua

Umi aty lista rehegua haꞌehína peteĩ componente flexible ha ipuꞌakapáva ojehechauka hag̃ua peteĩ serie contenido rehegua. Emoambue ha embohape umíva oipytyvõ hag̃ua haimete oimeraẽ contenido oĩva hyepýpe.

Tembiecharã básico

Pe lista aty iñimportantevéva haꞌehína peteĩ lista noñemohendapáiva oguerekóva umi mbaꞌe lista rehegua ha umi clase hekopete. Emopu’ã hi’ári umi opción oúva reheve, térã nde CSS tee reheve tekotevẽháicha.

  • Cras justo odio rehegua
  • Dapibus ac facilisis rehegua
  • Morbi leo risus rehegua
  • Porta ac consectetur rehegua
  • Vestibulo en eros rehegua
<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>

Umi mba’e omba’apóva

Oñemoĩ .activepeteĩ .list-group-item-pe ohechauka hag̃ua jeporavopyre ombaꞌapóva koꞌág̃a.

  • Cras justo odio rehegua
  • Dapibus ac facilisis rehegua
  • Morbi leo risus rehegua
  • Porta ac consectetur rehegua
  • Vestibulo en eros rehegua
<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>

Umi mba’e ojejokóva

Emoĩ .disabledpeteĩ .list-group-item-pe ojehechauka hag̃ua ndojejapói hague. Eñamindu’u oĩha elemento orekóva .disabledoikotevẽta avei JavaScript jeporupyre ombogue hag̃ua hekopete umi mba’e’oka clic rehegua (techapyrã, joajuha).

  • Cras justo odio rehegua
  • Dapibus ac facilisis rehegua
  • Morbi leo risus rehegua
  • Porta ac consectetur rehegua
  • Vestibulo en eros rehegua
<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>

Eipuru <a>s térã <button>s emoheñói hag̃ua mba’e’oka aty lista rehegua ojejapokuaava oguerekóva estado hover, desactivado ha activo emoĩvo .list-group-item-action. Roipeꞌa koꞌã pseudo-clase roñangareko hag̃ua umi aty lista rehegua ojejapóva elemento ndahaꞌeiva interactivo-gui ( <li>s térã <div>s-icha) nomeꞌei peteĩ clic térã tap affordance.

Ejesareko ani hag̃ua reipuru umi .btnmbo’esyry estándar ko’ápe .

Cras justo odio rehegua Dapibus ac facilisis rehegua Morbi leo risus rehegua Porta ac consectetur rehegua Vestibulo en eros rehegua 
<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>

s rupive <button>, ikatu avei ojepuru disabledatributo .disabledclase rangue. Ñembyasyrã, <a>s ndoipytyvõi atributo oñemboykéva.

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

Ojejohéi hagua

Oñembojoapy .list-group-flushojeipeꞌa hag̃ua peteĩva vore ha esquina oñembojere hag̃ua ojehechauka hag̃ua lista aty mbaꞌekuéra vore guive vore peve peteĩ mbaꞌeryru túvape (techapyrã, tarjetakuéra).

  • Cras justo odio rehegua
  • Dapibus ac facilisis rehegua
  • Morbi leo risus rehegua
  • Porta ac consectetur rehegua
  • Vestibulo en eros rehegua
<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>

Umi mbo’esyry contextual rehegua

Eipuru umi clase contextual estilo hag̃ua umi elemento lista rehegua orekóva peteĩ fondo ha color estado rehegua.

  • Dapibus ac facilisis rehegua
  • Peteĩ elemento grupo lista primaria simple rehegua
  • Peteĩ elemento aty lista secundaria simple rehegua
  • Peteĩ elemento grupo de lista de éxito simple
  • Peteĩ elemento grupo de lista de peligro simple
  • Peteĩ elemento grupo de advertencia simple
  • Peteĩ elemento grupo de lista de info simple
  • Peteĩ elemento grupo lista de luz simple rehegua
  • Peteĩ elemento grupo lista iñypytũva simple
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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>

Umi clase contextual omba’apo avei .list-group-item-action. Ñañamindu’u oñembojoapýha umi estilo hover ko’ápe noĩriva techapyrã mboyveguápe. Avei oipytyvõ .activeEstado; eipuru ohechauka hag̃ua peteĩ jeporavopyre activo peteĩ elemento aty lista contextual rehegua.

Dapibus ac facilisis rehegua Peteĩ elemento grupo lista primaria simple rehegua Peteĩ elemento aty lista secundaria simple rehegua Peteĩ elemento grupo de lista de éxito simple Peteĩ elemento grupo de lista de peligro simple Peteĩ elemento grupo de advertencia simple Peteĩ elemento grupo de lista de info simple Peteĩ elemento grupo lista de luz simple rehegua Peteĩ elemento grupo lista iñypytũva simple 
<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">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>
Ombohasávo he’iséva umi tecnología oipytyvõvape

Oipurúvo saꞌi omoĩ hag̃ua heꞌiséva omeꞌe peteĩ jehechaukarãnte, noñembohasamoꞌãiva umi oiporúvape umi tecnología oipytyvõva – haꞌeháicha umi pantalla moñeꞌerã. Ejesareko marandu ojehechaukáva saꞌi rupive ojehecha porãha pe contenido-gui voi (techapyrã, jehaipyre ojehecháva), térã oikeha ambue tape rupive, haꞌeháicha jehaipyre adicional oñeñomivaꞌekue .sr-onlymboꞌepy ndive.

Umi insignia reheve

Emoĩ insignia oimeraẽva lista aty mba’e’oka rehegua ehechauka hag̃ua jepapa ndojelee’ỹva, tembiapo ha hetave mba’e peteĩva umi tembipuru’i pytyvõ rupive .

  • Cras justo odio rehegua14 rehegua
  • Dapibus ac facilisis rehegua2. 2.1
  • Morbi leo risus rehegua1. 1.1 
<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>

Contenido personalizado rehegua

Emoĩ haimete oimeraẽ HTML hyepýpe, jepe umi lista aty oñembojoajúvape g̃uarã pe oĩva iguýpeguáicha, flexbox purupyrã pytyvõ rupive .

Emoĩ peteĩ lista elemento rubro rehegua
Ojapóma 3 ára

Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Maecenas sed diam eget risus varius blandit rehegua.

Donec id elit ndaha'éiva mi porta.
Emoĩ peteĩ lista elemento rubro rehegua
Ojapóma 3 ára

Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Maecenas sed diam eget risus varius blandit rehegua.

Donec id elit ndaha'éiva mi porta.
Emoĩ peteĩ lista elemento rubro rehegua
Ojapóma 3 ára

Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Maecenas sed diam eget risus varius blandit rehegua.

Donec id elit ndaha'éiva 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>

JavaScript jepokuaa

Eipuru pe ficha JavaScript plugin —emoinge peteĩteĩ térã bootstrap.jsvore oñembohekopyréva rupive—embotuichave hag̃ua ore lista aty emoheñói hag̃ua vore vore’i contenido local rehegua.

Velit aute mollit ipsum ad dolor consectetur nulla oficia culpa adipisicing rehegua ejercicio fugiat temporal rehegua. Voluptate deserunt oguapy sunt nisi aliqua fugiat proident ea ut. Mollit volupta reprehenderit occaecat nisi ad no mínimo temporal sunt volupta consectetur ejercicio id ut nulla rehegua. Ea ha fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor rehegua. Anim ad Lorem aliqua en cupidatat nisi enim eu nostrud ojapo aliquip veniam mínimo.

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>

Oipurúvo umi atributo de datos rehegua

Ikatu emomba’apo peteĩ lista aty jeguata rehai’ỹre mba’eveichagua JavaScript emombe’úvo data-toggle="list"térã peteĩ elemento ári. Eipuru ko’ã atributo dato rehegua .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>

JavaScript rupive

Emboguata mba’e lista tabla rehegua JavaScript rupive (peteĩteĩ mba’e lista rehegua tekotevẽ oñemboguata peteĩteĩ):

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

Ikatu reactiva elemento lista individual heta hendáicha:

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

Efecto de desvanecimiento rehegua

Ojejapo hag̃ua panel de fichas oñedesvanece, emoĩ .fadepeteĩteĩme .tab-pane. Peteĩha vore vore oguerekovaꞌerã avei .showojehecha hag̃ua pe contenido ñepyrũrã.

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

Método-kuéra rehegua

$().tab rehegua

Omombaꞌapo peteĩ elemento elemento lista rehegua ha mbaꞌeryru contenido rehegua. Tab oguerekovaꞌerã peteĩ data-targettérã peteĩ hrefojepytasóva peteĩ nodo mbaꞌerepy rehegua DOM-pe.

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

Oiporavo pe mbaꞌe lista oñemeꞌevaꞌekue ha ohechauka ipanel ojoajúva hese. Oimeraẽ ambue mba’e lista-pegua ojeporavóva’ekue ymave, ndojeporavoiva’ekue ha oñeñomi iparte ojoajúva hese. Ojevy ohenóivape ojehechauka mboyve añetehápe pe ficha vore (techapyrã, oiko mboyve pe shown.bs.tabmbaꞌe ojehúva).

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

Umi mba’e oikóva

Ohechauka jave peteĩ ficha pyahu, umi mbaꞌe ojehúva odispara koꞌã orden-pe:

  1. hide.bs.tab(pe ficha activa ko’áĝaguápe)
  2. show.bs.tab(pe pestaña ojehechaukátavape)
  3. hidden.bs.tab(pe ficha activa mboyvegua-pe, peteĩchagua pe hide.bs.tabevento-pe g̃uarã)
  4. shown.bs.tab(pe pestaña ojehechauka ramóvape, peteĩchagua pe show.bs.tabevento-pe g̃uarã)

Ndaipóriramo ficha activada-mava’ekue, umi hide.bs.tabha hidden.bs.tabevento ndojedisparamo’ãi.

Tipo de evento rehegua Techaukaha
ohechauka.bs.tab Ko mbaꞌe ojehúva odispara ficha jehechaukahápe, ha katu ojehechauka mboyve ficha pyahu. Eipuru event.targetha event.relatedTargetemohenda hag̃ua pe ficha activa ha pe ficha activa mboyvegua (oĩramo) peteĩteĩ.
ojehechauka.bs.tab Ko mba’e ojehúva odispara ficha jehechaukahápe ojehechauka rire peteĩ ficha. Eipuru event.targetha event.relatedTargetemohenda hag̃ua pe ficha activa ha pe ficha activa mboyvegua (oĩramo) peteĩteĩ.
omokañy.bs.tab Ko mbaꞌe ojehúva ojedispara ojehechaukavaꞌerã jave peteĩ ficha pyahu (ha upéicha rupi oñeñomivaꞌerã pe ficha activa mboyvegua). Eipuru event.targetha event.relatedTargetemohenda hag̃ua pe ficha activa ko’áĝagua ha pe ficha pyahu pya’e ojejapótava, peteĩteĩ.
kañymby.bs.tab Ko mbaꞌe ojehúva oñembopu ojehechauka rire peteĩ ficha pyahu (ha upéicha oñeñomi pe ficha activa mboyvegua). Eipuru event.targetha event.relatedTargetemohenda hag̃ua pe ficha activa mboyvegua ha pe ficha activa pyahu, peteĩteĩ. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})