بوت اسپرینگ 5 تاسٹ

Toast（ਟੋਸਟ）

Toast ਕੰਪੋਨੈਂਟ ਨੋਟੀਫਿਕੇਸ਼ਨ ਬਾਰੇ ਹੈ, ਜਦੋਂ ਕੁਝ ਚੀਜ਼ਾਂ ਹੁੰਦੀਆਂ ਹਨ (ਉਦਾਹਰਨ ਵਜੋਂ ਜਦੋਂ ਯੂਜ਼ਰ ਬਟਨ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਫਾਰਮ ਭੇਜਦਾ ਹੈ ਆਦਿ) ਉਹ ਸਿਰਫ ਕੁਝ ਸਕਿੰਟਾਂ ਲਈ ਦਿਖਾਈ ਦੇਵੇਗਾ。

ਕਿਵੇਂ Toast ਬਣਾਓ

ਜੇਕਰ ਤੁਸੀਂ Toast ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ .toast ਵਰਗਾਂ ਵਿੱਚ .toast-header ਅਤੇ .toast-body。

ਧਿਆਨ:ਮੂਲਤਬੀ ਤੌਰ 'ਤੇ, toast ਛੁਪਾਇਆ ਹੋਇਆ ਹੈ। ਜੇਕਰ ਉਸ ਨੂੰ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ .show ਵਰਗ। ਜੇਕਰ ਉਸ ਨੂੰ ਬੰਦ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ <button> ਇਲੈਕਟ੍ਰੋਨ ਵਰਤੋਂ ਕਰੋ ਅਤੇ data-bs-dismiss="toast"ਜਿਹਨਾਂ

<div class="toast show">
  <div class="toast-header">
    ਟੋਸਟ ਸਿਰਲੇਖ
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    ਟੋਸਟ ਮੁੱਖ ਵਿੱਚ ਟੈਕਸਟ
  </div>
</div>

ਆਪਣੇ ਆਪ ਨਾਲ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਟੋਸਟ ਖੋਲ੍ਹੋ

ਜੇਕਰ ਤੁਸੀਂ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ Toast ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਉਸ ਦਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਪ੍ਰਾਰੰਭ ਕਰੋ: ਸ਼ਿਸ਼ਟ ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੋ ਅਤੇ ਉਸ ਨੂੰ ਸਬੰਧਤ ਕਰੋ ਟੋਸਟ() ਮੱਥਦਾਂ

ਜਦੋਂ ਤੁਸੀਂ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ, ਤਾਂ ਹੇਠ ਲਿਖੇ ਕੋਡ ਦਾਖਲ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਸਾਰੇ toast ਦਿਖਾਏ ਜਾਣਗੇ:

ਇੰਸਟੈਂਸ

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  }
  toastList.forEach(toast => toast.show())
}
</script>

ਆਪਣੇ ਆਪ ਨਾਲ ਕੋਸ਼ਿਸ਼ ਕਰੋ