Methods

On this page

Method call

From internal components

To call a method of a component from a button or other object placed inside the component to be controlled, specify method name=component to be controlled.

Hello, world! This is a toast message.

vue

<template>
  <Toast show>
    <ToastHeader>
      <b-img
        src="https://dummyimage.com/20x20/007aff/007aff"
        rounded
        margin="e-2"
        alt="Card image cap"
      />
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <CloseButton dismiss="toast" />
    </ToastHeader>
    <ToastBody>Hello, world! This is a toast message.</ToastBody>
  </Toast>
</template>

From external components

To call a method of a controlled component from a button or other object placed outside of the controlled component

Set the ID to the component to be controlled, and specify target=#{id} and method name=target component for buttons, etc.

vue

<template>
  <!-- Button trigger modal -->
  <b-button
    button="primary"
    toggle="modal"
    target="#exampleModal"
  >
    Launch demo modal
  </b-button>
  <!-- Modal -->
  <Modal id="exampleModal">
    <ModalDialog>
      <ModalContent>
        <ModalHeader>
          <ModalTitle>Modal title</ModalTitle>
          <CloseButton dismiss="modal" />
        </ModalHeader>
        <ModalBody>...</ModalBody>
        <ModalFooter>
          <b-button
            button="secondary"
            dismiss="modal"
          >
            Close
          </b-button>
          <b-button button="primary">
            Save changes
          </b-button>
        </ModalFooter>
      </ModalContent>
    </ModalDialog>
  </Modal>
</template>

Scripts

To make method calls on the controlled component by Sciript, use the
ref.

vue

<template>
  <!-- Button trigger modal -->
  <b-button
    button="primary"
    @click="clicked"
  >
    Launch demo modal
  </b-button>
  <!-- Modal -->
  <Modal ref="demoModal">
    <ModalDialog>
      <ModalContent>
        <ModalHeader>
          <ModalTitle>Modal title</ModalTitle>
          <CloseButton dismiss="modal" />
        </ModalHeader>
        <ModalBody>...</ModalBody>
        <ModalFooter>
          <b-button
            button="secondary"
            dismiss="modal"
          >
            Close
          </b-button>
          <b-button button="primary">
            Save changes
          </b-button>
        </ModalFooter>
      </ModalContent>
    </ModalDialog>
  </Modal>
</template>
<script setup lang="ts">
import { delay } from 'lodash-es';

const demoModal = ref(null)

const clicked = () => {
  delay(() => {
    if (demoModal.value) {
      demoModal.value.show()
    }
  }, 3000)

}
</script>

Components

Accordion Item

Method	Description
`toggle`	Switch manually
`show`	Open manually
`hide`	Manually hide
`dismiss`	Manually hide

Alert

Method	Description
`toggle`	Manual switching
`show`	Manually show
`hide`	Manually hide
`dismiss`	Manually hide

Carousel

Method	Description
`cycle`	Circulate items from left to right
`pause`	Stop circulating items
`prev`	Circulate to previous item
`next`	Circulate to next item
`to`	Circulate to specific items

Modal

Method	Description
`toggle`	Manually switch the modal
`show`	Manually open the modal
`hide`	Manually hide the modal
`dismiss`	Manually hide the modal