in English

ටෝස්ට්

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

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

දළ විශ්ලේෂණය

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

  • ඔබ අපගේ ජාවාස්ක්‍රිප්ට් නිර්මාණය කරන්නේ මූලාශ්‍රයෙන් නම්, එයට අවශ්‍ය වේutil.js .
  • කාර්ය සාධන හේතූන් මත ටෝස්ට් තෝරාගෙන ඇත, එබැවින් ඔබ විසින්ම ඒවා ආරම්භ කළ යුතුය .
  • ටෝස්ට් ස්ථානගත කිරීම සඳහා ඔබ වගකිව යුතු බව කරුණාවෙන් සලකන්න.
  • ඔබ සඳහන් නොකරන්නේ නම් ටෝස්ට් ස්වයංක්‍රීයව සැඟවෙනු ඇත autohide: false.
මෙම සංරචකයේ සජීවිකරණ බලපෑම prefers-reduced-motionමාධ්‍ය විමසුම මත රඳා පවතී. අපගේ ප්‍රවේශ්‍යතා ලේඛනවල අඩු කළ චලන කොටස බලන්න .

උදාහරණ

මූලික

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

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

සජීවි

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

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

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

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

ගොඩගැසීම

ඔබට ටෝස්ට් කිහිපයක් ඇති විට, අපි ඒවා කියවිය හැකි ආකාරයෙන් සිරස් අතට ගොඩගැසීමට පෙරනිමි කරමු.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

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

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

Bootstrap මිනිත්තු 11කට පෙර
හෙලෝ වර්ල්ඩ්! මෙය ටෝස්ට් පණිවිඩයකි. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

ටෝස්ට් තිරස් අතට සහ/හෝ සිරස් අතට පෙළගස්වා ගැනීමට flexbox උපයෝගිතා සමඟින් ඔබට අලංකාරයක් ලබා ගත හැක.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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-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-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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

JavaScript හැසිරීම

භාවිතය

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

$('.toast').toast(option)

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-animation="".

නම ටයිප් කරන්න පෙරනිමිය විස්තර
සජීවිකරණය බූලියන් සැබෑ ටෝස්ට් එකට CSS ෆේඩ් සංක්‍රාන්තියක් යොදන්න
autohide බූලියන් සැබෑ ටෝස්ට් එක ස්වයංක්‍රීයව සඟවන්න
ප්රමාදය අංකය 500 සව්දිය සැඟවීම ප්‍රමාද කරන්න (ms)

ක්රම

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

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

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

$().toast(options)

මූලද්රව්ය එකතුවකට ටෝස්ට් හසුරුවන්නක් අමුණන්න.

.toast('show')

මූලද්රව්යයක සව්දිය හෙළි කරයි. ටෝස්ට් එක ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. shown.bs.toastඔබට මෙම ක්‍රමය අතින් ඇමතීමට සිදුවේ, ඒ වෙනුවට ඔබේ සව්දිය නොපෙන්වයි.

$('#element').toast('show')

.toast('hide')

මූලද්රව්යයක ටෝස්ට් සඟවයි. සව්දිය සඟවා තැබීමට පෙර (එනම් සිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. hidden.bs.toastඔබ කළේ නම් මෙම ක්‍රමය අතින් ඇමතීමට autohideසිදුවේ false.

$('#element').toast('hide')

.toast('dispose')

මූලද්රව්යයක ටෝස්ට් සඟවයි. ඔබේ සව්දිය DOM මත පවතිනු ඇති නමුත් තවදුරටත් නොපෙන්වයි.

$('#element').toast('dispose')

සිදුවීම්

සිදුවීම් වර්ගය විස්තර
show.bs.toast showනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
පෙන්වා ඇත.bs.ටෝස්ට් ටෝස්ට් පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ.
hide.bs.toast hideනිදසුන් ක්‍රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
සැඟවුණු.bs.ටෝස්ට් ටෝස්ට් එක පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})