in English

ਟੋਸਟ

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

ਟੋਸਟਸ ਹਲਕੇ ਭਾਰ ਵਾਲੀਆਂ ਸੂਚਨਾਵਾਂ ਹਨ ਜੋ ਪੁਸ਼ ਸੂਚਨਾਵਾਂ ਦੀ ਨਕਲ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ ਜੋ ਮੋਬਾਈਲ ਅਤੇ ਡੈਸਕਟੌਪ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮਾਂ ਦੁਆਰਾ ਪ੍ਰਸਿੱਧ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ। ਉਹ 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।

ਬੂਟਸਟਰੈਪ 11 ਮਿੰਟ ਪਹਿਲਾਂ
ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ! ਇਹ ਇੱਕ ਟੋਸਟ ਸੁਨੇਹਾ ਹੈ। 
<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="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 ਵਿਵਹਾਰ

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਟੋਸਟ ਸ਼ੁਰੂ ਕਰੋ:

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""।

ਨਾਮ ਟਾਈਪ ਕਰੋ ਡਿਫਾਲਟ ਵਰਣਨ
ਐਨੀਮੇਸ਼ਨ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਟੋਸਟ ਵਿੱਚ ਇੱਕ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ
ਆਟੋਹਾਈਡ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਟੋਸਟ ਨੂੰ ਆਟੋ ਲੁਕਾਓ
ਦੇਰੀ ਗਿਣਤੀ 500 ਟੋਸਟ ਨੂੰ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ (ms)

ਢੰਗ

ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ

ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।

ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ ਵੇਖੋ ।

$().toast(options)

ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਵਿੱਚ ਇੱਕ ਟੋਸਟ ਹੈਂਡਲਰ ਨੱਥੀ ਕਰਦਾ ਹੈ।

.toast('show')

ਇੱਕ ਤੱਤ ਦੇ ਟੋਸਟ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ। ਟੋਸਟ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.toastਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਤੁਹਾਨੂੰ ਇਸ ਵਿਧੀ ਨੂੰ ਹੱਥੀਂ ਕਾਲ ਕਰਨਾ ਪਏਗਾ, ਇਸ ਦੀ ਬਜਾਏ ਤੁਹਾਡਾ ਟੋਸਟ ਦਿਖਾਈ ਨਹੀਂ ਦੇਵੇਗਾ।

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

.toast('hide')

ਕਿਸੇ ਤੱਤ ਦੇ ਟੋਸਟ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਟੋਸਟ ਨੂੰ ਅਸਲ ਵਿੱਚ ਲੁਕਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.toastਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਜੇਕਰ ਤੁਸੀਂ ਕੀਤੀ ਹੈ ਤਾਂ ਤੁਹਾਨੂੰ ਇਸ ਵਿਧੀ ਨੂੰ ਦਸਤੀ ਕਾਲ autohideਕਰਨਾ ਪਵੇਗਾ false।

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

.toast('dispose')

ਕਿਸੇ ਤੱਤ ਦੇ ਟੋਸਟ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਤੁਹਾਡਾ ਟੋਸਟ DOM 'ਤੇ ਰਹੇਗਾ ਪਰ ਹੁਣ ਨਹੀਂ ਦਿਖਾਇਆ ਜਾਵੇਗਾ।

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

ਸਮਾਗਮ

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.toast ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ showਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
ਦਿਖਾਇਆ ਗਿਆ.bs.toast ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੋਸਟ ਨੂੰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ।
hide.bs.toast ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hideਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
hidden.bs.toast ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੋਸਟ ਨੂੰ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਣਾ ਖਤਮ ਹੋ ਜਾਂਦਾ ਹੈ। 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})