ටෝස්ට්

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

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

දළ විශ්ලේෂණය

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

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

උදාහරණ

මූලික

දිගු කළ හැකි සහ පුරෝකථනය කළ හැකි ටෝස්ට් දිරිමත් කිරීම සඳහා, අපි ශීර්ෂයක් සහ ශරීරයක් නිර්දේශ කරමු. ටෝස්ට් ශීර්ෂ භාවිතා කරයි 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>

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

ටෝස්ට් තරමක් පාරදෘශ්‍ය වේ, එබැවින් ඒවා පෙනෙන ඕනෑම දෙයක් සමඟ මිශ්‍ර වේ. CSS ගුණාංගයට සහය දක්වන බ්‍රව්සර් සඳහා backdrop-filter, අපි ටෝස්ට් එකක් යටතේ ඇති මූලද්‍රව්‍ය බොඳ කිරීමට ද උත්සාහ කරන්නෙමු.

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

<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="min-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>

JavaScript හැසිරීම

භාවිතය

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

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

විකල්ප

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

ක්රම

$().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')

සිදුවීම්

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})