JavaScript rehegua

Emoingove Bootstrap-pe ore JavaScript mboajepyréva opcional reheve. Eikuaa peteĩteĩva plugin rehegua, ore dato ha API programática opción rehegua ha hetave mba’e.

Ko páhinape

Peteĩteĩ térã oñembyatýva

Umi plugin ikatu oike peteĩteĩ (oipurúvo Bootstrap peteĩteĩva js/dist/*.js), térã opaite peteĩ jeýpe oipurúvo bootstrap.jstérã oñemboguejýva bootstrap.min.js(ani oike mokõivéva).

Eipurúramo peteĩ bundler (Webpack, Parcel, Vite...), ikatu eipuru /js/dist/*.jsvore oĩva UMD-pe.

Jepuru JavaScript ñemohendapyre ndive

Bootstrap CSS ikatu ojepuru oimeraẽva vore ndive, Bootstrap JavaScript ndojoguerahái hekopete umi JavaScript rembiapokue React, Vue ha Angular -icha oimoꞌava DOM oikuaapaite. Mokõive Bootstrap ha framework ikatu oñeha’ã omoambue peteĩchagua elemento DOM, osẽva mba’e’oka ha’eháicha umi desplegable ojejokóva tenda “obierta”-pe.

Peteĩ tape iporãvéva umi oipurúvape g̃uarã koꞌaichagua framework haꞌehína oipuru hag̃ua peteĩ paquete framework rehegua Bootstrap JavaScript rangue . Ko’ápe oĩ umi opción ojeguerohoryvéva:

Reaccionar: Reaccionar Ñepyrũrã
Vue: BootstrapVue (ko’áĝa oipytyvõ Vue 2 ha Bootstrap 4 añoite)
Angular: ng-bootstrap rehegua

Oipurúvo Bootstrap peteĩ módulo ramo

¡Eñeha'ã ndete voi! Emboguejy código fuente ha demostración omba’apóva reipuru hag̃ua Bootstrap peteĩ módulo ES ramo twbs/examples ñeñongatuhágui . Ikatu avei eipe’a techapyrã StackBlitz -pe .

Rome’ẽ peteĩ Bootstrap versión oñemopu’ãva ESM( bootstrap.esm.jsha bootstrap.esm.min.js) ramo ohejáva ndéve reipuru Bootstrap peteĩ módulo ramo kundahárape, ne kundahára reñembohapéva oipytyvõramo .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Oñembojojávo JS bundlers rehe, eipuru ESM kundahárape oikotevẽ eipuru tape ha vore réra henyhẽva módulo réra rangue. Emoñe’ẽve JS módulo rehegua kundahárape. Upévare jaipuru yvate 'bootstrap.esm.min.js'rangue . 'bootstrap'Ha katu, kóva ombohasyve ñande Popper dependencia rupive, oimportáva Popper ñande JavaScript-pe péicha:

import * as Popper from "@popperjs/core"

Eñeha’ãramo kóva oĩháicha, rehecháta peteĩ jejavy consola-pe ko’ãichagua:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Oñemohenda hag̃ua kóva, ikatu eipuru peteĩ importmapembohovái hag̃ua umi módulo réra arbitrario emohu’ã hag̃ua tapekuéra. Umi ne kundahára oñembohapéva ndoipytyvõiramo importmap, tekotevẽta reipuru tembiaporã es-module-shims . Ko’ápe ojehechauka mba’éichapa omba’apo Bootstrap ha Popper-pe g̃uarã:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

Umi dependencia rehegua

Oĩ plugin ha CSS componente odependéva ambue plugin rehe. Emoĩramo umi plugin peteĩteĩ, eñangareko ehecha hag̃ua ko’ã dependencia umi docs-pe.

Ñande dropdown, popovers ha tembipuru’i ñe’ẽmondo odepende avei Popper rehe .

Umi atributo de datos rehegua

Haimete opaite Bootstrap mboajepyréva ikatu oñemboguata ha oñemboheko HTML rupive añoite umi atributo dato rehegua reheve (ñande tape jaiporavovéva jaipuru hag̃ua JavaScript rembiaporã). Ejesareko eipuru hag̃ua peteĩ atributo datokuéra ryru añoite peteĩ elemento rehe (techapyrã, ndaikatúi emoñepyrũ peteĩ tembipuru’i ha modal peteĩchagua botón-gui).

Umi opción ikatuháicha oñembohasa atributo de datos térã JavaScript rupive, ikatu emoĩ peteĩ opción réra data-bs-, -peguáicha data-bs-animation="{value}". Ejesareko emoambue hag̃ua káso tipo opción réra “ camelCase ”-gui “ kebab-case ”-pe embohasávo umi opción atributo de datos rupive. Por ehémplo, eipuru data-bs-custom-class="beautifier"rangue data-bs-customClass="beautifier".

Bootstrap 5.2.0 guive, opaite componente oipytyvõ peteĩ atributo dato reservado experimentaldata-bs-config ikatúva oñemohenda componente configuración simple peteĩ cadena JSON ramo. Peteĩ elemento oguerekóramo data-bs-config='{"delay":0, "title":123}'ha data-bs-title="456"atributo, pe valor paha titlehaꞌeta 456ha umi atributo dato rehegua añónte omboykéta umi valor oñemeꞌevaꞌekue data-bs-config. Avei, umi atributo dato rehegua oĩmava ikatu oguereko JSON mbaꞌekuaarã data-bs-delay='{"show":0,"hide":150}'.

Umi oiporavóva

Roipuru nativo querySelectorha querySelectorAllmétodo roporandu hag̃ua DOM elemento-kuéra rehe mba’e’apopyrã rehe, upévare reipuruva’erã selector añetegua . Oipurúramo umi selector especial ha’eháicha collapse:Example, katuete ekañy chuguikuéra.

Umi mba’e oikóva

Bootstrap ome’ẽ mba’e’oka jeporupyre hetavéva umi plugin rembiaporã ijojaha’ỹvape g̃uarã. Generalmente, koꞌãva oúva peteĩ forma infinitiva ha participio ohasavaꞌekuépe - oñemboguatahápe infinitivo (ex. show) oñepyrũvo peteĩ mbaꞌe ojehúva, ha iforma participio ohasavaꞌekue (ex. shown) oñembohapéva oñembotývo peteĩ tembiapo.

Opaite mba’e ojehúva infinitivo ome’ẽ preventDefault()funcionalidad. Kóva omeꞌe katupyry ojejoko hag̃ua peteĩ tembiapo jejapópe oñepyrũ mboyve. Ojevy jeývo japu peteĩ mba’e’oka ñangarekoháragui ohenóita avei ijeheguiete preventDefault().

const myModal = document.querySelector('#myModal')

myModal.addEventListener('show.bs.modal', event => {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

API programática rehegua

Opaite constructor omoneĩ peteĩ mbaꞌe opción opcional térã mbaꞌeve (omoñepyrũva peteĩ plugin ijeiko por defecto reheve):

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

Ojehupytyséramo peteĩ instancia plugin rehegua, peteĩteĩva plugin ohechauka peteĩ getInstancemétodo. Techapyrã, ojegueru hag̃ua peteĩ instancia directamente peteĩ elemento-gui:

bootstrap.Popover.getInstance(myPopoverEl)

Ko método ojevýta nullnoñepyrũiramo peteĩ instancia elemento ojejeruréva ári.

Ikatu getOrCreateInstanceavei ojepuru ojehupyty hag̃ua instancia ojoajúva peteĩ elemento DOM ndive, térã ojejapo peteĩ pyahu oiméramo noñemoñepyrũi.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Oĩramo peteĩ instancia noñemoñepyrũi, ikatu omoneĩ ha oipuru peteĩ objeto configuración opcional mokõiha argumento ramo.

CSS poravohakuéra umi constructor-pe

Umi getInstanceha getOrCreateInstancemétodo ári, opaite plugin apoha ikatu omoneĩ peteĩ elemento DOM térã peteĩ CSS jeporavoha añetegua peteĩha argumento ramo. Umi elemento plugin rehegua ojejuhu querySelectormétodo ndive ñande plugins oipytyvõgui peteĩ elemento añoite.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

Funciones ha transiciones asíncronas rehegua

Opaite API programático método haꞌehína asíncrono ha ojevy ohenóivape oñepyrũ rire pe jehasapa, ha katu opa mboyve . Ojejapo hag̃ua peteĩ tembiapo ojejapopa rire pe transición, ikatu oñehendu pe mbaꞌe ojehúva okorrespondéva.

const myCollapseEl = document.querySelector('#myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', event => {
  // Action to execute once the collapsible area is expanded
})

Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', event => {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

`dispose`tapereko

Ikatu ramo jepe ha’ete oĩporãva ojeporu pe disposemétodo upe riremínte hide(), oguerúta resultado hendape’ỹva. Ko’ápe oĩ peteĩ techapyrã pe problema jeporu rehegua:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

Ñembohekorã ñepyrũrã

Ikatu emoambue ñemboheko tee peteĩ plugin-pe g̃uarã emoambuévo pe plugin Constructor.Defaultmba’ekuaarã:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Método ha propiedad rehegua

Opaite Bootstrap mboajepyréva ohechauka koꞌã mbaꞌeporã ha mbaꞌekuaarã estático.

Tapereko	Techaukaha
`dispose`	Ombyai peteĩ elemento modal. (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe)
`getInstance`	Método estático ohejáva ndéve rehupyty hag̃ua instancia modal ojoajúva peteĩ elemento DOM rehe.
`getOrCreateInstance`	Método estático ohejáva ndéve rehupyty instancia modal ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu en caso noñemoñepyrũi.

Propiedad estática rehegua	Techaukaha
`NAME`	Ombojevy pe plugin réra. (Techapyrã: `bootstrap.Tooltip.NAME`) .
`VERSION`	Pe versión peteĩteĩva Bootstrap plugin rehegua ikatu ojeike `VERSION`pe plugin apoha mbaꞌekuaarã rupive (Techapyrã: `bootstrap.Tooltip.VERSION`) .

Desinfectante rehegua

Tooltips ha Popovers oipuru ore desinfectante incorporado omopotĩ hag̃ua opción omoneĩva HTML.

Pe allowListmba’ekuaarã tee ha’e ko’ãva:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const DefaultAllowlist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Emoĩséramo mba’ekuaarã pyahu ko ñepyrũrãme allowListikatu rejapo ko’ã mba’e:

const myDefaultAllowList = bootstrap.Tooltip.Default.allowList

// To allow table elements
myDefaultAllowList.table = []

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Redesviaséramo ore desinfectante reiporusevégui peteĩ biblioteca dedicada, techapyrãramo DOMPurify , rejapova’erã ko’ã mba’e:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Opcionalmente ojeporúvo jQuery

Natekotevẽi jQuery Bootstrap 5 -pe , ha katu ikatu gueteri ojepuru ore componentekuéra jQuery ndive. Bootstrap ohechakuaáramo jQuerymba’e’oka ryepýpe window, omoĩta opaite ñande componente jQuery sistema plugin-pe. Péicha ikatu rejapo koʼã mbaʼe:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Péicha avei ojejapo ñande ambue componente-kuéra rehe.

Ndaipóri conflicto

Sapy’ánte tekotevẽ ojepuru Bootstrap mboajepyréva ambue UI rembiapokue ndive. Ko’ã mba’épe, ikatu sapy’apy’a oiko umi choque espacio de nombre rehegua. Péva oikóramo, ikatu ehenói .noConflictpe plugin rembojevysévape pe valor.

const bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

Bootstrap ndoipytyvõi oficialmente mbohapýha JavaScript aranduka’i Prototype térã jQuery UI-icha. Jepémo .noConflictha umi mba’e ojehúva téra espacio-pe, ikatu oĩ apañuãi compatibilidad rehegua tekotevẽva remyatyrõ ndejehegui.

jQuery mba’e ojehúva

Bootstrap ohechakuaáta jQuery oĩramo jQuerymba’e’oka’ípe windowha ndaipóri data-bs-no-jqueryatributo oñemboguapýva <body>. Ojejuhúramo jQuery, Bootstrap omosẽta umi mbaꞌe ojehúva jQuery sistema mbaꞌe ojehúva rupive. Upéicharamo, rehenduséramo Bootstrap mbaꞌe ojehúva, reipuruvaꞌerã umi jQuery rembiaporã ( .on, .one) , rangue addEventListener.

$('#myTab a').on('shown.bs.tab', () => {
  // do something...
})

Ojejoko JavaScript

Bootstrap mboajepyréva ndorekói fallback especial oñembogue jave JavaScript. Ejepy’apýramo puruhára jeikove rehe ko kásope, eipuru <noscript>emyesakã hag̃ua mba’éichapa oĩ (ha mba’éichapa ikatu emboguata jey JavaScript) ne puruhárape, ha/térã emoĩve ne mba’e’oka jeporupyre.