ಟೋಸ್ಟ್ಸ್

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

ಈ ಪುಟದಲ್ಲಿ

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

ಅವಲೋಕನ

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

ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ ಟೋಸ್ಟ್‌ಗಳು ಆಯ್ಕೆಯಾಗಿವೆ, ಆದ್ದರಿಂದ ನೀವು ಅವುಗಳನ್ನು ನೀವೇ ಪ್ರಾರಂಭಿಸಬೇಕು .
ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ ಟೋಸ್ಟ್‌ಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರೆಮಾಡಲ್ಪಡುತ್ತವೆ autohide: false.

ಈ ಘಟಕದ ಅನಿಮೇಷನ್ ಪರಿಣಾಮವು prefers-reduced-motionಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ನಮ್ಮ ಪ್ರವೇಶಿಸುವಿಕೆ ದಸ್ತಾವೇಜನ್ನು ಕಡಿಮೆಗೊಳಿಸಿದ ಚಲನೆಯ ವಿಭಾಗವನ್ನು ನೋಡಿ .

ಉದಾಹರಣೆಗಳು

ಮೂಲಭೂತ

ವಿಸ್ತರಿಸಬಹುದಾದ ಮತ್ತು ಊಹಿಸಬಹುದಾದ ಟೋಸ್ಟ್‌ಗಳನ್ನು ಪ್ರೋತ್ಸಾಹಿಸಲು, ನಾವು ಹೆಡರ್ ಮತ್ತು ದೇಹವನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ಟೋಸ್ಟ್ ಹೆಡರ್‌ಗಳು ಬಳಸುತ್ತವೆ display: flex, ನಮ್ಮ ಅಂಚು ಮತ್ತು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳಿಗೆ ಧನ್ಯವಾದಗಳು ವಿಷಯದ ಸುಲಭ ಜೋಡಣೆಯನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ಟೋಸ್ಟ್‌ಗಳು ನಿಮಗೆ ಅಗತ್ಯವಿರುವಷ್ಟು ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ ಮತ್ತು ಕಡಿಮೆ ಅಗತ್ಯವಿರುವ ಮಾರ್ಕ್‌ಅಪ್ ಅನ್ನು ಹೊಂದಿರುತ್ತವೆ. ಕನಿಷ್ಠ, ನಿಮ್ಮ "ಸುಟ್ಟ" ವಿಷಯವನ್ನು ಒಳಗೊಂಡಿರುವ ಮತ್ತು ವಜಾಗೊಳಿಸುವ ಬಟನ್ ಅನ್ನು ಬಲವಾಗಿ ಪ್ರೋತ್ಸಾಹಿಸಲು ನಮಗೆ ಒಂದು ಅಂಶದ ಅಗತ್ಯವಿದೆ.

ಹಲೋ, ವಿಶ್ವ! ಇದು ಟೋಸ್ಟ್ ಸಂದೇಶವಾಗಿದೆ.

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

.hideಹಿಂದೆ, ನಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಟೋಸ್ಟ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಮರೆಮಾಡಲು ವರ್ಗವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸೇರಿಸಿದವು (ಜೊತೆಗೆ display:none, ಬದಲಿಗೆ ಜೊತೆಗೆ opacity:0). ಇದು ಈಗ ಅಗತ್ಯವಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಹಿಮ್ಮುಖ ಹೊಂದಾಣಿಕೆಗಾಗಿ, ಮುಂದಿನ ಪ್ರಮುಖ ಆವೃತ್ತಿಯವರೆಗೆ ನಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್ ವರ್ಗವನ್ನು ಟಾಗಲ್ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ (ಅದಕ್ಕೆ ಪ್ರಾಯೋಗಿಕ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೂ ಸಹ).

ನೇರ ಉದಾಹರಣೆ

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಮರೆಮಾಡಲಾಗಿರುವ ಟೋಸ್ಟ್ ಅನ್ನು (ಕೆಳಗಿನ ಬಲ ಮೂಲೆಯಲ್ಲಿ ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಇರಿಸಲಾಗಿದೆ) ತೋರಿಸಲು ಕೆಳಗಿನ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.

Hello, world! This is a toast message.

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

ನಮ್ಮ ಲೈವ್ ಟೋಸ್ಟ್ ಡೆಮೊವನ್ನು ಪ್ರಚೋದಿಸಲು ನಾವು ಈ ಕೆಳಗಿನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

ಅರೆಪಾರದರ್ಶಕ

ಟೋಸ್ಟ್‌ಗಳು ಸ್ವಲ್ಪ ಅರೆಪಾರದರ್ಶಕವಾಗಿದ್ದು ಅವುಗಳ ಕೆಳಗಿರುವದರೊಂದಿಗೆ ಬೆರೆಯುತ್ತವೆ.

ಹಲೋ, ವಿಶ್ವ! ಇದು ಟೋಸ್ಟ್ ಸಂದೇಶವಾಗಿದೆ.

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ಪೇರಿಸುವುದು

ಟೋಸ್ಟ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಸುತ್ತುವ ಮೂಲಕ ನೀವು ಟೋಸ್ಟ್‌ಗಳನ್ನು ಜೋಡಿಸಬಹುದು, ಇದು ಲಂಬವಾಗಿ ಸ್ವಲ್ಪ ಅಂತರವನ್ನು ಸೇರಿಸುತ್ತದೆ.

ನೋಡಿ? ಈ ರೀತಿ.

ಎಚ್ಚರಿಕೆ, ಟೋಸ್ಟ್‌ಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸ್ಟ್ಯಾಕ್ ಆಗುತ್ತವೆ

html

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

ಕಸ್ಟಮ್ ವಿಷಯ

ಉಪ-ಘಟಕಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ, ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಅವುಗಳನ್ನು ಟ್ವೀಕ್ ಮಾಡುವ ಮೂಲಕ ಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಟೋಸ್ಟ್ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ. ಇಲ್ಲಿ ನಾವು ಡೀಫಾಲ್ಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ಸರಳವಾದ ಟೋಸ್ಟ್ ಅನ್ನು ರಚಿಸಿದ್ದೇವೆ , ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್.toast-header ಐಕಾನ್‌ಗಳಿಂದ ಕಸ್ಟಮ್ ಹೈಡ್ ಐಕಾನ್ ಅನ್ನು ಸೇರಿಸುತ್ತೇವೆ ಮತ್ತು ಲೇಔಟ್ ಅನ್ನು ಹೊಂದಿಸಲು ಕೆಲವು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸುತ್ತೇವೆ .

ಹಲೋ, ವಿಶ್ವ! ಇದು ಟೋಸ್ಟ್ ಸಂದೇಶವಾಗಿದೆ.

html

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

ಪರ್ಯಾಯವಾಗಿ, ನೀವು ಟೋಸ್ಟ್‌ಗಳಿಗೆ ಹೆಚ್ಚುವರಿ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಘಟಕಗಳನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು.

ಹಲೋ, ವಿಶ್ವ! ಇದು ಟೋಸ್ಟ್ ಸಂದೇಶವಾಗಿದೆ.

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

ಬಣ್ಣದ ಯೋಜನೆಗಳು

ಮೇಲಿನ ಉದಾಹರಣೆಯನ್ನು ಆಧರಿಸಿ, ನಮ್ಮ ಬಣ್ಣ ಮತ್ತು ಹಿನ್ನೆಲೆ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ನೀವು ವಿಭಿನ್ನ ಟೋಸ್ಟ್ ಬಣ್ಣದ ಯೋಜನೆಗಳನ್ನು ರಚಿಸಬಹುದು. ಇಲ್ಲಿ ನಾವು .text-bg-primaryಗೆ .toastಸೇರಿಸಿದ್ದೇವೆ ಮತ್ತು ನಂತರ .btn-close-whiteನಮ್ಮ ಕ್ಲೋಸ್ ಬಟನ್‌ಗೆ ಸೇರಿಸಿದ್ದೇವೆ. ಗರಿಗರಿಯಾದ ಅಂಚಿಗಾಗಿ, ನಾವು ಡೀಫಾಲ್ಟ್ ಬಾರ್ಡರ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತೇವೆ .border-0.

ಹಲೋ, ವಿಶ್ವ! ಇದು ಟೋಸ್ಟ್ ಸಂದೇಶವಾಗಿದೆ.

html

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

ನಿಯೋಜನೆ

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

ಹಲೋ, ವಿಶ್ವ! ಇದು ಟೋಸ್ಟ್ ಸಂದೇಶವಾಗಿದೆ.

html

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

ಹೆಚ್ಚಿನ ಅಧಿಸೂಚನೆಗಳನ್ನು ರಚಿಸುವ ಸಿಸ್ಟಂಗಳಿಗಾಗಿ, ಸುತ್ತುವ ಅಂಶವನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ ಇದರಿಂದ ಅವರು ಸುಲಭವಾಗಿ ಸ್ಟ್ಯಾಕ್ ಮಾಡಬಹುದು.

ನೋಡಿ? ಈ ರೀತಿ.

ಎಚ್ಚರಿಕೆ, ಟೋಸ್ಟ್‌ಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸ್ಟ್ಯಾಕ್ ಆಗುತ್ತವೆ

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

ಟೋಸ್ಟ್‌ಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಮತ್ತು/ಅಥವಾ ಲಂಬವಾಗಿ ಜೋಡಿಸಲು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ನೀವು ಅಲಂಕಾರಿಕತೆಯನ್ನು ಪಡೆಯಬಹುದು.

ಹಲೋ, ವಿಶ್ವ! ಇದು ಟೋಸ್ಟ್ ಸಂದೇಶವಾಗಿದೆ.

html

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

ಬಳಸುವಾಗ autohide: false, ಟೋಸ್ಟ್ ಅನ್ನು ವಜಾಗೊಳಿಸಲು ಬಳಕೆದಾರರನ್ನು ಅನುಮತಿಸಲು ನೀವು ಕ್ಲೋಸ್ ಬಟನ್ ಅನ್ನು ಸೇರಿಸಬೇಕು.

ಹಲೋ, ವಿಶ್ವ! ಇದು ಟೋಸ್ಟ್ ಸಂದೇಶವಾಗಿದೆ.

html

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ತಾಂತ್ರಿಕವಾಗಿ ನಿಮ್ಮ ಟೋಸ್ಟ್‌ನಲ್ಲಿ ಕೇಂದ್ರೀಕರಿಸಬಹುದಾದ/ಕ್ರಿಯಾತ್ಮಕ ನಿಯಂತ್ರಣಗಳನ್ನು (ಹೆಚ್ಚುವರಿ ಬಟನ್‌ಗಳು ಅಥವಾ ಲಿಂಕ್‌ಗಳಂತಹ) ಸೇರಿಸಲು ಸಾಧ್ಯವಿದ್ದರೂ, ಟೋಸ್ಟ್‌ಗಳನ್ನು ಸ್ವಯಂಹೈಡಿಂಗ್ ಮಾಡಲು ನೀವು ಇದನ್ನು ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಬೇಕು. ನೀವು ಟೋಸ್ಟ್‌ಗೆ ದೀರ್ಘಾವಧಿಯ delayಸಮಯವನ್ನು ನೀಡಿದ್ದರೂ ಸಹ , ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನದ ಬಳಕೆದಾರರು ಕ್ರಮ ತೆಗೆದುಕೊಳ್ಳಲು ಸಮಯಕ್ಕೆ ಟೋಸ್ಟ್ ಅನ್ನು ತಲುಪಲು ಕಷ್ಟವಾಗಬಹುದು (ಟೋಸ್ಟ್‌ಗಳು ಪ್ರದರ್ಶಿಸಿದಾಗ ಗಮನವನ್ನು ಪಡೆಯುವುದಿಲ್ಲವಾದ್ದರಿಂದ). ನೀವು ಸಂಪೂರ್ಣವಾಗಿ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣಗಳನ್ನು ಹೊಂದಿರಬೇಕಾದರೆ, ಜೊತೆಗೆ ಟೋಸ್ಟ್ ಅನ್ನು ಬಳಸಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ autohide: false.

CSS

ಅಸ್ಥಿರ

v5.2.0 ರಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವಿಕಾಸಗೊಳ್ಳುತ್ತಿರುವ CSS ಅಸ್ಥಿರ ವಿಧಾನದ ಭಾಗವಾಗಿ, ಟೋಸ್ಟ್‌ಗಳು ಈಗ .toastವರ್ಧಿತ ನೈಜ-ಸಮಯದ ಗ್ರಾಹಕೀಕರಣಕ್ಕಾಗಿ ಸ್ಥಳೀಯ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. CSS ವೇರಿಯೇಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು Sass ಮೂಲಕ ಹೊಂದಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ Sass ಗ್ರಾಹಕೀಕರಣವು ಇನ್ನೂ ಬೆಂಬಲಿತವಾಗಿದೆ.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

ಸಾಸ್ ಅಸ್ಥಿರ

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

ಬಳಕೆ

JavaScript ಮೂಲಕ ಟೋಸ್ಟ್‌ಗಳನ್ನು ಆರಂಭಿಸಿ:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

ಪ್ರಚೋದಿಸುತ್ತದೆ

ಕೆಳಗೆ ಪ್ರದರ್ಶಿಸಿದಂತೆ ಟೋಸ್ಟ್‌ನಲ್ಲಿರುವdata ಬಟನ್‌ನಲ್ಲಿನ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ವಜಾಗೊಳಿಸುವಿಕೆಯನ್ನು ಸಾಧಿಸಬಹುದು :

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

ಅಥವಾ ಕೆಳಗೆ ಪ್ರದರ್ಶಿಸಿದಂತೆ ಟೋಸ್ಟ್‌ನ ಹೊರಗಿನ ಬಟನ್‌ನಲ್ಲಿ :data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದಾದ್ದರಿಂದ, ನೀವು ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಗೆ data-bs-ಸೇರಿಸಬಹುದು data-bs-animation="{value}". ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸುವಾಗ "ಒಂಟೆ ಕೇಸ್" ನಿಂದ "ಕಬಾಬ್-ಕೇಸ್" ಗೆ ಆಯ್ಕೆಯ ಹೆಸರಿನ ಕೇಸ್ ಪ್ರಕಾರವನ್ನು ಬದಲಾಯಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ . ಉದಾಹರಣೆಗೆ, data-bs-custom-class="beautifier"ಬದಲಿಗೆ ಬಳಸಿ data-bs-customClass="beautifier".

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 5.2.0 ರಂತೆ, ಎಲ್ಲಾ ಘಟಕಗಳು ಪ್ರಾಯೋಗಿಕವಾಗಿ ಕಾಯ್ದಿರಿಸಿದ ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ data-bs-configಅದು JSON ಸ್ಟ್ರಿಂಗ್‌ನಂತೆ ಸರಳ ಘಟಕ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಇರಿಸಬಹುದು. ಒಂದು ಅಂಶವು data-bs-config='{"delay":0, "title":123}'ಮತ್ತು data-bs-title="456"ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿರುವಾಗ, ಅಂತಿಮ titleಮೌಲ್ಯವಾಗಿರುತ್ತದೆ 456ಮತ್ತು ಪ್ರತ್ಯೇಕ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ನಲ್ಲಿ ನೀಡಲಾದ ಮೌಲ್ಯಗಳನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ data-bs-config. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ನಂತಹ JSON ಮೌಲ್ಯಗಳನ್ನು ಇರಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ data-bs-delay='{"show":0,"hide":150}'.

ಹೆಸರು	ಮಾದರಿ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`animation`	ಬೂಲಿಯನ್	`true`	ಟೋಸ್ಟ್‌ಗೆ CSS ಫೇಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ.
`autohide`	ಬೂಲಿಯನ್	`true`	ವಿಳಂಬದ ನಂತರ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಟೋಸ್ಟ್ ಅನ್ನು ಮರೆಮಾಡಿ.
`delay`	ಸಂಖ್ಯೆ	`5000`	ಟೋಸ್ಟ್ ಅನ್ನು ಮರೆಮಾಡುವ ಮೊದಲು ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಲ್ಲಿ ವಿಳಂಬ ಮಾಡಿ.

ವಿಧಾನಗಳು

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

ಎಲ್ಲಾ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ . ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ತಕ್ಷಣ ಅವರು ಕರೆ ಮಾಡುವವರ ಬಳಿಗೆ ಹಿಂತಿರುಗುತ್ತಾರೆ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ನಮ್ಮ JavaScript ದಸ್ತಾವೇಜನ್ನು ನೋಡಿ .

ವಿಧಾನ	ವಿವರಣೆ
`dispose`	ಒಂದು ಅಂಶದ ಟೋಸ್ಟ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ನಿಮ್ಮ ಟೋಸ್ಟ್ DOM ನಲ್ಲಿ ಉಳಿಯುತ್ತದೆ ಆದರೆ ಇನ್ನು ಮುಂದೆ ತೋರಿಸುವುದಿಲ್ಲ.
`getInstance`	DOM ಅಂಶದೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ ಟೋಸ್ಟ್ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಥಿರ ವಿಧಾನ. ಉದಾಹರಣೆಗೆ: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಟೋಸ್ಟ್ ನಿದರ್ಶನವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
`getOrCreateInstance`	DOM ಅಂಶದೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ ಟೋಸ್ಟ್ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ಅಥವಾ ಅದನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದಲ್ಲಿ ಹೊಸದನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಥಿರ ವಿಧಾನ. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಟೋಸ್ಟ್ ನಿದರ್ಶನವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
`hide`	ಒಂದು ಅಂಶದ ಟೋಸ್ಟ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಟೋಸ್ಟ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . `hidden.bs.toast`ನೀವು ಮಾಡಿದ್ದರೆ ಈ ವಿಧಾನವನ್ನು ನೀವು ಹಸ್ತಚಾಲಿತವಾಗಿ ಕರೆ `autohide`ಮಾಡಬೇಕು `false`.
`isShown`	ಟೋಸ್ಟ್‌ನ ಗೋಚರತೆಯ ಸ್ಥಿತಿಗೆ ಅನುಗುಣವಾಗಿ ಬೂಲಿಯನ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
`show`	ಒಂದು ಅಂಶದ ಟೋಸ್ಟ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಟೋಸ್ಟ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . `shown.bs.toast`ನೀವು ಈ ವಿಧಾನವನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಕರೆಯಬೇಕು, ಬದಲಿಗೆ ನಿಮ್ಮ ಟೋಸ್ಟ್ ತೋರಿಸುವುದಿಲ್ಲ.

ಕಾರ್ಯಕ್ರಮಗಳು

ಈವೆಂಟ್	ವಿವರಣೆ
`hide.bs.toast`	`hide`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
`hidden.bs.toast`	ಟೋಸ್ಟ್ ಅನ್ನು ಬಳಕೆದಾರರಿಂದ ಮರೆಮಾಡುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ.
`show.bs.toast`	`show`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
`shown.bs.toast`	ಟೋಸ್ಟ್ ಅನ್ನು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸುವಂತೆ ಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})