ਟੋਸਟ

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

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

ਲਾਈਵ

ਇੱਕ ਟੋਸਟ ਦਿਖਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ (ਹੇਠਲੇ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ ਸਾਡੀਆਂ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ ਸਥਿਤ) ਜੋ ਕਿ ਮੂਲ ਰੂਪ ਵਿੱਚ ਨਾਲ ਲੁਕਿਆ ਹੋਇਆ ਹੈ .hide।

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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 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="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>

ਹਾਲਾਂਕਿ ਤਕਨੀਕੀ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਟੋਸਟ ਵਿੱਚ ਫੋਕਸ ਕਰਨ ਯੋਗ/ਕਾਰਵਾਈ ਯੋਗ ਨਿਯੰਤਰਣ (ਜਿਵੇਂ ਕਿ ਵਾਧੂ ਬਟਨ ਜਾਂ ਲਿੰਕ) ਸ਼ਾਮਲ ਕਰਨਾ ਸੰਭਵ ਹੈ, ਤੁਹਾਨੂੰ ਟੋਸਟਾਂ ਨੂੰ ਆਟੋਹਾਈਡਿੰਗ ਕਰਨ ਲਈ ਅਜਿਹਾ ਕਰਨ ਤੋਂ ਬਚਣਾ ਚਾਹੀਦਾ ਹੈ। ਭਾਵੇਂ ਤੁਸੀਂ ਟੋਸਟ ਨੂੰ ਲੰਮਾ delayਸਮਾਂ ਸਮਾਪਤ ਕਰਦੇ ਹੋ, ਕੀਬੋਰਡ ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਕਾਰਵਾਈ ਕਰਨ ਲਈ ਸਮੇਂ ਵਿੱਚ ਟੋਸਟ ਤੱਕ ਪਹੁੰਚਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦੀ ਹੈ (ਕਿਉਂਕਿ ਟੋਸਟ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਣ 'ਤੇ ਫੋਕਸ ਪ੍ਰਾਪਤ ਨਹੀਂ ਹੁੰਦਾ)। ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਬਿਲਕੁਲ ਹੋਰ ਨਿਯੰਤਰਣ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ, ਤਾਂ ਅਸੀਂ ਟੋਸਟ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ autohide: false।

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