ଟୋଷ୍ଟ

ଏକ ଟୋଷ୍ଟ, ହାଲୁକା ଏବଂ ସହଜରେ କଷ୍ଟମାଇଜେବଲ୍ ଆଲର୍ଟ ବାର୍ତ୍ତା ସହିତ ଆପଣଙ୍କର ଭ୍ରମଣକାରୀଙ୍କୁ ବିଜ୍ଞପ୍ତିକୁ ପୁସ୍ କରନ୍ତୁ |

ଏହି ପୃଷ୍ଠାରେ |

ଟୋଷ୍ଟଗୁଡ଼ିକ ହେଉଛି ହାଲୁକା ବିଜ୍ଞପ୍ତି ଯାହା ପୁସ୍ ବିଜ୍ଞପ୍ତିକୁ ଅନୁକରଣ କରିବା ପାଇଁ ଡିଜାଇନ୍ ହୋଇଛି ଯାହା ମୋବାଇଲ୍ ଏବଂ ଡେସ୍କଟପ୍ ଅପରେଟିଂ ସିଷ୍ଟମ୍ ଦ୍ୱାରା ଲୋକପ୍ରିୟ ହୋଇଛି | ସେଗୁଡିକ ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ନିର୍ମିତ, ତେଣୁ ସେଗୁଡିକ ଆଲାଇନ୍ ଏବଂ ପୋଜିସନ୍ କରିବା ସହଜ |

ସମୀକ୍ଷା

ଟୋଷ୍ଟ ପ୍ଲଗଇନ ବ୍ୟବହାର କରିବା ସମୟରେ ଜାଣିବା ଜିନିଷ:

କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ ଟୋଷ୍ଟଗୁଡିକ ଅପ୍ଟ-ଇନ୍ ଅଟେ, ତେଣୁ ଆପଣ ସେମାନଙ୍କୁ ନିଜେ ଆରମ୍ଭ କରିବା ଜରୁରୀ |
ଯଦି ଆପଣ ନିର୍ଦ୍ଦିଷ୍ଟ ନକରନ୍ତି ତେବେ ଟୋଷ୍ଟଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଲୁଚିବ autohide: false|

ଏହି ଉପାଦାନର ଆନିମେସନ୍ ପ୍ରଭାବ prefers-reduced-motionମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ |

ଉଦାହରଣଗୁଡିକ

ମ Basic ଳିକ

ବିସ୍ତାରଯୋଗ୍ୟ ଏବଂ ପୂର୍ବାନୁମାନଯୋଗ୍ୟ ଟୋଷ୍ଟକୁ ଉତ୍ସାହିତ କରିବା ପାଇଁ, ଆମେ ଏକ ହେଡର୍ ଏବଂ ଶରୀରକୁ ସୁପାରିଶ କରୁ | display: flexଆମର ମାର୍ଜିନ୍ ଏବଂ ଫ୍ଲେକ୍ସବକ୍ସ ଉପଯୋଗିତା ପାଇଁ ବିଷୟବସ୍ତୁର ସହଜ ଆଲାଇନ୍ମେଣ୍ଟକୁ ଅନୁମତି ଦେଇ ଟୋଷ୍ଟ ହେଡର୍ ବ୍ୟବହାର କରେ |

ଟୋଷ୍ଟଗୁଡ଼ିକ ତୁମର ଆବଶ୍ୟକତା ପରି ନମନୀୟ ଏବଂ ବହୁତ କମ୍ ମାର୍କଅପ୍ ଅଛି | ଅତିକମରେ, ତୁମର “ଟୋଷ୍ଟଡ୍” ବିଷୟବସ୍ତୁ ଧାରଣ କରିବା ପାଇଁ ଏବଂ ଆମେ ଏକ ବହିଷ୍କାର ବଟନ୍ କୁ ଦୃ strongly ଭାବରେ ଉତ୍ସାହିତ କରିବା ପାଇଁ ଗୋଟିଏ ଉପାଦାନ ଆବଶ୍ୟକ କରୁ |

ନମସ୍କାର ବିଶ୍ୱବାସି! ଏହା ଏକ ଟୋଷ୍ଟ ବାର୍ତ୍ତା |

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) | ଏହା ଆଉ ଆବଶ୍ୟକ ନୁହେଁ | ତଥାପି, ପଛୁଆ ସୁସଙ୍ଗତତା ପାଇଁ, ଆମର ସ୍କ୍ରିପ୍ଟ ପରବର୍ତ୍ତୀ ପ୍ରମୁଖ ସଂସ୍କରଣ ପର୍ଯ୍ୟନ୍ତ କ୍ଲାସ୍ ଟୋଗଲ୍ ଜାରି ରଖିବ (ଯଦିଓ ଏହାର କ practical ଣସି ବ୍ୟବହାରିକ ଆବଶ୍ୟକତା ନାହିଁ) |

ଜୀବନ୍ତ ଉଦାହରଣ |

ଏକ ଟୋଷ୍ଟ ଦେଖାଇବାକୁ ନିମ୍ନରେ ଥିବା ବଟନ୍ କ୍ଲିକ୍ କରନ୍ତୁ (ନିମ୍ନ ଡାହାଣ କୋଣରେ ଆମର ଉପଯୋଗିତା ସହିତ ସ୍ଥିତ) ଯାହା ଡିଫଲ୍ଟ ଭାବରେ ଲୁକ୍କାୟିତ ହୋଇଛି |

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>

ବ ly କଳ୍ପିକ ଭାବରେ, ଆପଣ ଟୋଷ୍ଟରେ ଅତିରିକ୍ତ ନିୟନ୍ତ୍ରଣ ଏବଂ ଉପାଦାନ ମଧ୍ୟ ଯୋଡିପାରିବେ |

ନମସ୍କାର ବିଶ୍ୱବାସି! ଏହା ଏକ ଟୋଷ୍ଟ ବାର୍ତ୍ତା |

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 ସହିତ ଟୋଷ୍ଟଗୁଡିକ ରଖନ୍ତୁ | ଉପର ଡାହାଣଟି ପ୍ରାୟତ not ବିଜ୍ଞପ୍ତି ପାଇଁ ବ୍ୟବହୃତ ହୁଏ, ଯେପରି ଉପର ମଧ୍ୟଭାଗ | ଯଦି ଆପଣ କେବଳ ଥରେ ଗୋଟିଏ ଟୋଷ୍ଟ ଦେଖାଇବାକୁ ଯାଉଛନ୍ତି, ତେବେ ପୋଜିସନ୍ ଶ yles ଳୀକୁ ଠିକ୍ ଉପରେ ରଖନ୍ତୁ .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>

ସିଷ୍ଟମ୍ ପାଇଁ ଯାହା ଅଧିକ ବିଜ୍ଞପ୍ତି ସୃଷ୍ଟି କରେ, ଏକ ରାପିଙ୍ଗ୍ ଉପାଦାନ ବ୍ୟବହାର କରିବାକୁ ଚିନ୍ତା କର ଯାହା ଦ୍ easily ାରା ସେମାନେ ସହଜରେ ଷ୍ଟାକ୍ କରିପାରିବେ |

ଦେଖନ୍ତୁ? ଠିକ୍ ଏହିପରି |

ହେଡ୍ ଅପ୍, ଟୋଷ୍ଟଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଷ୍ଟକ୍ ହେବ |

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"ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ସମଗ୍ର ଟୋଷ୍ଟକୁ ସର୍ବଦା ଏକକ (ପରମାଣୁ) ୟୁନିଟ୍ ଭାବରେ ଘୋଷିତ କରାଯାଏ, କେବଳ ପରିବର୍ତ୍ତନ ହୋଇଥିବା ଘୋଷଣା କରିବା ପରିବର୍ତ୍ତେ (ଯାହା କେବଳ ଟୋଷ୍ଟର ବିଷୟବସ୍ତୁର କିଛି ଅଂଶ ଅପଡେଟ୍ କରେ କିମ୍ବା ଯଦି ସମାନ ଟୋଷ୍ଟ ବିଷୟବସ୍ତୁ ପ୍ରଦର୍ଶନ କରେ ତେବେ ସମସ୍ୟା ସୃଷ୍ଟି କରିପାରେ | ପରବର୍ତ୍ତୀ ସମୟରେ) ଯଦି ପ୍ରକ୍ରିୟା ପାଇଁ ଆବଶ୍ୟକ ସୂଚନା ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ, ଉଦାହରଣ ସ୍ୱରୂପ ଏକ ଫର୍ମରେ ତ୍ରୁଟିର ତାଲିକା ପାଇଁ, ତେବେ ସତର୍କ ଉପାଦାନ ବ୍ୟବହାର କରନ୍ତୁ |ଟୋଷ୍ଟ ବଦଳରେ |

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଟୋଷ୍ଟ ସୃଷ୍ଟି କିମ୍ବା ଅପଡେଟ୍ ହେବା ପୂର୍ବରୁ ଲାଇଭ୍ ଅଞ୍ଚଳ ମାର୍କଅପ୍ ରେ ଉପସ୍ଥିତ ରହିବା ଆବଶ୍ୟକ | ଯଦି ତୁମେ ଏକାସାଙ୍ଗରେ ଉଭୟ ଗତିଶୀଳ ଭାବରେ ସୃଷ୍ଟି କର ଏବଂ ସେଗୁଡ଼ିକୁ ପୃଷ୍ଠାରେ ଇଞ୍ଜେକ୍ସନ ଦିଅ, ସେଗୁଡିକ ସାଧାରଣତ assist ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଦ୍ୱାରା ଘୋଷିତ ହେବ ନାହିଁ |

ବିଷୟବସ୍ତୁ ଉପରେ ନିର୍ଭର କରି ତୁମକୁ roleଏବଂ ସ୍ତରକୁ ମଧ୍ୟ ଆଡାପ୍ଟର କରିବାକୁ ପଡିବ | aria-liveଯଦି ଏହା ଏକ ତ୍ରୁଟି ପରି ଏକ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ବାର୍ତ୍ତା, ବ୍ୟବହାର କର role="alert" aria-live="assertive", ଅନ୍ୟଥା role="status" aria-live="polite"ଗୁଣଗୁଡିକ ବ୍ୟବହାର କର |

ଯେହେତୁ ଆପଣ ବିଷୟବସ୍ତୁ ପ୍ରଦର୍ଶନ କରୁଛନ୍ତି, ସମୟ ସମାପ୍ତ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ ଯାହା ଦ୍ users delayାରା ଉପଭୋକ୍ତାମାନେ ଟୋଷ୍ଟ ପ read ିବା ପାଇଁ ପର୍ଯ୍ୟାପ୍ତ ସମୟ ପାଇବେ |

<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 ଭେରିଏବଲ୍ ପାଇଁ ମୂଲ୍ୟଗୁଡ଼ିକ ସାସ୍ ମାଧ୍ୟମରେ ସେଟ୍ ହୋଇଛି, ତେଣୁ ସାସ୍ କଷ୍ଟୋମାଇଜେସନ୍ ମଧ୍ୟ ସମର୍ଥିତ |

  --#{$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);

ବ୍ୟବହାର

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟୋଷ୍ଟ ଆରମ୍ଭ କରନ୍ତୁ:

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}"| ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ ଅପ୍ସନ୍ ପାସ୍ କରିବାବେଳେ ଅପ୍ସନ୍ ନାମର କେସ୍ ପ୍ରକାରକୁ “ camelCase ” ରୁ “ kebab-case ” କୁ ପରିବର୍ତ୍ତନ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ଏହା ପରିବର୍ତ୍ତେ ବ୍ୟବହାର 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 ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |

ଅଧିକ ସୂଚନା ପାଇଁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଦେଖନ୍ତୁ |

ପଦ୍ଧତି	ବର୍ଣ୍ଣନା
`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...
})