പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്സ് നാവിഗേഷനിലേക്ക് പോകുക
Check
in English

ടോസ്റ്റുകൾ

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

ഈ പേജിൽ

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

അവലോകനം

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

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

ഉദാഹരണങ്ങൾ

അടിസ്ഥാനം

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

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

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). ഇത് ഇപ്പോൾ ആവശ്യമില്ല. എന്നിരുന്നാലും, ബാക്ക്‌വേർഡ് കോംപാറ്റിബിളിറ്റിക്കായി, അടുത്ത പ്രധാന പതിപ്പ് വരെ ഞങ്ങളുടെ സ്‌ക്രിപ്റ്റ് ക്ലാസ് ടോഗിൾ ചെയ്യുന്നത് തുടരും (പ്രായോഗികമായ ആവശ്യമില്ലെങ്കിലും).

തത്സമയ ഉദാഹരണം

സ്ഥിരസ്ഥിതിയായി മറച്ചിരിക്കുന്ന ഒരു ടോസ്റ്റ് (താഴെ വലത് കോണിൽ ഞങ്ങളുടെ യൂട്ടിലിറ്റികൾക്കൊപ്പം സ്ഥാനം പിടിച്ചിരിക്കുന്നു) കാണിക്കാൻ ചുവടെയുള്ള ബട്ടൺ ക്ലിക്കുചെയ്യുക.

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

ഞങ്ങളുടെ ലൈവ് ടോസ്റ്റ് ഡെമോ പ്രവർത്തനക്ഷമമാക്കാൻ ഞങ്ങൾ ഇനിപ്പറയുന്ന JavaScript ഉപയോഗിക്കുന്നു:

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>

ഇഷ്ടാനുസൃത ഉള്ളടക്കം

ഉപഘടകങ്ങൾ നീക്കം ചെയ്‌ത്, യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് അവയെ ട്വീക്ക് ചെയ്‌ത് അല്ലെങ്കിൽ നിങ്ങളുടെ സ്വന്തം മാർക്ക്അപ്പ് ചേർത്തുകൊണ്ട് നിങ്ങളുടെ ടോസ്റ്റുകൾ ഇഷ്‌ടാനുസൃതമാക്കുക. സ്ഥിരസ്ഥിതി നീക്കം ചെയ്തും ബൂട്ട്‌സ്‌ട്രാപ്പ് ഐക്കണുകളിൽ.toast-header നിന്ന് ഒരു ഇഷ്‌ടാനുസൃത മറയ്‌ക്കൽ ഐക്കൺ ചേർത്തും ലേഔട്ട് ക്രമീകരിക്കുന്നതിന് ചില ഫ്ലെക്‌സ്‌ബോക്‌സ് യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ചും ഞങ്ങൾ ഇവിടെ ലളിതമായ ഒരു ടോസ്റ്റ് സൃഷ്‌ടിച്ചു .

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.

ബൂട്ട്സ്ട്രാപ്പ് 11 മിനിറ്റ് മുമ്പ്
ഹലോ വേൾഡ്! ഇതൊരു ടോസ്റ്റ് സന്ദേശമാണ്.
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>

ടോസ്റ്റുകളെ തിരശ്ചീനമായും/അല്ലെങ്കിൽ ലംബമായും വിന്യസിക്കാൻ ഫ്ലെക്സ്ബോക്സ് യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഫാൻസി നേടാനും കഴിയും.

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.

സി.എസ്.എസ്

വേരിയബിളുകൾ

v5.2.0 ൽ ചേർത്തു

.toastബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വികസിച്ചുകൊണ്ടിരിക്കുന്ന CSS വേരിയബിൾ സമീപനത്തിന്റെ ഭാഗമായി, മെച്ചപ്പെടുത്തിയ തത്സമയ കസ്റ്റമൈസേഷനായി ടോസ്റ്റുകൾ ഇപ്പോൾ പ്രാദേശിക 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};

സാസ് വേരിയബിളുകൾ

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

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ JavaScript വഴി ഓപ്‌ഷനുകൾ കൈമാറാൻ കഴിയുന്നതിനാൽ, എന്നതിലെന്നപോലെ നിങ്ങൾക്ക് ഒരു ഓപ്‌ഷൻ നാമം data-bs-ചേർക്കാം data-bs-animation="{value}". ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി ഓപ്‌ഷനുകൾ കൈമാറുമ്പോൾ, ഓപ്‌ഷൻ പേരിന്റെ കേസ് തരം “ഒട്ടകം” എന്നതിൽ നിന്ന് “കബാബ്-കേസ്” ആയി മാറ്റുന്നത് ഉറപ്പാക്കുക . ഉദാഹരണത്തിന്, data-bs-custom-class="beautifier"പകരം ഉപയോഗിക്കുക data-bs-customClass="beautifier".

ബൂട്ട്‌സ്‌ട്രാപ്പ് 5.2.0 പോലെ, എല്ലാ ഘടകങ്ങളും ഒരു പരീക്ഷണാത്മക റിസർവ് ചെയ്‌ത ഡാറ്റ ആട്രിബ്യൂട്ടിനെ പിന്തുണയ്‌ക്കുന്നു data-bs-config, അത് ഒരു JSON സ്ട്രിംഗായി ലളിതമായ ഘടക കോൺഫിഗറേഷനെ ഉൾക്കൊള്ളാൻ കഴിയും. ഒരു മൂലകവും ആട്രിബ്യൂട്ടുകളും ഉള്ളപ്പോൾ 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)ഒരു ബൂട്ട്സ്ട്രാപ്പ് ടോസ്റ്റ് ഉദാഹരണം നൽകുന്നു.
getOrCreateInstance ഒരു DOM എലമെന്റുമായി ബന്ധപ്പെടുത്തിയിരിക്കുന്ന ടോസ്റ്റ് ഇൻസ്‌റ്റൻസ് ലഭിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന സ്റ്റാറ്റിക് രീതി, അല്ലെങ്കിൽ അത് ആരംഭിച്ചിട്ടില്ലെങ്കിൽ പുതിയൊരെണ്ണം സൃഷ്‌ടിക്കുക.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)ഒരു ബൂട്ട്‌സ്‌ട്രാപ്പ് ടോസ്റ്റ് ഉദാഹരണം നൽകുന്നു.
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...
})