Source

ടോസ്റ്റുകൾ

ഒരു ടോസ്റ്റ്, ഭാരം കുറഞ്ഞതും എളുപ്പത്തിൽ ഇഷ്‌ടാനുസൃതമാക്കാവുന്നതുമായ അലേർട്ട് സന്ദേശം എന്നിവ ഉപയോഗിച്ച് നിങ്ങളുടെ സന്ദർശകർക്ക് അറിയിപ്പുകൾ നൽകുക.

മൊബൈൽ, ഡെസ്‌ക്‌ടോപ്പ് ഓപ്പറേറ്റിംഗ് സിസ്റ്റങ്ങൾ ജനപ്രിയമാക്കിയ പുഷ് അറിയിപ്പുകളെ അനുകരിക്കാൻ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്ന ഭാരം കുറഞ്ഞ അറിയിപ്പുകളാണ് ടോസ്റ്റുകൾ. അവ ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, അതിനാൽ അവ വിന്യസിക്കാനും സ്ഥാനപ്പെടുത്താനും എളുപ്പമാണ്.

അവലോകനം

ടോസ്റ്റ് പ്ലഗിൻ ഉപയോഗിക്കുമ്പോൾ അറിഞ്ഞിരിക്കേണ്ട കാര്യങ്ങൾ:

  • ഉറവിടത്തിൽ നിന്നാണ് നിങ്ങൾ ഞങ്ങളുടെ JavaScript നിർമ്മിക്കുന്നതെങ്കിൽ, അത് ആവശ്യമാണ്util.js .
  • പ്രകടന കാരണങ്ങളാൽ ടോസ്റ്റുകൾ ഓപ്റ്റ്-ഇൻ ആണ്, അതിനാൽ നിങ്ങൾ അവ സ്വയം ആരംഭിക്കണം .
  • ടോസ്റ്റുകൾ സ്ഥാപിക്കുന്നതിനുള്ള ഉത്തരവാദിത്തം നിങ്ങളുടേതാണെന്ന കാര്യം ശ്രദ്ധിക്കുക.
  • നിങ്ങൾ വ്യക്തമാക്കിയില്ലെങ്കിൽ ടോസ്റ്റുകൾ സ്വയമേവ മറയ്ക്കും autohide: false.

ഈ ഘടകത്തിന്റെ ആനിമേഷൻ പ്രഭാവം prefers-reduced-motionമീഡിയ അന്വേഷണത്തെ ആശ്രയിച്ചിരിക്കുന്നു. ഞങ്ങളുടെ പ്രവേശനക്ഷമത ഡോക്യുമെന്റേഷന്റെ കുറച്ച ചലന വിഭാഗം കാണുക .

ഉദാഹരണങ്ങൾ

അടിസ്ഥാനം

വിപുലീകരിക്കാവുന്നതും പ്രവചിക്കാവുന്നതുമായ ടോസ്റ്റുകൾ പ്രോത്സാഹിപ്പിക്കുന്നതിന്, ഒരു തലക്കെട്ടും ബോഡിയും ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു. ടോസ്റ്റ് ഹെഡറുകൾ ഉപയോഗിക്കുന്നത് display: flex, ഞങ്ങളുടെ മാർജിൻ, ഫ്ലെക്സ്ബോക്സ് യൂട്ടിലിറ്റികൾക്ക് നന്ദി, ഉള്ളടക്കം എളുപ്പത്തിൽ ക്രമീകരിക്കാൻ അനുവദിക്കുന്നു.

ടോസ്റ്റുകൾ നിങ്ങൾക്ക് ആവശ്യമുള്ളത്ര അയവുള്ളതും ആവശ്യമായ മാർക്ക്അപ്പ് വളരെ കുറവാണ്. ചുരുങ്ങിയത്, നിങ്ങളുടെ "വറുത്ത" ഉള്ളടക്കം അടങ്ങിയിരിക്കുന്നതിനും ഡിസ്മിസ് ബട്ടൺ ശക്തമായി പ്രോത്സാഹിപ്പിക്കുന്നതിനും ഞങ്ങൾക്ക് ഒരൊറ്റ ഘടകം ആവശ്യമാണ്.

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

ബൂട്ട്സ്ട്രാപ്പ് 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 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=""

പേര് ടൈപ്പ് ചെയ്യുക സ്ഥിരസ്ഥിതി വിവരണം
ആനിമേഷൻ ബൂളിയൻ സത്യം ടോസ്റ്റിലേക്ക് ഒരു CSS ഫേഡ് ട്രാൻസിഷൻ പ്രയോഗിക്കുക
യാന്ത്രികമായി മറയ്ക്കുക ബൂളിയൻ സത്യം ടോസ്റ്റ് സ്വയമേവ മറയ്ക്കുക
കാലതാമസം നമ്പർ 500 ടോസ്റ്റ് മറയ്ക്കാൻ വൈകുക (മിസെ)

രീതികൾ

അസിൻക്രണസ് രീതികളും പരിവർത്തനങ്ങളും

എല്ലാ 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...
})