ޓޯސްޓްސް އެވެ

ޓޯސްޓް އަކީ މޯބައިލް އަދި ޑެސްކްޓޮޕް އޮޕަރޭޓިން ސިސްޓަމްތަކުން މަގުބޫލުކޮށްފައިވާ ޕުޝް ނޮޓިފިކޭޝަންތައް ނަކަލު ކުރުމަށް ފަރުމާކޮށްފައިވާ ލުއި ނޮޓިފިކޭޝަންތަކެކެވެ. އެއީ ފްލެކްސްބޮކްސް އާއި އެކު ހަދާފައިވާ އެއްޗެހި ކަމުން އެލައިންކޮށް ޕޮޒިޝަން ކުރަން ފަސޭހަ އެވެ.

އޯވަރވިއު

ޓޯސްޓް ޕްލަގިން ބޭނުންކުރާއިރު އެނގެން ޖެހޭ ކަންތައްތައް:

• ޓޯސްޓްތަކަކީ ޕާފޯމަންސް ސަބަބުތަކާހުރެ އޮޕްޓް-އިން ކުރާ އެއްޗަކަށް ވާތީ އަމިއްލައަށް އިނިޝިއަލައިޒް ކުރަން ޖެހެ އެވެ .
• ކަނޑައެޅިފައި ނުވާނަމަ ޓޯސްޓްތައް އޮޓޮމެޓިކުން ފޮރުވޭނެއެވެ autohide: false.

މިސާލުތަކެވެ

އާދައިގެ

އެކްސްޓެންސިބަލް އަދި ޕްރިޑިކްޓެބަލް ޓޯސްޓްތަކަށް ހިތްވަރު ދިނުމަށްޓަކައި، ހެޑަރ އާއި ބޮޑީ އެއް ހެދުމަށް އަޅުގަނޑުމެން ލަފާދެމެވެ. ޓޯސްޓް ހެޑަރސް ބޭނުން display: flex, އަޅުގަނޑުމެންގެ މާރޖިން އަދި ފްލެކްސްބޮކްސް ޔުޓިލިޓީސްގެ ސަބަބުން ކޮންޓެންޓް ފަސޭހައިން އެލައިން ކުރެވޭނެ ގޮތް ހެދުން.

ޓޯސްޓްތަކަކީ ބޭނުންވާ ވަރަށް ފްލެކްސިބަލް އެއްޗަކަށް ވާއިރު، ބޭނުންވާ މާކަޕް ވަރަށް މަދު އެއްޗެކެވެ. އެންމެ ކުޑަމިނުން، ތިޔަބޭފުޅުންގެ “ޓޯސްޓް” ކޮންޓެންޓް ހިމެނޭނެ އެއް އުނިއިތުރެއް އަޅުގަނޑުމެން ބޭނުންވެ، ޑިސްމިސް ބަޓަނަކަށް ވަރަށް ބޮޑަށް ބާރުއަޅަމެވެ.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ލައިވް މިސާލު

ތިރީގައިވާ ބަޓަންއަށް ފިތާލުމުން ޑިފޯލްޓްކޮށް ފޮރުވިފައިވާ ޓޯސްޓެއް (ކަނާތް ފަރާތުގެ ތިރީ ކޮޅުގައި އަޅުގަނޑުމެންގެ ޔުޓިލިޓީސް ޖަހާފައި ހުރި) ފެންނާނެއެވެ.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

އަޅުގަނޑުމެންގެ ލައިވް ޓޯސްޓް ޑެމޯ ޓްރިގަރ ކުރުމަށް އަޅުގަނޑުމެން ތިރީގައިވާ ޖާވާސްކްރިޕްޓް ބޭނުންކުރަމެވެ:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

ޓްރާންސްލޫސެންޓް އެވެ

ޓޯސްޓްތަކަކީ އޭގެ ތިރީގައި ހުންނަ އެއްޗަކާ ގުޅެން ކުޑަކޮށް ޓްރާންސްލޫސެންޓް އެއްޗެކެވެ.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ސްޓޭކިންގ

ޓޯސްޓްތައް ސްޓޭކް ކުރެވޭނީ ޓޯސްޓް ކޮންޓެއިނަރެއްގައި އޮޅާލައިގެން ކަމަށާއި، އެ ކޮންޓެއިނަރުން ވަރުގަދައަށް ކޮންމެވެސް ވަރެއްގެ ޖާގައެއް އިތުރުވެގެންދާނެ ކަމަށެވެ.

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

ކަސްޓަމް ކޮންޓެންޓް

ސަބް ކޮމްޕޮނެންޓްތައް ނައްތާލައި، ޔުޓިލިޓީސް އާއި އެކު ޓްވީކްކޮށް ، ނުވަތަ އަމިއްލައަށް މާކަޕް އިތުރުކޮށްގެން ޓޯސްޓްތައް ކަސްޓަމައިޒް ކުރާށެވެ. މިތަނުގައި އަޅުގަނޑުމެން މިވަނީ ޑިފޯލްޓް ނައްތާލައި، ބޫޓްސްޓްރެޕް.toast-header އައިކޮންސް އިން ކަސްޓަމް ހައިޑް އައިކޮން އިތުރުކޮށް ، އަދި ލޭއައުޓް އެޖެސްޓް ކުރުމަށް ބައެއް ފްލެކްސްބޮކްސް ޔުޓިލިޓީސް ބޭނުންކޮށްގެން ސާދާ ޓޯސްޓެއް އުފައްދާފައެވެ.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

ނުވަތަ ޓޯސްޓްތަކަށް އިތުރު ކޮންޓްރޯލްތަކާއި ކޮމްޕޯނެންޓްތައް ވެސް އިތުރުކުރެވިދާނެ އެވެ.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

ކުލަ ސްކީމްތައް

މަތީގައިވާ މިސާލުގެ މައްޗަށް ބިނާކޮށް، އަޅުގަނޑުމެންގެ ކުލައާއި ބެކްގްރައުންޑް ޔުޓިލިޓީސް އިން ތަފާތު ޓޯސްޓް ކުލަ ސްކީމްތައް އުފެއްދިދާނެއެވެ . މިތަނުގައި އަޅުގަނޑުމެން މިވަނީ , އަށް އިތުރުކޮށްފައި .text-bg-primary، .toastއަދި ދެން .btn-close-whiteއަޅުގަނޑުމެންގެ ކްލޯޒް ބަޓަންއަށް އިތުރުކޮށްފައެވެ. ކްރިސްޕް އެޖަކަށްޓަކައި، އަޅުގަނޑުމެން ޑިފޯލްޓް ބޯޑަރ ނައްތާލަނީ .border-0.

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

ޕްލޭސްމަންޓް

ބޭނުންވާ ގޮތަށް ކަސްޓަމް ސީއެސްއެސް އާއި އެކު ޓޯސްޓްތައް ބަހައްޓާށެވެ. މަތީ ކަނާތް ފަރާތް ގިނައިން ބޭނުން ކުރަނީ ނޮޓިފިކޭޝަންތަކަށް ކަމަށާއި، މަތީ މެދު ފަރާތް ވެސް ބޭނުން ކުރެއެވެ. ދުވަހަކުވެސް އެއްފަހަރާ އެއް ޓޯސްޓް ދައްކަން އުޅޭނަމަ، ޕޮޒިޝަނިންގ ސްޓައިލްތައް ރަނގަޅަށް ޖައްސާށެވެ .toast.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

އިތުރު ނޮޓިފިކޭޝަންތައް އުފައްދާ ސިސްޓަމްތަކަށް، ފަސޭހައިން ސްޓޭކް ކުރެވޭނެ ގޮތަށް ރެޕިންގ އެލިމެންޓެއް ބޭނުން ކުރުމަށް ވިސްނާށެވެ.

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

އަދި ޓޯސްޓްތައް ހޮރައިޒޮންޓަލީ އަދި/ނުވަތަ ވަރޓިކަލީ އެލައިން ކުރުމަށް ފްލެކްސްބޮކްސް ޔުޓިލިޓީސް އާއި އެކު ފެންސީ ލިބިދާނެ އެވެ.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

އެކްސެސިބިލިޓީ

ޓޯސްޓްތަކަކީ ތިބާގެ ޒިޔާރަތްކުރާ ފަރާތްތަކަށް ނުވަތަ ބޭނުންކުރާ ފަރާތްތަކަށް ކުދިކުދި މެދުކެނޑުމަކަށް ވާން ނިންމާފައިވާ އެއްޗަކަށް ވާތީ، ސްކްރީން ރީޑަރާއި މިފަދަ އެހީތެރި ޓެކްނޮލޮޖީތައް ހުރި މީހުންނަށް އެހީތެރިވުމަށްޓަކައި، ތިބާގެ ޓޯސްޓްތައް aria-liveސަރަހައްދެއްގައި އޮޅާލަން ޖެހެއެވެ . ލައިވް ރީޖަންތަކަށް އަންނަ ބަދަލުތައް (ޓޯސްޓް ކޮމްޕޮނެންޓެއް އިންޖެކްޓްކުރުން/އަޕްޑޭޓްކުރުން ފަދަ) ސްކްރީން ރީޑަރުން އޮޓޮމެޓިކުން އިއުލާންކުރަނީ ޔޫޒަރުގެ ފޯކަސް ބަދަލުކުރަން ނުޖެހި ނުވަތަ އެހެން ގޮތަކުން ޔޫޒަރަށް މެދުކެނޑުމެއް ނެތިއެވެ. މީގެ އިތުރުން، aria-atomic="true"ހަމައެކަނި ބަދަލު ކުރެވުނު އެއްޗެއް އިޢުލާން ކުރުމަށްވުރެ، މުޅި ޓޯސްޓް އަބަދުވެސް އެއް (އެޓޮމިކް) ޔުނިޓެއްގެ ގޮތުގައި އިޢުލާން ކުރެވޭކަން ކަށަވަރު ކުރުމަށް ހިމަނާށެވެ ފަހުގެ ހިސާބަކުން). ބޭނުންވާ މަޢުލޫމާތަކީ ޕްރޮސެސްއަށް މުހިންމު މަޢުލޫމާތެއްނަމަ، މިސާލަކަށް ފޯމެއްގައި ހުރި ގޯސްތަކުގެ ލިސްޓަކަށް، ދެން އެލާޓް ކޮމްޕޮނެންޓް ބޭނުންކުރާށެވެޓޯސްޓްގެ ބަދަލުގައި.

ޓޯސްޓް ޖެނެރޭޓް ކުރުމުގެ ނުވަތަ އަޕްޑޭޓް ކުރުމުގެ ކުރިން ލައިވް ރީޖަން މާކަޕްގައި ހުންނަން ޖެހޭކަން ފާހަގަކޮށްލެވެއެވެ . އެއްފަހަރާ ޑައިނަމިކް ގޮތެއްގައި މިދެކަންތައްވެސް ޖެނެރޭޓްކޮށް ޕޭޖަށް އިންޖެކްޓްކޮށްފިނަމަ، އާންމުކޮށް އެސިސްޓިވް ޓެކްނޮލޮޖީތަކުން އެކަންކަން އިއުލާން ނުކުރެވޭނެއެވެ.

އަދި ކޮންޓެންޓަށް ބަލާފައި roleއަދި ލެވެލް އެޑެޕްޓް ކުރަން ޖެހެއެވެ . aria-liveއެއީ އެރަރ ފަދަ މުހިންމު މެސެޖެއް ނަމަ، ބޭނުން ކުރާށެވެ role="alert" aria-live="assertive", އެހެން ނޫންނަމަ role="status" aria-live="polite"އެޓްރިބިއުޓްސް ބޭނުން ކުރާށެވެ.

ދައްކާ ކޮންޓެންޓަށް ބަދަލު އަންނަ ވަރަކަށް، ޓޯސްޓް ކިޔުމަށް އެކަށީގެންވާ ވަގުތު ލިބޭނެ ގޮތަށް delayޓައިމްއައުޓް އަޕްޑޭޓް ކުރުން ޔަގީން ކުރައްވާށެވެ.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

ޓޯސްޓް ބޭނުންކުރާއިރު autohide: falseޓޯސްޓް ޑިސްމިސް ކުރެވޭނެ ގޮތަށް ކްލޯޒް ބަޓަންއެއް އިތުރުކުރަން ޖެހެ އެވެ.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ޓެކްނިކަލީ ޓޯސްޓަށް ފޯކަސް ކުރެވޭ/އެކްޝަން ކުރެވޭ ކޮންޓްރޯލްތައް (އިތުރު ބަޓަން ނުވަތަ ލިންކް ފަދަ) އިތުރު ކުރެވިދާނެ ނަމަވެސް، އޮޓޯހައިޑިންގ ޓޯސްޓްތަކަށް މިކަން ކުރުމުން ދުރުހެލިވާން ޖެހެއެވެ. Even if you give the toast a long delaytimeout , ކީބޯޑް އަދި އެސިސްޓިވް ޓެކްނޮލޮޖީ ބޭނުންކުރާ ފަރާތްތަކަށް ފިޔަވަޅު އެޅުމަށް ވަގުތުން ޓޯސްޓާ ހަމައަށް ދިއުމަށް ދަތިވެދާނެ (ޓޯސްޓްތައް ދައްކާއިރު ފޯކަސް ނުލިބޭތީ). މުޅިންވެސް އިތުރު ކޮންޓްރޯލްތަކެއް ގެންގުޅެން ޖެހޭނަމަ، އަޅުގަނޑުމެން ލަފާދެނީ ޓޯސްޓެއް ބޭނުންކުރުމަށެވެ autohide: false.

ސީއެސްއެސް އެވެ

ވެރިއޭބަލްސް އެވެ

ބޫޓްސްޓްރެޕްގެ ތަރައްގީވަމުން އަންނަ ސީއެސްއެސް ވެރިއޭބަލްސް އެޕްރޯޗްގެ ބައެއްގެ ގޮތުގައި، ޓޯސްޓްތަކުގައި މިހާރު ބޭނުންކުރަނީ ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްސް އޮން .toastއިން ރިއަލް ޓައިމް ކަސްޓަމައިޒޭޝަން އިތުރުކުރުމަށެވެ. ސީއެސްއެސް ވެރިއޭބަލްތަކަށް ވެލިއުތައް ސެޓް ކުރެވެނީ ސާސް މެދުވެރިކޮށް ކަމުން ސާސް ކަސްޓަމައިޒޭޝަން އަދިވެސް ސަޕޯޓް ކުރެވެއެވެ.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
  

ސާސް ވެރިއޭބަލްސް އެވެ

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

ބޭނުން ކުރުން

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓޯސްޓްތައް އިނިޝިއަލައިޒް ކުރުން:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

ޓްރިގަރސް އެވެ

ޑިސްމިސަލް ކުރެވޭނީ ތިރީގައިވާ ގޮތަށް ޓޯސްޓްގެ ތެރޭގައިdata ހުންނަ ބަޓަނެއްގައި ހުންނަ އެޓްރިބިއުޓް އިންނެވެ :

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

ނުވަތަ ޓޯސްޓްގެ ބޭރުގައި ހުންނަ ބަޓަނެއްގައި data-bs-targetތިރީގައިވާ ގޮތަށް ބޭނުންކޮށްގެން :

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ފާސްކުރެވޭތީ data-bs-، ގައިވާ ފަދައިން އޮޕްޝަން ނަމެއް އަށް އިތުރުކުރެވިދާނެއެވެ data-bs-animation="{value}". ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް އޮޕްޝަންތައް ފާސްކުރާއިރު އޮޕްޝަން ނަމުގެ ކޭސް ޓައިޕް “ camelCase ” އިން “ kebab -case ” އަށް ބަދަލުކުރުން ޔަގީންކުރައްވާށެވެ. މިސާލަކަށް data-bs-custom-class="beautifier"ގެ ބަދަލުގައި ބޭނުން ކުރާށެވެ data-bs-customClass="beautifier".

ބޫޓްސްޓްރެޕް 5.2.0 އިން ފެށިގެން، ހުރިހާ ކޮމްޕޯނެންޓްތަކުންވެސް ޖޭއެސްއޯއެން ސްޓްރިންގއެއްގެ ގޮތުގައި ސާދާ ކޮމްޕޮނެންޓް ކޮންފިގްރޭޝަން ބެހެއްޓޭނެ އެކްސްޕެރިމެންޓަލް ރިޒާވްޑް ޑޭޓާ އެޓްރިބިއުޓަކަށް ސަޕޯޓްކުރެއެވެ. data-bs-configއެލިމެންޓެއްގައި data-bs-config='{"delay":0, "title":123}'އަދި data-bs-title="456"އެޓްރިބިއުޓްސް ހުންނައިރު، ފައިނަލް titleވެލިއު ވާނީ 456އަދި ވަކި ޑޭޓާ އެޓްރިބިއުޓްސް އިން ދީފައިވާ ވެލިއުތައް އޯވަރރައިޑް ވާނެއެވެ data-bs-config. މީގެ އިތުރުން މިހާރު ހުރި ޑޭޓާ އެޓްރިބިއުޓްތަކުގައި ޖޭއެސްއޯއެން ވެލިއުތައް ބެހެއްޓޭނެއެވެ data-bs-delay='{"show":0,"hide":150}'.

ގޮތްތައް

އިވެންޓްސް

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})