ටෝස්ට්

සව්දිය, සැහැල්ලු සහ පහසුවෙන් අභිරුචිකරණය කළ හැකි අනතුරු ඇඟවීමේ පණිවිඩයක් සමඟින් ඔබේ අමුත්තන්ට දැනුම්දීම් තල්ලු කරන්න.

මෙම පිටුවේ

ටෝස්ට් යනු ජංගම සහ ඩෙස්ක්ටොප් මෙහෙයුම් පද්ධති මගින් ජනප්‍රිය කර ඇති තල්ලු දැනුම්දීම් අනුකරණය කිරීමට නිර්මාණය කර ඇති සැහැල්ලු දැනුම්දීම් වේ. ඒවා flexbox සමඟ ගොඩනගා ඇත, එබැවින් ඒවා පෙළගැස්වීමට සහ ස්ථානගත කිරීමට පහසුය.

දළ විශ්ලේෂණය

ටෝස්ට් ප්ලගිනය භාවිතා කරන විට දැනගත යුතු දේ:

කාර්ය සාධන හේතූන් මත ටෝස්ට් තෝරාගෙන ඇත, එබැවින් ඔබ විසින්ම ඒවා ආරම්භ කළ යුතුය .
ඔබ සඳහන් නොකරන්නේ නම් ටෝස්ට් ස්වයංක්‍රීයව සැඟවෙනු ඇත autohide: false.

මෙම සංරචකයේ සජීවිකරණ බලපෑම prefers-reduced-motionමාධ්‍ය විමසුම මත රඳා පවතී. අපගේ ප්‍රවේශ්‍යතා ලේඛනවල අඩු කළ චලන කොටස බලන්න .

උදාහරණ

මූලික

දිගු කළ හැකි සහ පුරෝකථනය කළ හැකි ටෝස්ට් දිරිමත් කිරීම සඳහා, අපි ශීර්ෂයක් සහ ශරීරයක් නිර්දේශ කරමු. ටෝස්ට් ශීර්ෂ භාවිතා කරයි display: flex, අපගේ ආන්තික සහ flexbox උපයෝගිතා වලට ස්තූතිවන්ත වන පරිදි අන්තර්ගතය පහසුවෙන් පෙළගැස්වීමට ඉඩ සලසයි.

ටෝස්ට් ඔබට අවශ්‍ය තරම් නම්‍යශීලී වන අතර අවශ්‍ය සලකුණු කිරීම ඉතා අඩුය. අවම වශයෙන්, අපට ඔබේ “ටෝස්ට් කළ” අන්තර්ගතය අඩංගු කිරීමට සහ ඉවතලන බොත්තමක් දැඩි ලෙස දිරිමත් කිරීමට තනි මූලද්‍රව්‍යයක් අවශ්‍ය වේ.

හෙලෝ වර්ල්ඩ්! මෙය ටෝස්ට් පණිවිඩයකි.

html

<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>

මින් පෙර, අපගේ ස්ක්‍රිප්ට් .hideමගින් සව්දිය සම්පූර්ණයෙන්ම සැඟවීමට පන්තිය ගතිකව එක් කරන ලදී (සමග display:none, සමඟ පමණක් නොව opacity:0). මෙය දැන් තවදුරටත් අවශ්ය නොවේ. කෙසේ වෙතත්, පසුගාමී ගැළපුම සඳහා, අපගේ ස්ක්‍රිප්ට් ඊළඟ ප්‍රධාන අනුවාදය තෙක් පන්තිය (ඒ සඳහා ප්‍රායෝගික අවශ්‍යතාවයක් නොමැති වුවද) ටොගල් කිරීම දිගටම කරගෙන යනු ඇත.

සජීවී උදාහරණය

පෙරනිමියෙන් සඟවා ඇති ටෝස්ට් (පහළ දකුණු කෙළවරේ අපගේ උපයෝගිතා සමඟ ස්ථානගත කර ඇත) පෙන්වීමට පහත බොත්තම ක්ලික් කරන්න.

Hello, world! This is a toast message.

<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()
  })
}

විනිවිද පෙනෙන

ටෝස්ට් ඒවාට පහළින් ඇති දේ සමඟ මිශ්‍ර වීමට තරමක් පාරභාසක වේ.

හෙලෝ වර්ල්ඩ්! මෙය ටෝස්ට් පණිවිඩයකි.

html

<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>

ගොඩගැසීම

ටෝස්ට් කන්ටේනරයක ඔතා ඔබට ටෝස්ට් ගොඩගසා ගත හැකිය, එමඟින් සිරස් අතට යම් පරතරයක් එක් කරයි.

බලන්න? මේ වගේ.

හිස ඔසවන්න, ටෝස්ට් ස්වයංක්‍රීයව ගොඩගැසෙනු ඇත

html

<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>

අභිරුචි අන්තර්ගතය

උප සංරචක ඉවත් කිරීමෙන්, උපයෝගිතා සමඟ ඒවා වෙනස් කිරීමෙන් හෝ ඔබේම සලකුණු එකතු කිරීමෙන් ඔබේ ටෝස්ට් අභිරුචිකරණය කරන්න. මෙන්න අපි පෙරනිමිය ඉවත් කිරීමෙන් , Bootstrap Icons.toast-header වෙතින් අභිරුචි සඟවන්න නිරූපකයක් එක් කිරීමෙන් සහ පිරිසැලසුම සකස් කිරීමට flexbox උපයෝගිතා කිහිපයක් භාවිතා කිරීමෙන් වඩාත් සරල ටෝස්ට් එකක් සාදා ඇත.

හෙලෝ වර්ල්ඩ්! මෙය ටෝස්ට් පණිවිඩයකි.

html

<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>

විකල්පයක් ලෙස, ඔබට ටෝස්ට් සඳහා අමතර පාලන සහ සංරචක එකතු කළ හැකිය.

හෙලෝ වර්ල්ඩ්! මෙය ටෝස්ට් පණිවිඩයකි.

html

<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.

හෙලෝ වර්ල්ඩ්! මෙය ටෝස්ට් පණිවිඩයකි.

html

<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>

ස්ථානගත කිරීම

ඔබට අවශ්‍ය පරිදි අභිරුචි CSS සමඟ ටෝස්ට් තබන්න. ඉහළ මැද මෙන් ඉහළ දකුණ බොහෝ විට දැනුම්දීම් සඳහා භාවිතා වේ. ඔබ කවදා හෝ වරකට එක් ටෝස්ට් එකක් පමණක් පෙන්වීමට යන්නේ නම්, ස්ථානගත කිරීමේ විලාසයන් නිවැරදිව තබන්න .toast.

හෙලෝ වර්ල්ඩ්! මෙය ටෝස්ට් පණිවිඩයකි.

html

<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>

වැඩි දැනුම්දීම් ජනනය කරන පද්ධති සඳහා, පහසුවෙන් ගොඩගැසීමට හැකි වන පරිදි එතීමේ මූලද්‍රව්‍යයක් භාවිතා කිරීම සලකා බලන්න.

බලන්න? මේ වගේ.

හිස ඔසවන්න, ටෝස්ට් ස්වයංක්‍රීයව ගොඩගැසෙනු ඇත

html

<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 උපයෝගිතා සමඟින් ඔබට අලංකාරයක් ලබා ගත හැක.

හෙලෝ වර්ල්ඩ්! මෙය ටෝස්ට් පණිවිඩයකි.

html

<!-- 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, ටෝස්ට් ඉවත දැමීමට පරිශීලකයින්ට ඉඩ දීම සඳහා ඔබ වසන්න බොත්තමක් එක් කළ යුතුය.

හෙලෝ වර්ල්ඩ්! මෙය ටෝස්ට් පණිවිඩයකි.

html

<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>

තාක්ෂණික වශයෙන් ඔබේ ටෝස්ට් තුළ නාභිගත කළ හැකි/ක්‍රියා කළ හැකි පාලන (අමතර බොත්තම් හෝ සබැඳි වැනි) එක් කිරීමට හැකි වුවද, ඔබ ටෝස්ට් ස්වයංක්‍රීයව සැඟවීම සඳහා මෙය කිරීමෙන් වැළකී සිටිය යුතුය. ඔබ ටෝස්ට් එකට දිගු කාලයක් ලබා දුන්නද delay, යතුරුපුවරුව සහ සහායක තාක්‍ෂණය භාවිතා කරන්නන්ට ක්‍රියාමාර්ග ගැනීමට නියමිත වේලාවට ටෝස්ට් වෙත ළඟා වීමට අපහසු විය හැකිය (ටෝස්ට් ප්‍රදර්ශනය කරන විට අවධානය යොමු නොකරන බැවින්). ඔබට තව දුරටත් පාලනයන් තිබිය යුතු නම්, අපි ටෝස්ට් එකක් භාවිතා කිරීම නිර්දේශ කරමු autohide: false.

CSS

විචල්යයන්

v5.2.0 හි එකතු කරන ලදී

Bootstrap හි විකාශනය වන CSS විචල්‍ය ප්‍රවේශයේ කොටසක් ලෙස, ටෝස්ට් දැන් .toastවැඩිදියුණු කළ තත්‍ය කාලීන අභිරුචිකරණය සඳහා දේශීය CSS විචල්‍යයන් භාවිතා කරයි. CSS විචල්‍යයන් සඳහා අගයන් Sass හරහා සකසා ඇත, එබැවින් Sass අභිරුචිකරණයට තවමත් සහය දක්වයි.

  --#{$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};

Sass විචල්යයන්

$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);

භාවිතය

JavaScript හරහා ටෝස්ට් ආරම්භ කරන්න:

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}". දත්ත ගුණාංග හරහා විකල්ප සම්මත කිරීමේදී විකල්ප නාමයේ කේස් වර්ගය “ කැමල්කේස් ” සිට “ කෙබාබ්-කේස් ” ලෙස වෙනස් කිරීමට වග බලා ගන්න. උදාහරණයක් ලෙස, data-bs-custom-class="beautifier"වෙනුවට භාවිතා කරන්න data-bs-customClass="beautifier".

Bootstrap 5.2.0 වන විට, සියලුම සංරචක JSON තන්තුවක් ලෙස සරල සංරචක වින්‍යාසගත කළ හැකි පර්යේෂණාත්මක වෙන් කළ දත්ත ගුණාංගයකට සහාය දක්වයි. data-bs-configමූලද්‍රව්‍යයක් සතුව data-bs-config='{"delay":0, "title":123}'සහ data-bs-title="456"උපලක්ෂණ ඇති විට, අවසාන titleඅගය වනු ඇති 456අතර වෙනම දත්ත උපලක්ෂණ මගින් ලබා දී ඇති අගයන් අභිබවා යයි data-bs-config. මීට අමතරව, පවතින දත්ත උපලක්ෂණ වලට JSON වැනි අගයන් ස්ථානගත කිරීමට හැකි වේ data-bs-delay='{"show":0,"hide":150}'.

නම	ටයිප් කරන්න	පෙරනිමිය	විස්තර
`animation`	බූලියන්	`true`	ටෝස්ට් එකට CSS ෆේඩ් සංක්‍රාන්තියක් යොදන්න.
`autohide`	බූලියන්	`true`	ප්‍රමාදයෙන් පසු ටෝස්ට් ස්වයංක්‍රීයව සඟවන්න.
`delay`	අංකය	`5000`	ටෝස්ට් සැඟවීමට පෙර මිලි තත්පර ප්‍රමාද කරන්න.

ක්රම

අසමමුහුර්ත ක්රම සහ සංක්රාන්ති

සියලුම API ක්‍රම අසමමුහුර්ත වන අතර සංක්‍රාන්තියක් ආරම්භ කරන්න . සංක්‍රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්‍රාන්ති සංරචකයක ක්‍රම ඇමතුමක් නොසලකා හරිනු ඇත .

වැඩි විස්තර සඳහා අපගේ JavaScript ලේඛන බලන්න .

ක්රමය	විස්තර
`dispose`	මූලද්රව්යයක ටෝස්ට් සඟවයි. ඔබේ සව්දිය DOM මත පවතිනු ඇති නමුත් තවදුරටත් නොපෙන්වයි.
`getInstance`	DOM මූලද්‍රව්‍යයක් හා සම්බන්ධ ටෝස්ට් අවස්ථාව ලබා ගැනීමට ඔබට ඉඩ සලසන ස්ථිතික ක්‍රමය. උදාහරණයක් ලෙස: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Bootstrap toast අවස්ථාවක් ලබා දෙයි.
`getOrCreateInstance`	ස්ථිතික ක්‍රමය DOM මූලද්‍රව්‍යයක් සමඟ සම්බන්ධිත ටෝස්ට් අවස්ථාව ලබා ගැනීමට හෝ එය ආරම්භ නොකළහොත් නව එකක් සෑදීමට ඉඩ සලසයි. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Bootstrap toast අවස්ථාවක් ලබා දෙයි.
`hide`	මූලද්රව්යයක ටෝස්ට් සඟවයි. සව්දිය සඟවා තැබීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. `hidden.bs.toast`ඔබ කළේ නම් මෙම ක්‍රමය අතින් ඇමතීමට `autohide`සිදුවේ `false`.
`isShown`	ටෝස්ට්ගේ දෘශ්‍යතා තත්ත්වය අනුව බූලියන් එකක් ආපසු ලබා දෙයි.
`show`	මූලද්රව්යයක සව්දිය හෙළි කරයි. ටෝස්ට් එක ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. `shown.bs.toast`ඔබට මෙම ක්‍රමය අතින් ඇමතීමට සිදුවේ, ඒ වෙනුවට ඔබේ සව්දිය නොපෙන්වයි.

සිදුවීම්

සිදුවීම	විස්තර
`hide.bs.toast`	`hide`නිදසුන් ක්‍රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
`hidden.bs.toast`	ටෝස්ට් එක පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ.
`show.bs.toast`	`show`නිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
`shown.bs.toast`	ටෝස්ට් පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ.

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