முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
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>

எங்கள் நேரடி டோஸ்ட் டெமோவைத் தூண்டுவதற்கு பின்வரும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்துகிறோம்:

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.

CSS

மாறிகள்

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

பயன்பாடு

ஜாவாஸ்கிரிப்ட் வழியாக டோஸ்ட்களை துவக்கவும்:

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}". தரவு பண்புக்கூறுகள் வழியாக விருப்பங்களை அனுப்பும் போது, ​​" camelCase " என்பதிலிருந்து " kebab-case " என்ற விருப்பப் பெயரின் கேஸ் வகையை மாற்றுவதை உறுதிசெய்யவும் . எடுத்துக்காட்டாக, க்கு 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 முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .

மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .

முறை விளக்கம்
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...
})