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.

Ko páhinape

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.

Peteĩ mba’e
Peteĩ mba’e mokõiha
Mbohapyha mba’e
Peteĩ mba’e irundyha
Ha peteĩ quinto

html rehegua

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

Umi mba’e omba’apóva

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

Peteĩ mba’e omba’apóva
Peteĩ mba’e mokõiha
Mbohapyha mba’e
Peteĩ mba’e irundyha
Ha peteĩ quinto

html rehegua

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

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

Peteĩ mba’e ojejokóva
Peteĩ mba’e mokõiha
Mbohapyha mba’e
Peteĩ mba’e irundyha
Ha peteĩ quinto

html rehegua

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

Enlaces ha botones rehegua

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 .

Pe mba’e’oka enlace ko’áĝagua Peteĩ mokõiha mba’e enlace rehegua Peteĩ mbohapýha mba’e enlace rehegua Peteĩ irundyha mba’e enlace rehegua Peteĩ mba’e’oka enlace rehegua oñemboykéva

html rehegua

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

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

html rehegua

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

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

Peteĩ mba’e
Peteĩ mba’e mokõiha
Mbohapyha mba’e
Peteĩ mba’e irundyha
Ha peteĩ quinto

html rehegua

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

Oñenumeráva

Emoĩve .list-group-numberedclase modificador rehegua (ha opcionalmente eipuru peteĩ <ol>elemento) eiporavo hag̃ua umi elemento aty lista rehegua oñembopapapývape. Papapy ojejapo CSS rupive (ojoavy peteĩ <ol>s kundahára estilo por defecto rehe) oñemohenda porãve hag̃ua umi mbaꞌe lista aty ryepýpe ha ikatu hag̃uáicha ojejapo porãve ñemboheko.

Papapykuéra ojejapo por counter-reseton the <ol>, ha upéi oñemboguapy estilo ha oñemoĩ peteĩ ::beforepseudo-elemento reheve pe <li>with counter-incrementha rehe content.

Peteĩ mba’e lista-pegua
Peteĩ mba’e lista-pegua
Peteĩ mba’e lista-pegua

html rehegua

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

Ko’ãva omba’apo porãiterei contenido personalizado ndive avei.

Subtítulo rehegua
Contenido elemento lista-pe g̃uarã
14 rehegua
Subtítulo rehegua
Contenido elemento lista-pe g̃uarã
14 rehegua
Subtítulo rehegua
Contenido elemento lista-pe g̃uarã
14 rehegua

html rehegua

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

Ipekuévo

Oñembojoapy .list-group-horizontaloñemoambue hag̃ua lista aty mbaꞌekuéra ñemohenda vertical guive horizontal peve opaite punto de ruptura rupi. Ikatu avei, eiporavo peteĩ variante .list-group-horizontal-{sm|md|lg|xl|xxl}ombohováiva ejapo hag̃ua peteĩ lista aty horizontal oñepyrũvo upe punto de ruptura-gui min-width. Koꞌág̃aite umi lista horizontal aty ndaikatúi oñembojoaju umi lista flush aty ndive.

ProTip: ¿Reipota umi elemento aty lista ancho joja rehegua oĩ jave horizontal? Oñemoĩve .flex-fillpeteĩteĩva lista-pe aty mba’e.

Peteĩ mba’e
Peteĩ mba’e mokõiha
Mbohapyha mba’e

Peteĩ mba’e
Peteĩ mba’e mokõiha
Mbohapyha mba’e

Peteĩ mba’e
Peteĩ mba’e mokõiha
Mbohapyha mba’e

Peteĩ mba’e
Peteĩ mba’e mokõiha
Mbohapyha mba’e

Peteĩ mba’e
Peteĩ mba’e mokõiha
Mbohapyha mba’e

Peteĩ mba’e
Peteĩ mba’e mokõiha
Mbohapyha mba’e

html rehegua

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

Umi mbo’esyry contextual rehegua

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

Peteĩ elemento aty lista por defecto simple
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

html rehegua

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

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.

Peteĩ elemento aty lista por defecto simple 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

html rehegua

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

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 .visually-hiddenmboꞌ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 .

Peteĩ mba’e lista-pegua14 rehegua
Peteĩ mokõiha mba’e lista-pegua2. 2.1
Peteĩ mba’e mbohapyha lista-pegua1. 1.1

html rehegua

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

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

Oĩ contenido tenda rehegua peteĩ párrafope.

Ha unos kuánto letra michĩva.

Emoĩ peteĩ lista elemento rubro rehegua

Ojapóma 3 ára

Oĩ contenido tenda rehegua peteĩ párrafope.

Ha oĩ umi letra michĩva oñemboguevaʼekue.

Emoĩ peteĩ lista elemento rubro rehegua

Ojapóma 3 ára

Oĩ contenido tenda rehegua peteĩ párrafope.

Ha oĩ umi letra michĩva oñemboguevaʼekue.

html rehegua

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

Umi cuadro de verificación ha umi rrádio

Emoĩ Bootstrap vore’i ha radio lista aty mba’e’oka ryepýpe ha emohenda tekotevẽháicha. Ikatu reipuru umíva <label>s’ỹre, ha katu nemandu’áke emoĩ hag̃ua peteĩ aria-labelatributo ha valor ojeike hag̃ua.

Peteĩha cuadro de verificación
Mokõiha vore’i
Mbohapyha vore’i

html rehegua

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

Peteĩha radio
Mokõiha radio
Mbohapyha radio

html rehegua

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Ikatu eipuru s .stretched-link- <label>pe ejapo hag̃ua lista atyguasu tuichakue ojehecha hag̃ua.

Peteĩha cuadro de verificación
Mokõiha vore’i
Mbohapyha vore’i

html rehegua

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS rehegua

Variables rehegua

Oñemoĩve v5.2.0-pe

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã ñemboheko oñembohapévape, umi aty lista rehegua koꞌág̃a oipuru CSS mbaꞌekuaarã local on .list-group-pe oñembotuichave hag̃ua ñembohekopyrã tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass mba’ekuaarã

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

Mixin-kuéra rehegua

Ojepuru oñembojoajúvo ndive $theme-colorsomoheñói hag̃ua umi clase variante contextual rehegua s- .list-group-itempe g̃uarã.

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

Sã

Bucle omoheñóiva umi clase modificador list-group-item-variant()mixin ndive.

// 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);
}

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.

Óga Yke Marandukuéra Ñembohekorã

Oĩ contenido tenda rehegua peteĩ párrafo ojoajúva "Hogar" rehe. Ha peteĩ contenido hetave, ojeporúva ko’ápe oñembohyru ha oñemyenyhẽ hag̃uánte ko panel ficha rehegua. Producción-pe, evidentemente peguerekóta hetave contenido añetegua ko’ápe. Ha ndaha’éi texto añónte. Ikatu ha’e oimeraẽ mba’e, añetehápe. Jehaipyre, ta’anga, formulario-kuéra.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

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

Oipurúvo umi atributo de datos rehegua

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

JavaScript rupive

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

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Ikatu reactiva elemento lista individual heta hendáicha:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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

Método ha transición asíncrono rehegua

Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

Ehecha ore kuatiañe’ẽ JavaScript rehegua reikuaave hag̃ua .

Omomba’apo ne contenido peteĩ elemento ficha ramo.

Ikatu ejapo peteĩ instancia ficha rehegua constructor ndive, techapyrãramo:

const bsTab = new bootstrap.Tab('#myTab')

Tapereko	Techaukaha
`dispose`	Ohundi peteĩ elemento vore.
`getInstance`	Método estático ohejáva ndéve rehupyty hag̃ua instancia ficha rehegua ojoajúva peteĩ elemento DOM rehe, ikatu reipuru kóicha: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Método estático ombojevýva peteĩ instancia ficha ojoajúva peteĩ elemento DOM rehe térã omoheñói peteĩ pyahu en caso noñemoñepyrũi. Ikatu reiporu péicha: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Oiporavo pe ficha oñemeꞌevaꞌekue ha ohechauka iparte ojoajúva hese. Oimeraẽ ambue vore ojeporavóva’ekue mboyve oiko ndojeporavoiva’ekue ha oñeñomi iparte ojoajúva hese. Ojevy ohenóivape ojehechauka mboyve añetehápe pe ficha vore (heꞌiséva oiko mboyve pe `shown.bs.tab`mbaꞌe ojehúva).

Umi mba’e oikóva

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

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

Ndaipóriramo peteĩ ficha ndojejapóiva’ekue voi, upéicharamo umi hide.bs.tabha hidden.bs.tabmba’e ojehúva ndojedisparamo’ãi.

Tipo de evento rehegua	Techaukaha
`hide.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.target`ha `event.relatedTarget`emohenda hag̃ua pe ficha activa ko’áĝagua ha pe ficha pyahu pya’e ojejapótava, peteĩteĩ.
`hidden.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.target`ha `event.relatedTarget`emohenda hag̃ua pe ficha activa mboyvegua ha pe ficha activa pyahu, peteĩteĩ.
`show.bs.tab`	Ko mbaꞌe ojehúva odispara ficha jehechaukahápe, ha katu ojehechauka mboyve ficha pyahu. Eipuru `event.target`ha `event.relatedTarget`emohenda hag̃ua pe ficha activa ha pe ficha activa mboyvegua (oĩramo) peteĩteĩ.
`shown.bs.tab`	Ko mba’e ojehúva odispara ficha jehechaukahápe ojehechauka rire peteĩ ficha. Eipuru `event.target`ha `event.relatedTarget`emohenda hag̃ua pe ficha activa ha pe ficha activa mboyvegua (oĩramo) peteĩteĩ.

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})