டோஸ்ட்ஸ்

ஒரு சிற்றுண்டி, இலகுரக மற்றும் எளிதில் தனிப்பயனாக்கக்கூடிய எச்சரிக்கை செய்தியுடன் உங்கள் பார்வையாளர்களுக்கு அறிவிப்புகளை அழுத்தவும்.

இந்தப் பக்கத்தில்

டோஸ்ட்கள் என்பது மொபைல் மற்றும் டெஸ்க்டாப் இயக்க முறைமைகளால் பிரபலப்படுத்தப்பட்ட புஷ் அறிவிப்புகளைப் பிரதிபலிக்கும் வகையில் வடிவமைக்கப்பட்ட இலகுரக அறிவிப்புகள் ஆகும். அவை ஃப்ளெக்ஸ்பாக்ஸுடன் கட்டமைக்கப்பட்டுள்ளன, எனவே அவை சீரமைக்க மற்றும் நிலைப்படுத்த எளிதானது.

கண்ணோட்டம்

டோஸ்ட் செருகுநிரலைப் பயன்படுத்தும் போது தெரிந்து கொள்ள வேண்டியவை:

செயல்திறன் காரணங்களுக்காக டோஸ்ட்கள் தேர்வு செய்யப்படுகின்றன, எனவே அவற்றை நீங்களே துவக்க வேண்டும் .
நீங்கள் குறிப்பிடவில்லை என்றால் டோஸ்ட்கள் தானாகவே மறைந்துவிடும் 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 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). இது இப்போது தேவையில்லை. இருப்பினும், பின்னோக்கி இணக்கத்தன்மைக்காக, அடுத்த பெரிய பதிப்பு வரை எங்கள் ஸ்கிரிப்ட் வகுப்பை (அதற்கான நடைமுறை தேவை இல்லாவிட்டாலும்) தொடர்ந்து மாற்றும்.

நேரடி உதாரணம்

முன்னிருப்பாக மறைக்கப்பட்ட ஒரு சிற்றுண்டியை (கீழ் வலது மூலையில் எங்கள் பயன்பாடுகளுடன் நிலைநிறுத்தப்பட்டுள்ளது) காட்ட கீழே உள்ள பொத்தானைக் கிளிக் செய்யவும்.

Hello, world! This is a toast message.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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>

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

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

ஒளிஊடுருவக்கூடியது

டோஸ்ட்கள் அவற்றின் கீழே உள்ளவற்றுடன் கலக்க சிறிது ஒளிஊடுருவக்கூடியவை.

வணக்கம், உலகம்! இது ஒரு சிற்றுண்டிச் செய்தி.

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

ஸ்டாக்கிங்

சிற்றுண்டி கொள்கலனில் போர்த்தி டோஸ்ட்களை அடுக்கி வைக்கலாம், இது செங்குத்தாக சில இடைவெளிகளைச் சேர்க்கும்.

பார்க்கவா? இதே போல.

எச்சரிக்கை, டோஸ்ட்கள் தானாக அடுக்கி வைக்கப்படும்

<div class="toast-container">
  <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 ஐகான்களிலிருந்து தனிப்பயன் மறை ஐகானைச் சேர்ப்பதன் மூலமும் , தளவமைப்பைச் சரிசெய்ய சில ஃப்ளெக்ஸ்பாக்ஸ் பயன்பாடுகளைப் பயன்படுத்துவதன் மூலமும் இங்கே எளிமையான சிற்றுண்டியை உருவாக்கியுள்ளோம் .

வணக்கம், உலகம்! இது ஒரு சிற்றுண்டிச் செய்தி.

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

மாற்றாக, நீங்கள் டோஸ்ட்களில் கூடுதல் கட்டுப்பாடுகள் மற்றும் கூறுகளைச் சேர்க்கலாம்.

வணக்கம், உலகம்! இது ஒரு சிற்றுண்டிச் செய்தி.

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

வண்ண திட்டங்கள்

மேலே உள்ள எடுத்துக்காட்டைக் கொண்டு, எங்கள் வண்ணம் மற்றும் பின்னணி பயன்பாடுகளுடன் வெவ்வேறு டோஸ்ட் வண்ணத் திட்டங்களை உருவாக்கலாம். இங்கே நாம் சேர்த்துள்ளோம் .bg-primaryமற்றும் .text-whiteக்கு, .toastபின்னர் .btn-close-whiteஎங்கள் மூடு பட்டனில் சேர்த்துள்ளோம். மிருதுவான விளிம்பிற்கு, உடன் இயல்புநிலை எல்லையை அகற்றுவோம் .border-0.

வணக்கம், உலகம்! இது ஒரு சிற்றுண்டிச் செய்தி.

<div class="toast align-items-center text-white 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.

வணக்கம், உலகம்! இது ஒரு சிற்றுண்டிச் செய்தி.

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

அதிக அறிவிப்புகளை உருவாக்கும் அமைப்புகளுக்கு, ரேப்பிங் உறுப்பைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள், அதனால் அவை எளிதாக அடுக்கி வைக்க முடியும்.

பார்க்கவா? இதே போல.

எச்சரிக்கை, டோஸ்ட்கள் தானாக அடுக்கி வைக்கப்படும்

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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>

டோஸ்ட்களை கிடைமட்டமாக மற்றும்/அல்லது செங்குத்தாக சீரமைக்க, ஃப்ளெக்ஸ்பாக்ஸ் பயன்பாடுகள் மூலம் நீங்கள் ஆடம்பரத்தைப் பெறலாம்.

வணக்கம், உலகம்! இது ஒரு சிற்றுண்டிச் செய்தி.

<!-- 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, டோஸ்டை நிராகரிக்க பயனர்களை அனுமதிக்க, மூடும் பொத்தானைச் சேர்க்க வேண்டும்.

வணக்கம், உலகம்! இது ஒரு சிற்றுண்டிச் செய்தி.

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

சாஸ்

மாறிகள்

$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:                1px;
$toast-border-color:                rgba($black, .1);
$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);

பயன்பாடு

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

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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>

விருப்பங்கள்

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-animation="".

Name	Type	Default	Description
`animation`	boolean	`true`	Apply a CSS fade transition to the toast
`autohide`	boolean	`true`	Auto hide the toast
`delay`	number	`5000`	Delay hiding the toast (ms)

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

show

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

toast.show()

hide

Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.

toast.hide()

dispose

Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

toast.dispose()

getInstance

Static method which allows you to get the toast instance associated with a DOM element

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Static method which allows you to get the toast instance associated with a DOM element, or create a new one in case it wasn’t initialized

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Events

Event type	Description
`show.bs.toast`	This event fires immediately when the `show` instance method is called.
`shown.bs.toast`	This event is fired when the toast has been made visible to the user.
`hide.bs.toast`	This event is fired immediately when the `hide` instance method has been called.
`hidden.bs.toast`	This event is fired when the toast has finished being hidden from the user.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})