@types/bootstrap

Version 5.2.10
Published 10 months ago
51.9 kB
1 dependency
MIT license

Install

npm i @types/bootstrap

yarn add @types/bootstrap

pnpm add @types/bootstrap

Overview

TypeScript definitions for bootstrap

Index

Classes

Alert
Button
Carousel
Collapse
Dropdown
Modal
Offcanvas
Popover
ScrollSpy
Tab
Toast
Tooltip

Classes

class Alert

class Alert extends BaseComponent {}

property getInstance

static getInstance: GetInstanceFactory<Alert>;

Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: getInstance(alert)

property getOrCreateInstance

static getOrCreateInstance: GetOrCreateInstanceFactory<Alert, ComponentOptions>;

Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: bootstrap.Alert.getOrCreateInstance(element)

property jQueryInterface

static jQueryInterface: Alert.jQueryInterface;

property NAME

static NAME: string;

method close

close: () => void;

Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed.

class Button

class Button extends BaseComponent {}

property getInstance

static getInstance: GetInstanceFactory<Button>;

property getOrCreateInstance

static getOrCreateInstance: GetOrCreateInstanceFactory<Button, ComponentOptions>;

property jQueryInterface

static jQueryInterface: Button.jQueryInterface;

method toggle

toggle: () => void;

Toggles push state. Gives the button the appearance that it has been activated.

class Carousel

class Carousel extends BaseComponent {}

constructor

constructor(element: string | Element, options?: Partial<Carousel.Options>);

property carouselInstance

static carouselInstance: GetOrCreateInstanceFactory<
    Carousel,
    Partial<Carousel.Options>
>;

Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: bootstrap.Carousel.getOrCreateInstance(element)

property Default

static Default: Carousel.Options;

Default settings of this plugin
https://getbootstrap.com/docs/5.0/getting-started/javascript/#default-settings

property getInstance

static getInstance: GetInstanceFactory<Carousel>;

Static method which allows you to get the carousel instance associated with a DOM element.

property getOrCreateInstance

static getOrCreateInstance: GetOrCreateInstanceFactory<
    Carousel,
    Partial<Carousel.Options>
>;

property jQueryInterface

static jQueryInterface: Carousel.jQueryInterface;

method cycle

cycle: () => void;

Cycles through the carousel items from left to right.

method next

next: () => void;

Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs).

method nextWhenVisible

nextWhenVisible: () => void;

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs).

method pause

pause: (event?: any) => void;

Stops the carousel from cycling through items.

method prev

prev: () => void;

Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs).

method to

to: (index: number) => void;

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs).

class Collapse

class Collapse extends BaseComponent {}

constructor

constructor(element: string | Element, options?: Partial<Collapse.Options>);

property Default

static Default: Collapse.Options;

Default settings of this plugin
https://getbootstrap.com/docs/5.0/getting-started/javascript/#default-settings

property getInstance

static getInstance: GetInstanceFactory<Collapse>;

Static method which allows you to get the collapse instance associated with a DOM element.

property getOrCreateInstance

static getOrCreateInstance: GetOrCreateInstanceFactory<
    Collapse,
    Partial<Collapse.Options>
>;

Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: bootstrap.Collapse.getOrCreateInstance(element)

property jQueryInterface

static jQueryInterface: Collapse.jQueryInterface;

method hide

hide: () => void;

Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (e.g., before the hidden.bs.collapse event occurs).

method show

show: () => void;

Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (e.g., before the shown.bs.collapse event occurs).

method toggle

toggle: () => void;

Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).

class Dropdown extends BaseComponent {}

constructor(element: string | Element, options?: Partial<Dropdown.Options>);

static Default: Dropdown.Options;

Default settings of this plugin
https://getbootstrap.com/docs/5.0/getting-started/javascript/#default-settings

static DefaultType: Record<keyof Dropdown.Options, string>;

static getInstance: GetInstanceFactory<Dropdown>;

Static method which allows you to get the dropdown instance associated with a DOM element.

static getOrCreateInstance: GetOrCreateInstanceFactory<
    Dropdown,
    Partial<Dropdown.Options>
>;

Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: bootstrap.Dropdown.getOrCreateInstance(element)

static jQueryInterface: Dropdown.jQueryInterface;

hide: () => void;

Hides the dropdown menu of a given navbar or tabbed navigation.

show: () => void;

Shows the dropdown menu of a given navbar or tabbed navigation.

toggle: () => void;

Toggles the dropdown menu of a given navbar or tabbed navigation.

update: () => void;

Updates the position of an element's dropdown.

class Modal extends BaseComponent {}

constructor(element: string | Element, options?: Partial<Modal.Options>);

static Default: Modal.Options;

Default settings of this plugin
https://getbootstrap.com/docs/5.0/getting-started/javascript/#default-settings

static getInstance: GetInstanceFactory<Modal>;

Static method which allows you to get the modal instance associated with a DOM element

static getOrCreateInstance: GetOrCreateInstanceFactory<
    Modal,
    Partial<Modal.Options>
>;

Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialised

static jQueryInterface: Modal.jQueryInterface;

handleUpdate: () => void;

Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).

hide: () => void;

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

show: (relatedTarget?: HTMLElement) => void;

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

toggle: (relatedTarget?: HTMLElement) => void;

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

class Offcanvas

class Offcanvas extends BaseComponent {}

constructor

constructor(element: string | Element, options?: Partial<Offcanvas.Options>);

property getInstance

static getInstance: GetInstanceFactory<Offcanvas>;

Static method which allows you to get the offcanvas instance associated with a DOM element

property getOrCreateInstance

static getOrCreateInstance: GetOrCreateInstanceFactory<
    Offcanvas,
    Partial<Offcanvas.Options>
>;

Static method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn’t initialised

property jQueryInterface

static jQueryInterface: Offcanvas.jQueryInterface;

method hide

hide: () => void;

Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the hidden.bs.offcanvas event occurs).

method show

show: (relatedTarget?: HTMLElement) => void;

Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the shown.bs.offcanvas event occurs).

method toggle

toggle: (relatedTarget?: HTMLElement) => void;

Toggles an offcanvas element to shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden (i.e. before the shown.bs.offcanvas or hidden.bs.offcanvas event occurs).

class Popover extends BaseComponent {}

constructor

constructor(element: string | Element, options?: Partial<Popover.Options>);

property Default

static Default: Popover.Options;

Default settings of this plugin
https://getbootstrap.com/docs/5.0/getting-started/javascript/#default-settings

property DefaultType

static DefaultType: Record<keyof Popover.Options, string>;

property Event

static Event: Record<
    | 'CLICK'
    | 'FOCUSIN'
    | 'FOCUSOUT'
    | 'HIDDEN'
    | 'HIDE'
    | 'INSERTED'
    | 'MOUSEENTER'
    | 'MOUSELEAVE'
    | 'SHOW'
    | 'SHOWN',
    string
>;

property getInstance

static getInstance: GetInstanceFactory<Popover>;

property getOrCreateInstance

static getOrCreateInstance: GetOrCreateInstanceFactory<
    Popover,
    Partial<Popover.Options>
>;

Static method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn’t initialised

property jQueryInterface

static jQueryInterface: Popover.jQueryInterface;

property NAME

static NAME: string;

method disable

disable: () => void;

Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.

method enable

enable: () => void;

Gives an element’s popover the ability to be shown. Popovers are enabled by default.

method hide

hide: () => void;

Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

method setContent

setContent: (
    content?: Record<
        string,
        string | Element | Tooltip.SetContentFunction | null
    >
) => void;

Gives a way to change the popover’s content after its initialization.

method show

show: () => void;

Reveals an element’s popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed.

method toggle

toggle: () => void;

Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover or hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

method toggleEnabled

toggleEnabled: () => void;

Toggles the ability for an element’s popover to be shown or hidden.

method update

update: () => void;

Updates the position of an element’s popover.

class ScrollSpy

class ScrollSpy extends BaseComponent {}

constructor

constructor(element: string | Element, options?: Partial<ScrollSpy.Options>);

property Default

static Default: ScrollSpy.Options;

Default settings of this plugin
https://getbootstrap.com/docs/5.0/getting-started/javascript/#default-settings

property getInstance

static getInstance: GetInstanceFactory<ScrollSpy>;

Static method which allows you to get the scrollspy instance associated with a DOM element

property getOrCreateInstance

static getOrCreateInstance: GetOrCreateInstanceFactory<
    ScrollSpy,
    Partial<ScrollSpy.Options>
>;

Static method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn’t initialised

property jQueryInterface

static jQueryInterface: ScrollSpy.jQueryInterface;

method refresh

refresh: () => void;

When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:

class Tab

class Tab extends BaseComponent {}

property getInstance

static getInstance: GetInstanceFactory<Tab>;

Static method which allows you to get the tab instance associated with a DOM element

property getOrCreateInstance

static getOrCreateInstance: GetOrCreateInstanceFactory<Tab, ComponentOptions>;

Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialised

property jQueryInterface

static jQueryInterface: Tab.jQueryInterface;

method show

show: () => void;

Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (for example, before the shown.bs.tab event occurs).

class Toast

class Toast extends BaseComponent {}

constructor

constructor(element: string | Element, options?: Partial<Toast.Options>);

property Default

static Default: Toast.Options;

Default settings of this plugin
https://getbootstrap.com/docs/5.0/getting-started/javascript/#default-settings

property getInstance

static getInstance: GetInstanceFactory<Toast>;

Static method which allows you to get the toast instance associated with a DOM element

property getOrCreateInstance

static getOrCreateInstance: GetOrCreateInstanceFactory<
    Toast,
    Partial<Toast.Options>
>;

Static method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn’t initialised

property jQueryInterface

static jQueryInterface: Toast.jQueryInterface;

method hide

hide: () => void;

Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.

method isShown

isShown: () => boolean;

Returns a boolean according to toast’s visibility state.

method show

show: () => void;

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

class Tooltip extends BaseComponent {}

constructor

constructor(element: string | Element, options?: Partial<Tooltip.Options>);

property Default

static Default: Tooltip.Options;

Default settings of this plugin
https://getbootstrap.com/docs/5.0/getting-started/javascript/#default-settings

property DefaultType

static DefaultType: Record<keyof Tooltip.Options, string>;

property Event

static Event: Record<
    | 'CLICK'
    | 'FOCUSIN'
    | 'FOCUSOUT'
    | 'HIDDEN'
    | 'HIDE'
    | 'INSERTED'
    | 'MOUSEENTER'
    | 'MOUSELEAVE'
    | 'SHOW'
    | 'SHOWN',
    string
>;

property getInstance

static getInstance: GetInstanceFactory<Tooltip>;

property getOrCreateInstance

static getOrCreateInstance: GetOrCreateInstanceFactory<
    Tooltip,
    ComponentOptions
>;

Static method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialised

property jQueryInterface

static jQueryInterface: Tooltip.jQueryInterface;

property NAME

static NAME: string;

property SetContentFunction

static SetContentFunction: Tooltip.SetContentFunction;

method disable

disable: () => void;

Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.

method enable

enable: () => void;

Gives an element’s tooltip the ability to be shown. Tooltips are enabled by default.

method hide

hide: () => void;

Hides an element’s tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.

method setContent

setContent: (
    content?: Record<
        string,
        string | Element | Tooltip.SetContentFunction | null
    >
) => void;

Gives a way to change the tooltip’s content after its initialization.

method show

show: () => void;

Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.

method toggle

toggle: (event?: any) => void;

Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the shown.bs.tooltip or hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.

method toggleEnabled

toggleEnabled: () => void;

Toggles the ability for an element’s tooltip to be shown or hidden.

method update

update: () => void;

Updates the position of an element’s tooltip.

Namespaces

namespace Alert

namespace Alert {}

enum Events

enum Events {
    close = 'close.bs.alert',
    closed = 'closed.bs.alert',
}

member close

close = 'close.bs.alert'

Fires immediately when the close instance method is called.

member closed

closed = 'closed.bs.alert'

Fired when the alert has been closed and CSS transitions have completed.

type jQueryInterface

type jQueryInterface = (config?: 'close' | 'dispose') => JQuery;

namespace Button

namespace Button {}

type jQueryInterface

type jQueryInterface = (config?: 'toggle' | 'dispose') => JQuery;

namespace Carousel

namespace Carousel {}

interface Event

interface Event {}

property direction

readonly direction: Direction;

The direction in which the carousel is sliding (either "left" or "right").

property from

readonly from: number;

The index of the current item

property relatedTarget

readonly relatedTarget: Element;

The DOM element that is being slid into place as the active item.

property to

readonly to: number;

The index of the next item

interface Options

interface Options {}

property interval

interval: number | false;

The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
5000

property keyboard

keyboard: boolean;

Whether the carousel should react to keyboard events.
true

property pause

pause: 'hover' | false;

If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
"hover"

property ride

ride: 'carousel' | boolean;

Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
false

property touch

touch: boolean;

Whether the carousel should support left/right swipe interactions on touchscreen devices.
true

property wrap

wrap: boolean;

Whether the carousel should cycle continuously or have hard stops.
true

enum Events

enum Events {
    slide = 'slide.bs.carousel',
    slid = 'slid.bs.carousel',
}

member slid

slid = 'slid.bs.carousel'

Fired when the carousel has completed its slide transition.

member slide

slide = 'slide.bs.carousel'

Fires immediately when the slide instance method is invoked.

type Direction

type Direction = 'left' | 'right';

type jQueryInterface

type jQueryInterface = (
    config?:
        | Partial<Options>
        | number
        | 'cycle'
        | 'pause'
        | 'prev'
        | 'next'
        | 'nextWhenVisible'
        | 'to'
        | 'dispose'
) => JQuery;

namespace Collapse

namespace Collapse {}

interface Options

interface Options {}

property parent

parent: string | Element | JQuery;

If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.
false

property toggle

toggle: boolean;

Toggles the collapsible element on invocation
true

enum Events

enum Events {
    show = 'show.bs.collapse',
    shown = 'shown.bs.collapse',
    hide = 'hide.bs.collapse',
    hidden = 'hidden.bs.collapse',
}

member hidden

hidden = 'hidden.bs.collapse'

This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

member hide

hide = 'hide.bs.collapse'

This event is fired immediately when the hide method has been called.

member show

show = 'show.bs.collapse'

This event fires immediately when the show instance method is called.

member shown

shown = 'shown.bs.collapse'

This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).

type jQueryInterface

type jQueryInterface = (
    config?: Partial<Options> | 'show' | 'hide' | 'toggle' | 'dispose'
) => JQuery;

namespace Dropdown {}

interface Options extends Pick<Tooltip.Options, 'popperConfig'> {}

autoClose: boolean | 'inside' | 'outside';

Configure the auto close behavior of the dropdown
true

boundary: Popper.Boundary | Element;

Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
See Also
- https://popper.js.org/docs/v2/modifiers/prevent-overflow/#boundary "scrollParent"

display: 'dynamic' | 'static';

By default, we use Popper.js for dynamic positioning. Disable this with static.
"dynamic"

offset: Offset | string | OffsetFunction;

Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: data-bs-offset="10,20"
When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding, distance].
For more information refer to Popper's offset docs.
[0, 2]

reference: 'toggle' | 'parent' | Element | Popper.Rect;

Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', an HTMLElement reference or an object providing getBoundingClientRect. For more information refer to Popper.js's referenceObject docs.
See Also
- https://popper.js.org/docs/v2/constructors/#createpopper "toggle"

enum Events {
    show = 'show.bs.dropdown',
    shown = 'shown.bs.dropdown',
    hide = 'hide.bs.dropdown',
    hidden = 'hidden.bs.dropdown',
}

hidden = 'hidden.bs.dropdown'

Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.

hide = 'hide.bs.dropdown'

Fires immediately when the hide instance method has been called.

show = 'show.bs.dropdown'

Fires immediately when the show instance method is called.

shown = 'shown.bs.dropdown'

Fired when the dropdown has been made visible to the user and CSS transitions have completed.

type jQueryInterface = (
    config?: Partial<Options> | 'toggle' | 'show' | 'hide' | 'update' | 'dispose'
) => JQuery;

type Offset = [number, number];

type OffsetFunction = () => Offset;

namespace global

namespace global {}

interface Element

interface Element {}

method addEventListener

addEventListener: {
    <K extends keyof ElementEventMap>(
        type: K,
        listener: (this: Element, ev: ElementEventMap[K]) => any,
        options?: boolean | AddEventListenerOptions
    ): void;
    (
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | AddEventListenerOptions
    ): void;
    (
        type: Carousel.Events | 'slide.bs.carousel' | 'slid.bs.carousel',
        listener: (this: Element, ev: Carousel.Event) => any,
        options?: boolean | AddEventListenerOptions
    ): void;
    (
        type:
            | Modal.Events
            | 'show.bs.modal'
            | 'shown.bs.modal'
            | 'hide.bs.modal'
            | 'hidden.bs.modal'
            | 'hidePrevented.bs.modal',
        listener: (this: Element, ev: Modal.Event) => any,
        options?: boolean | AddEventListenerOptions
    ): void;
};

interface JQuery

interface JQuery {}

property [Popover.NAME]

[Popover.NAME]: Popover.jQueryInterface;

property [Tooltip.NAME]

[Tooltip.NAME]: Tooltip.jQueryInterface;

property alert

alert: Alert.jQueryInterface;

property button

button: Button.jQueryInterface;

property carousel

carousel: Carousel.jQueryInterface;

property collapse

collapse: Collapse.jQueryInterface;

dropdown: Dropdown.jQueryInterface;

modal: Modal.jQueryInterface;

property offcanvas

offcanvas: Offcanvas.jQueryInterface;

property scrollspy

scrollspy: ScrollSpy.jQueryInterface;

property tab

tab: Tab.jQueryInterface;

property toast

toast: Toast.jQueryInterface;

namespace Modal {}

interface Event extends CustomEvent {}

relatedTarget?: HTMLElement;

Only present for show.bs.modal and shown.bs.modal events when the event was triggered by a click. In that case, it's the element that was clicked. Otherwise, it's undefined.

target: HTMLElement;

The modal DOM element.

interface Options {}

backdrop: 'static' | boolean;

Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
true

focus: boolean;

Puts the focus on the modal when initialized.
true

keyboard: boolean;

Closes the modal when escape key is pressed
true

enum Events {
    show = 'show.bs.modal',
    shown = 'shown.bs.modal',
    hide = 'hide.bs.modal',
    hidden = 'hidden.bs.modal',
    hidePrevented = 'hidePrevented.bs.modal',
}

hidden = 'hidden.bs.modal'

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

hide = 'hide.bs.modal'

This event is fired immediately when the hide instance method has been called.

hidePrevented = 'hidePrevented.bs.modal'

This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option or data-keyboard set to false.

show = 'show.bs.modal'

This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

shown = 'shown.bs.modal'

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.

type jQueryInterface = (
    config?:
        | Partial<Options>
        | 'toggle'
        | 'show'
        | 'hide'
        | 'handleUpdate'
        | 'dispose'
) => JQuery;

namespace Offcanvas

namespace Offcanvas {}

interface Options

interface Options {}

property backdrop

backdrop: boolean | 'static';

Apply a backdrop on body while offcanvas is open. Alternatively, specify static for a backdrop which doesn’t close the offcanvas when clicked.
true

property keyboard

keyboard: boolean;

Closes the offcanvas when escape key is pressed
true

property scroll

scroll: boolean;

Allow body scrolling while offcanvas is open
false

enum Events

enum Events {
    show = 'show.bs.offcanvas',
    shown = 'shown.bs.offcanvas',
    hide = 'hide.bs.offcanvas',
    hidden = 'hidden.bs.offcanvas',
}

member hidden

hidden = 'hidden.bs.offcanvas'

This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).

member hide

hide = 'hide.bs.offcanvas'

This event is fired immediately when the hide method has been called.

member show

show = 'show.bs.offcanvas'

This event fires immediately when the show instance method is called.

member shown

shown = 'shown.bs.offcanvas'

This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).

type jQueryInterface

type jQueryInterface = (config?: 'toggle' | 'show' | 'hide') => JQuery;

namespace Popover {}

interface Options

interface Options extends Tooltip.Options {}

property content

content:
    | string
    | Element
    | JQuery
    | ((this: HTMLElement) => string | Element | JQuery);

Default content value if data-content attribute isn't present.
If a function is given, it will be called with its this reference set to the element that the popover is attached to.
''

enum Events

enum Events {
    show = 'show.bs.popover',
    shown = 'shown.bs.popover',
    hide = 'hide.bs.popover',
    hidden = 'hidden.bs.popover',
    inserted = 'inserted.bs.popover',
}

member hidden

hidden = 'hidden.bs.popover'

This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).

member hide

hide = 'hide.bs.popover'

This event is fired immediately when the hide instance method has been called.

member inserted

inserted = 'inserted.bs.popover'

This event is fired after the show.bs.popover event when the popover template has been added to the DOM.

member show

show = 'show.bs.popover'

This event fires immediately when the show instance method is called.

member shown

shown = 'shown.bs.popover'

This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).

type jQueryInterface

type jQueryInterface = (
    config?:
        | Partial<Options>
        | 'show'
        | 'hide'
        | 'toggle'
        | 'enable'
        | 'disable'
        | 'toggleEnabled'
        | 'update'
        | 'setContent'
        | 'dispose'
) => JQuery;

namespace ScrollSpy

namespace ScrollSpy {}

interface Options

interface Options {}

property method

method: 'auto' | 'offset' | 'position';

Finds which section the spied element is in. auto will choose the best method to get scroll coordinates. offset will use the Element.getBoundingClientRect() method to get scroll coordinates. position will use the HTMLElement.offsetTop and HTMLElement.offsetLeft properties to get scroll coordinates.
'auto'

property offset

offset: number;

Pixels to offset from top when calculating position of scroll.
10

property rootMargin

rootMargin: string;

Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position.
'0px 0px -25%'

property smoothScroll

smoothScroll: boolean;

Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables.
false

property target

target: string | Element | JQuery;

Specifies element to apply Scrollspy plugin.

property threshold

threshold?: number[] | string;

IntersectionObserver [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#threshold) valid input, when calculating scroll position.

enum Events

enum Events {
    activate = 'activate.bs.scrollspy',
}

member activate

activate = 'activate.bs.scrollspy'

This event fires on the scroll element whenever a new item becomes activated by the scrollspy.

type jQueryInterface

type jQueryInterface = (config?: Partial<Options> | 'refresh' | 'dispose') => JQuery;

namespace Tab

namespace Tab {}

enum Events

enum Events {
    show = 'show.bs.tab',
    shown = 'shown.bs.tab',
    hide = 'hide.bs.tab',
    hidden = 'hidden.bs.tab',
}

member hidden

hidden = 'hidden.bs.tab'

This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.

member hide

hide = 'hide.bs.tab'

This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.

member show

show = 'show.bs.tab'

This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

member shown

shown = 'shown.bs.tab'

This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

type jQueryInterface

type jQueryInterface = (config?: 'show' | 'dispose') => JQuery;

namespace Toast

namespace Toast {}

interface Options

interface Options {}

property animation

animation: boolean;

Apply a CSS fade transition to the toast
true

property autohide

autohide: boolean;

Auto hide the toast
true

property delay

delay: number;

Delay hiding the toast (ms)
5000

enum Events

enum Events {
    show = 'show.bs.toast',
    shown = 'shown.bs.toast',
    hide = 'hide.bs.toast',
    hidden = 'hidden.bs.toast',
}

member hidden

hidden = 'hidden.bs.toast'

This event is fired when the toast has finished being hidden from the user.

member hide

hide = 'hide.bs.toast'

This event is fired immediately when the hide instance method has been called.

member show

show = 'show.bs.toast'

This event fires immediately when the show instance method is called.

member shown

shown = 'shown.bs.toast'

This event is fired when the toast has been made visible to the user.

type jQueryInterface

type jQueryInterface = (
    config?: Partial<Options> | 'show' | 'hide' | 'dispose'
) => JQuery;

namespace Tooltip {}

interface Options

interface Options {}

property allowList

allowList: Record<keyof HTMLElementTagNameMap | '*', Array<string | RegExp>>;

Object which contains allowed attributes and tags
See Also
- https://v5.getbootstrap.com/docs/5.0/getting-started/javascript/#sanitizer

property animation

animation: boolean;

Apply a CSS fade transition to the tooltip
true

property boundary

boundary: Popper.Boundary;

Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only).
See Also
- https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement 'scrollParent'

property container

container: string | Element | false;

Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.
false

property customClass

customClass?: string | (() => string) | undefined;

Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'.
You can also pass a function that should return a single string containing additional class names.
''

property delay

delay: number | { show: number; hide: number };

Delay showing and hiding the popover (ms) - does not apply to manual trigger type
If a number is supplied, delay is applied to both hide/show
0

property fallbackPlacements

fallbackPlacements: string[];

Allow to specify which position Popper will use on fallback.
See Also
- https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements ['top', 'right', 'bottom', 'left']

property html

html: boolean;

Allow HTML in the tooltip.
If true, HTML tags in the tooltip's title will be rendered in the tooltip. If false, innerText property will be used to insert content into the DOM.
Use text if you're worried about XSS attacks.
false

property offset

offset: Offset | string | OffsetFunction;

Offset of the tooltip relative to its target.
When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding, distance].
See Also
- https://popper.js.org/docs/v2/modifiers/offset [0, 0]

property placement

placement: PopoverPlacement | (() => PopoverPlacement);

How to position the popover - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the popover.
When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.
'top'

property popperConfig

popperConfig: Partial<Popper.Options> | PopperConfigFunction | null;

To change Bootstrap's default Popper.js config
When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.
See Also
- https://popper.js.org/docs/v2 null

property sanitize

sanitize: boolean;

Enable or disable the sanitization. If activated 'template' and 'title' options will be sanitized.
true

property sanitizeFn

sanitizeFn: () => void | null;

Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
null

property selector

selector: string | false;

If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (jQuery.on support).
false

property template

template: string;

Base HTML to use when creating the tooltip.
The tooltip's title will be injected into the .tooltip-inner.
.tooltip-arrow will become the tooltip's arrow.
The outermost wrapper element should have the .tooltip class and role="tooltip".
''

property title

title:
    | string
    | Element
    | JQuery
    | ((this: HTMLElement) => string | Element | JQuery);

Default title value if title attribute isn't present.
If a function is given, it will be called with its this reference set to the element that the popover is attached to.
''

property trigger

trigger:
    | 'click'
    | 'hover'
    | 'focus'
    | 'manual'
    | 'click hover'
    | 'click focus'
    | 'hover focus'
    | 'click hover focus';

How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
'manual' indicates that the tooltip will be triggered programmatically via the .tooltip('show'), .tooltip('hide') and .tooltip('toggle') methods; this value cannot be combined with any other trigger.
'hover' on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.
'hover focus'

enum Events

enum Events {
    show = 'show.bs.tooltip',
    shown = 'shown.bs.tooltip',
    hide = 'hide.bs.tooltip',
    hidden = 'hidden.bs.tooltip',
    inserted = 'inserted.bs.tooltip',
}

member hidden

hidden = 'hidden.bs.tooltip'

This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).

member hide

hide = 'hide.bs.tooltip'

This event is fired immediately when the hide instance method has been called.

member inserted

inserted = 'inserted.bs.tooltip'

This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM.

member show

show = 'show.bs.tooltip'

This event fires immediately when the show instance method is called.

member shown

shown = 'shown.bs.tooltip'

This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).

type jQueryInterface

type jQueryInterface = (
    config?:
        | Partial<Options>
        | 'show'
        | 'hide'
        | 'toggle'
        | 'enable'
        | 'disable'
        | 'toggleEnabled'
        | 'update'
        | 'setContent'
        | 'dispose'
) => JQuery;

type Offset

type Offset = [number, number];

type OffsetFunction

type OffsetFunction = () => Offset;

type PopoverPlacement

type PopoverPlacement = 'auto' | 'top' | 'bottom' | 'left' | 'right';

type PopperConfigFunction

type PopperConfigFunction = (
    defaultBsPopperConfig: Popper.Options
) => Partial<Popper.Options>;

type SetContentFunction

type SetContentFunction = () =>
    | string
    | Element
    | (() => string | Element | null)
    | null;

Package Files (13)

Dependencies (1)

@popperjs/core

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/bootstrap.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/bootstrap)

HTML

<a href="https://www.jsdocs.io/package/@types/bootstrap"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 10 months ago.
Package analyzed in 4930 ms.
Missing or incorrect documentation? Open an issue for this package.

@types/bootstrap

Install

Overview

Index

Classes

Namespaces

Classes

class Alert

property getInstance

property getOrCreateInstance

property jQueryInterface

property NAME

method close

class Button

property getInstance

property getOrCreateInstance

property jQueryInterface

method toggle

class Carousel

property carouselInstance

property Default

property getInstance

property getOrCreateInstance

property jQueryInterface

method cycle

method next

method nextWhenVisible

method pause

method prev

method to

class Collapse

property Default

property getInstance

property getOrCreateInstance

property jQueryInterface

method hide

method show

method toggle

class Dropdown

property Default

property DefaultType

property getInstance

property getOrCreateInstance

property jQueryInterface

method hide

method show

method toggle

method update

class Modal

property Default

property getInstance

property getOrCreateInstance

property jQueryInterface

method handleUpdate

method hide

method show

method toggle

class Offcanvas

property getInstance

property getOrCreateInstance

property jQueryInterface

method hide

method show

method toggle

class Popover

property Default

property DefaultType

property Event

property getInstance

property getOrCreateInstance

property jQueryInterface

property NAME

method disable

method enable

method hide

method setContent

method show

method toggle

method toggleEnabled

method update