Navs ha tabs rehegua
Kuatiahaipyre ha techapyrã mbaꞌeichaitépa ojepurukuaa Bootstrap mbaꞌekuaarã jeguatarã oikevaꞌekue.
Base nav
Navegación ojeguerekóva Bootstrap-pe okomparti marcado general ha estilo, .nav
clase base guive estado activo ha desactivado peve. Embohasa umi mbo’esyry modificador rehegua emoambue hag̃ua peteĩteĩva estilo apytépe.
Pe componente base .nav
oñemopuꞌa flexbox reheve ha omeꞌe peteĩ pyenda mbarete oñemopuꞌa hag̃ua opaichagua componente navegación rehegua. Oike ipype peteĩ estilo ñemboyke (ombaꞌapo hag̃ua lista ndive), peteĩ enlace relleno umi área de golpe tuichavévape g̃uarã ha estilo básico desactivado.
Pe componente base .nav
ndoikéiva mba’eveichagua .active
estado. Ko’ã techapyrã oúvape oike pe clase, principalmente ohechauka haĝua ko clase particular ndodisparaiha mba’eveichagua estilo especial.
Oñembohasa hag̃ua estado activo umi tecnología pytyvõhárape, eipuru aria-current
atributo — eipuru page
valor página koꞌag̃aguápe g̃uarã, térã true
mbaꞌe koꞌag̃agua peteĩ conjunto-pe g̃uarã.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Umi clase ojeporu opa rupi, upévare nde marcado ikatu ha’e súper flexible. Eipuru <ul>
s yvateguáicha, <ol>
iñimportánteramo ne mbaꞌekuéra ñemohenda, térã embojere nde mbaꞌeteéva peteĩ <nav>
elemento reheve. Umi .nav
jepuru rupi display: flex
, umi nav joajuha oñekomporta peteĩcha umi mba’e nav ojapova’erãmo’ãicha, ha katu pe marcado extra’ỹre.
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Umi estilo ojeguerekóva
Omoambue estilo .nav
componente s rehegua umi modificador ha utilidad reheve. Embojehe’a ha embojoaju tekotevẽháicha, térã emopu’ã nde mba’éva.
Alineación horizontal rehegua
Emoambue alineación horizontal nde nav rehegua umi utilidad flexbox ndive . Por defecto, navs oñemohenda izquierda gotyo, ha katu ikatu remoambue fácilmente centro térã derecha gotyo.
Oñecentra con .justify-content-center
: 1.1.
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Oñembojoaju derecho ndive .justify-content-end
: .
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Ñembo'yakua
Emoĩ apila nde navegación emoambuévo flex elemento dirección .flex-column
utilidad ndive. ¿Tekotevẽpa remoĩ apila umíva peteĩva umi jehechaukaha rehe ha katu nahániri ambuépe? Eipuru umi versión ombohováiva (por ejemplo, .flex-sm-column
).
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Jepiveguáicha, ikatu ojejapo navegación vertical <ul>
s ÿre, avei.
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Fichas rehegua
Ogueraha nav básico yvate guive ha omoĩve .nav-tabs
mboꞌepy omoheñói hag̃ua peteĩ interfaz ficha rehegua. Eipuru umíva emoheñói hag̃ua región tabbable ore ficha JavaScript plugin rupive .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Pastillas rehegua
Ejagarra upe HTML peteĩchagua, ha katu eipuru .nav-pills
hendaguépe:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Omyenyhẽ ha ohustifika
Embojere nde .nav
's contenido ombohape hag̃ua ipypuku ojeguerekóva henyhẽva peteĩva mokõi mbo’esyry modificador-gui. Emyenyhẽ hag̃ua proporcionalmente opaite espacio ojeguerekóva nde .nav-item
s reheve, eipuru .nav-fill
. Ñañaminduꞌu opaite espacio horizontal ojeguerekoha, ha katu ndahaꞌei opaite mbaꞌe nav oguerekóva peteĩchagua ipypuku.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Oipurúvo peteĩ <nav>
navegación -based, ikatu ojeheja rei oñeikotevẽháicha .nav-item
añoite .nav-link
umi elemento estilo <a>
rehegua.
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Umi elemento ipukukue joja rehegua, eipuru .nav-justified
. Opaite espacio horizontal oguerekóta umi enlace nav, ha katu ojoavy umi .nav-fill
yvateguágui, opaite mbaꞌe nav oguerekóta peteĩchagua ipypuku.
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Ojogua .nav-fill
techapyrãme oipurúva peteĩ <nav>
-based navegación.
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Omba’apóva umi utilidad flex ndive
Oiméramo reikotevẽ umi variación nav ombohováiva, ehecha eipuru peteĩ serie de utilidades flexbox . Oĩramo jepeve verbose, ko’ã utilidad oikuave’ẽ tuichave personalización umi punto de ruptura ombohováiva rupi. Pe techapyrã iguýpe, ñande nav oñembojoajúta punto de ruptura ijyvatevévape, upéi ojeadapta peteĩ diseño horizontal-pe omyenyhẽva ancho ojeguerekóva oñepyrũvo punto de ruptura michĩvagui.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Accesibilidad rehegua
Eipurúramo navs eme’ẽ hag̃ua peteĩ barra de navegación, eñangareko emoĩ peteĩ role="navigation"
mba’e’oka túva lógicovévape <ul>
, térã embojere peteĩ <nav>
elemento jeguata tuichakue jerére. Ani remoĩ pe rol pe <ul>
ijehegui, péva ojokótagui oñemoherakuã haguã lista añetéva ramo umi tecnología oipytyvõva rupive.
Ñañamindu’u umi barra de navegación, jepémo ojehechaháicha estilo ficha ramo .nav-tabs
mbo’esyry ndive, noñeme’ẽiva’erã ,role="tablist"
térã role="tab"
atributo role="tabpanel"
. Koꞌãva oñemohenda porã umi interfaz ficha dinámica-pe g̃uarãnte, oñemombeꞌuháicha WAI ARIA Authoring Practices -pe . Ehecha JavaScript reko umi interfaz ficha dinámica rehegua ko aty’ípe techapyrãramo. Pe aria-current
atributo natekotevẽi umi interfaz ficha dinámica-pe ñande JavaScript oñatende guive estado ojeporavóva omoĩvo aria-selected="true"
ficha activa-pe.
Oipurúvo umi desplegable
Emoĩve menú desplegable orekóva HTML michĩmi extra ha umi desplegable JavaScript plugin .
Umi ficha orekóva umi desplegable
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Pastillas orekóva gota
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Sass rehegua
Variables rehegua
$nav-link-padding-y: .5rem;
$nav-link-padding-x: 1rem;
$nav-link-font-size: null;
$nav-link-font-weight: null;
$nav-link-color: $link-color;
$nav-link-hover-color: $link-hover-color;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color: $gray-600;
$nav-tabs-border-color: $gray-300;
$nav-tabs-border-width: $border-width;
$nav-tabs-border-radius: $border-radius;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color: $gray-700;
$nav-tabs-link-active-bg: $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;
$nav-pills-border-radius: $border-radius;
$nav-pills-link-active-color: $component-active-color;
$nav-pills-link-active-bg: $component-active-bg;
JavaScript jepokuaa
Eipuru pe ficha JavaScript plugin —emoinge peteĩteĩ térã bootstrap.js
vore oñembohekopyréva rupive—embotuichave hag̃ua ñande ficha ha pastilla navegación rehegua emoheñói hag̃ua umi panel ficha rehegua contenido local rehegua.
Umi interfaz dinámica ficha rehegua, oñemombeꞌuháicha WAI ARIA Authoring Practices -pe , oikotevẽ role="tablist"
, role="tab"
, role="tabpanel"
, ha atributo adicional aria-
ikatu hag̃uáicha ombohasa ijestructura, funcionalidad ha estado koꞌag̃agua umi oiporúvape umi tecnología oipytyvõvape (haꞌeháicha umi pantalla moñeꞌerã). Peteĩ jepokuaa iporãvéva ramo, romomarandu eipuru <button>
hag̃ua elemento umi ficha-pe g̃uarã, ko’ãva ha’égui control omoñepyrũva peteĩ ñemoambue dinámico, ndaha’éi umi enlace ohóva peteĩ página térã tenda pyahúpe.
Eñamindu’u umi interfaz dinámica ficha rehegua ndoguerekóiva’erãha menú desplegable, kóva omoheñóigui mokõive mba’e’oka jepuru ha jeikekuaa rehegua. Peteĩ jepurukuaa jehecha guive, pe he’íva pe ficha ojehechaukáva ko’áĝa elemento desencadenante ndojehechái pya’e (oĩháicha menú desplegable oñembotýva ryepýpe) ikatu omoheñói ñembotavy. Peteĩ punto de vista accesibilidad guive, koꞌág̃a rupi ndaipóri tape sensato ojejapo hag̃ua mapa koꞌãichagua constructo peteĩ patrón WAI ARIA estándar-pe, heꞌiséva ndaikatuiha ojejapo fácilmente oñentende hag̃ua umi oiporúva tecnología oipytyvõvape.
Kóva ha’e peteĩ contenido tenda’i rehegua pe ficha Hogar contenido ojoajúva. Ojepysóramo ambue ficha oñembohasáta ko’ãva jehechauka ambuépe g̃uarã. Pe ficha JavaScript ombohasa mbo’esyry ocontrola hag̃ua contenido jehechauka ha estilo. Ikatu reipuru umi ficha, pastilla ha oimeraẽ ambue .nav
navegación -mombaretéva ndive.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
Oipytyvõ hag̃ua oike hag̃ua ne remikotevẽme, kóva omba’apo <ul>
-based markup ndive, ojehechaukaháicha yvateve, térã oimeraẽva “roll your own” markup arbitrario reheve. Eñamindu’u reiporúramo <nav>
, neremoĩriva’erã hese role="tablist"
directamente, kóva omboykétagui elemento rembiapo nativo peteĩ señal de navegación ramo. Upéva rangue, embohasa peteĩ elemento alternativo-pe (techapyrã iguýpe, peteĩ simple <div>
) ha embojere <nav>
ijerére.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
Pe plugin tabs omba’apo avei umi pastilla ndive.
Kóva ha’e peteĩ contenido tenda’i rehegua pe ficha Hogar contenido ojoajúva. Ojepysóramo ambue ficha oñembohasáta ko’ãva jehechauka ambuépe g̃uarã. Pe ficha JavaScript ombohasa mbo’esyry ocontrola hag̃ua contenido jehechauka ha estilo. Ikatu reipuru umi ficha, pastilla ha oimeraẽ ambue .nav
navegación -mombaretéva ndive.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
Ha umi pastilla vertical reheve.
Kóva ha’e peteĩ contenido tenda’i rehegua pe ficha Hogar contenido ojoajúva. Ojepysóramo ambue ficha oñembohasáta ko’ãva jehechauka ambuépe g̃uarã. Pe ficha JavaScript ombohasa mbo’esyry ocontrola hag̃ua contenido jehechauka ha estilo. Ikatu reipuru umi ficha, pastilla ha oimeraẽ ambue .nav
navegación -mombaretéva ndive.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
Oipurúvo umi atributo de datos rehegua
Ikatu emomba’apo peteĩ ficha térã pastilla jeguata ehai’ỹre mba’eveichagua JavaScript emombe’úvo data-bs-toggle="tab"
térã data-bs-toggle="pill"
peteĩ elemento ári. Eipuru ko’ã atributo dato rehegua .nav-tabs
térã .nav-pills
.
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
JavaScript rupive
Emboguata umi vore vore’i JavaScript rupive (peteĩteĩva vore tekotevẽ oñemboguata peteĩteĩ):
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()
})
})
Ikatu emombaꞌapo peteĩteĩva ficha heta hendáicha:
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
Efecto de desvanecimiento rehegua
Ojejapo hag̃ua umi ficha oñedesvanece, emoĩ .fade
peteĩteĩme .tab-pane
. Peteĩha vore vore oguerekovaꞌerã avei .show
ojehecha hag̃ua pe contenido ñepyrũrã.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</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 .
constructor
Omombaꞌapo peteĩ elemento ficha ha mbaꞌeryru contenido rehegua. Tab oguerekovaꞌerã peteĩ data-bs-target
térã, oipurúramo peteĩ joajuha, peteĩ href
atributo, ojepytasóva peteĩ nodo mbaꞌerepy rehegua DOM-pe.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab li:last-child a')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
hechauka
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).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
omboyke haguã
Ohundi peteĩ elemento vore.
ohupytyInstancia
Método estático ohejáva ndéve rehupyty hag̃ua instancia ficha rehegua ojoajúva peteĩ elemento DOM rehe
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
ohupytyTérãEjapoInstancia
Método estático ohejáva ndéve rehupyty hag̃ua instancia ficha rehegua ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu oiméramo noñemoñepyrũi
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
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 pehide.bs.tab
evento-pe g̃uarã)shown.bs.tab
(pe pestaña ojehechauka ramóvape, peteĩchagua peshow.bs.tab
evento-pe g̃uarã)
Ndaipóriramo peteĩ ficha ndojejapóiva’ekue voi, upéicharamo umi hide.bs.tab
ha hidden.bs.tab
mba’e ojehúva ndojedisparamo’ãi.
Tipo de evento rehegua | Techaukaha |
---|---|
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ĩ. |
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ĩ. |
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})