メソッド

Method呼び出し

内部コンポーネントから

制御対象コンポーネントの内部に設置されたボタン等から制御対象コンポーネントのメソッドを呼び出しをするには、メソッド名=対象コンポーネント を指定します。

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>

外部コンポーネントから

制御対象コンポーネントの外部に設置されたボタン等から制御対象コンポーネントのメソッドを呼び出しするには

制御対象コンポーネントにIDを設定し、ボタン等に target="#{id}" と、メソッド名=対象コンポーネント を指定します。

vue

<template>
 <!-- Button trigger modal -->
 <b-button
  color="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
      color="secondary"
      dismiss="modal"
     >
      Close
     </b-button>
     <b-button color="primary">
      Save changes
     </b-button>
    </ModalFooter>
   </ModalContent>
  </ModalDialog>
 </Modal>
</template>

Scripts

制御対象コンポーネントのメソッド呼び出しをSciriptによって行うには
ref を利用します。

: :

vue

<template>
 <!-- Button trigger modal -->
 <b-button
  color="primary"
  @click="clicked"
 >
  Launch demo modal
 </b-button>
 <EventViewer :raised="raised" />
 <!-- Modal -->
 <Modal
  ref="demoModal"
  @hide="onHide"
  @hidden="onHidden"
  @show="onShow"
  @shown="onShown"
 >
  <ModalDialog>
   <ModalContent>
    <ModalHeader>
     <ModalTitle>Modal title</ModalTitle>
     <CloseButton dismiss="modal" />
    </ModalHeader>
    <ModalBody>...</ModalBody>
    <ModalFooter>
     <b-button
      color="secondary"
      dismiss="modal"
     >
      Close
     </b-button>
     <b-button color="primary">
      Save changes
     </b-button>
    </ModalFooter>
   </ModalContent>
  </ModalDialog>
 </Modal>
</template>

<script setup lang="ts">
import { delay } from 'es-toolkit/compat';

const demoModal = ref(null);
const raised = ref({ name: '', event: '' });

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

const onHide = () => {
 raised.value = { name: 'Modal', event: 'Hide' };
};
const onHidden = () => {
 raised.value = { name: 'Modal', event: 'Hidden' };
};
const onShow = () => {
 raised.value = { name: 'Modal', event: 'Show' };
};
const onShown = () => {
 raised.value = { name: 'Modal', event: 'Shown' };
};
</script>

Components

Accordion Item

Method	Description
`toggle`	手動で切り替えます
`show`	手動で開きます
`hide`	手動で非表示にします

Alert

Method	Description
`toggle`	手動で切り替えます
`show`	手動で開きます
`hide`	手動で非表示にします

Carousel

Method	Description
`cycle`	アイテムを左から右へ循環させます
`pause`	アイテムを循環するのを停止します
`prev`	前のアイテムに循環します
`next`	次のアイテムに循環します
`to`	特定のアイテムに循環させます

Collapse

Method	Description
`toggle`	折りたたみ可能な要素の表示・非表示を切り替えます。折りたたみ可能な要素が実際に表示または非表示になる前に呼び出し元に戻ります。
`show`	折りたたみ可能な要素を表示します。折りたたみ可能な要素が実際に表示される前に呼び出し元に戻ります。
`hide`	折りたたみ可能な要素を非表示にします。折りたたみ可能な要素が実際に隠される前に呼び出し元に戻ります。

Dropdowns

Method	Description
`toggle`	折りたたみ可能な要素の表示・非表示を切り替えます。折りたたみ可能な要素が実際に表示または非表示になる前に呼び出し元に戻ります。
`show`	折りたたみ可能な要素を表示します。折りたたみ可能な要素が実際に表示される前に呼び出し元に戻ります。
`hide`	折りたたみ可能な要素を非表示にします。折りたたみ可能な要素が実際に隠される前に呼び出し元に戻ります。

Modal

Method	Description
`toggle`	モーダルを手動で切り替えます
`show`	手動でモーダルを開きます
`hide`	手動でモーダルを非表示にします

Offcanvas

Method	Description
`toggle`	折りたたみ可能な要素の表示・非表示を切り替えます。折りたたみ可能な要素が実際に表示または非表示になる前に呼び出し元に戻ります。
`show`	折りたたみ可能な要素を表示します。折りたたみ可能な要素が実際に表示される前に呼び出し元に戻ります。
`hide`	折りたたみ可能な要素を非表示にします。折りたたみ可能な要素が実際に隠される前に呼び出し元に戻ります。

Bootstrap

Browse docs