ಟೋಸ್ಟ್ಸ್

ಟೋಸ್ಟ್, ಹಗುರವಾದ ಮತ್ತು ಸುಲಭವಾಗಿ ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದಾದ ಎಚ್ಚರಿಕೆ ಸಂದೇಶದೊಂದಿಗೆ ನಿಮ್ಮ ಸಂದರ್ಶಕರಿಗೆ ಅಧಿಸೂಚನೆಗಳನ್ನು ಒತ್ತಿರಿ.

ಟೋಸ್ಟ್‌ಗಳು ಮೊಬೈಲ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್ ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್‌ಗಳಿಂದ ಜನಪ್ರಿಯಗೊಳಿಸಿದ ಪುಶ್ ಅಧಿಸೂಚನೆಗಳನ್ನು ಅನುಕರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಹಗುರವಾದ ಅಧಿಸೂಚನೆಗಳಾಗಿವೆ. ಅವುಗಳನ್ನು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ಅವುಗಳನ್ನು ಜೋಡಿಸಲು ಮತ್ತು ಇರಿಸಲು ಸುಲಭವಾಗಿದೆ.

ಅವಲೋಕನ

ಟೋಸ್ಟ್ ಪ್ಲಗಿನ್ ಬಳಸುವಾಗ ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ವಿಷಯಗಳು:

ನೀವು ಮೂಲದಿಂದ ನಮ್ಮ 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 ಮೂಲಕ ಟೋಸ್ಟ್‌ಗಳನ್ನು ಆರಂಭಿಸಿ:

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

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-animation="".

ಹೆಸರು	ಮಾದರಿ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
ಅನಿಮೇಷನ್	ಬೂಲಿಯನ್	ನಿಜ	ಟೋಸ್ಟ್‌ಗೆ CSS ಫೇಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ
ಸ್ವಯಂ ಮರೆಮಾಡಿ	ಬೂಲಿಯನ್	ನಿಜ	ಟೋಸ್ಟ್ ಅನ್ನು ಸ್ವಯಂ ಮರೆಮಾಡಿ
ವಿಳಂಬ	ಸಂಖ್ಯೆ	`500`	ಟೋಸ್ಟ್ ಅನ್ನು ಮರೆಮಾಡಲು ವಿಳಂಬ (ಮಿಸೆ)

ವಿಧಾನಗಳು

ಅಸಮಕಾಲಿಕ ವಿಧಾನಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು

ಎಲ್ಲಾ 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.ಟೋಸ್ಟ್	`show`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ತೋರಿಸಲಾಗಿದೆ.ಬಿಎಸ್.ಟೋಸ್ಟ್	ಟೋಸ್ಟ್ ಅನ್ನು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸುವಂತೆ ಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ.
hide.bs.ಟೋಸ್ಟ್	`hide`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಮರೆಮಾಡಲಾಗಿದೆ.ಬಿಎಸ್.ಟೋಸ್ಟ್	ಟೋಸ್ಟ್ ಅನ್ನು ಬಳಕೆದಾರರಿಂದ ಮರೆಮಾಡುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ.

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