ਟੋਸਟ

ਇੱਕ ਟੋਸਟ, ਇੱਕ ਹਲਕੇ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਅਨੁਕੂਲਿਤ ਸੁਚੇਤਨਾ ਸੰਦੇਸ਼ ਦੇ ਨਾਲ ਤੁਹਾਡੇ ਦਰਸ਼ਕਾਂ ਨੂੰ ਸੂਚਨਾਵਾਂ ਪੁਸ਼ ਕਰੋ।

ਟੋਸਟਸ ਹਲਕੇ ਭਾਰ ਵਾਲੀਆਂ ਸੂਚਨਾਵਾਂ ਹਨ ਜੋ ਪੁਸ਼ ਸੂਚਨਾਵਾਂ ਦੀ ਨਕਲ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ ਜੋ ਮੋਬਾਈਲ ਅਤੇ ਡੈਸਕਟੌਪ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮਾਂ ਦੁਆਰਾ ਪ੍ਰਸਿੱਧ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ। ਉਹ flexbox ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ, ਇਸਲਈ ਉਹ ਇਕਸਾਰ ਅਤੇ ਸਥਿਤੀ ਵਿੱਚ ਆਸਾਨ ਹਨ।

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਟੋਸਟ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਜਾਣਨ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ:

ਜੇਕਰ ਤੁਸੀਂ ਸਰੋਤ ਤੋਂ ਸਾਡੀ 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>

ਪਾਰਦਰਸ਼ੀ

ਟੋਸਟ ਥੋੜ੍ਹੇ ਜਿਹੇ ਪਾਰਦਰਸ਼ੀ ਵੀ ਹੁੰਦੇ ਹਨ, ਇਸਲਈ ਉਹ ਜੋ ਵੀ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਉਸ ਉੱਤੇ ਮਿਲਾਉਂਦੇ ਹਨ। ਉਹਨਾਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ ਜੋ backdrop-filterCSS ਪ੍ਰਾਪਰਟੀ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ, ਅਸੀਂ ਟੋਸਟ ਦੇ ਹੇਠਾਂ ਤੱਤਾਂ ਨੂੰ ਬਲਰ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਵੀ ਕਰਾਂਗੇ।

ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ! ਇਹ ਇੱਕ ਟੋਸਟ ਸੁਨੇਹਾ ਹੈ।

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

ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ! ਇਹ ਇੱਕ ਟੋਸਟ ਸੁਨੇਹਾ ਹੈ।

<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 ਵਿਵਹਾਰ

ਵਰਤੋਂ

Initialize toasts via JavaScript:

$('.toast').toast(option)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-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	`500`	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.

`$().toast(options)`

Attaches a toast handler to an element collection.

`.toast('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.

$('#element').toast('show')

`.toast('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.

$('#element').toast('hide')

`.toast('dispose')`

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

$('#element').toast('dispose')

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	ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ `hide`ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
hidden.bs.toast	ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੋਸਟ ਨੂੰ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਣਾ ਖਤਮ ਹੋ ਜਾਂਦਾ ਹੈ।

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})