ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
in English

ଟୋଷ୍ଟ

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

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

ସମୀକ୍ଷା

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

  • କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ ଟୋଷ୍ଟଗୁଡିକ ଅପ୍ଟ-ଇନ୍ ଅଟେ, ତେଣୁ ଆପଣ ସେମାନଙ୍କୁ ନିଜେ ଆରମ୍ଭ କରିବା ଜରୁରୀ |
  • ଯଦି ଆପଣ ନିର୍ଦ୍ଦିଷ୍ଟ ନକରନ୍ତି ତେବେ ଟୋଷ୍ଟଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଲୁଚିବ autohide: false|
ଏହି ଉପାଦାନର ଆନିମେସନ୍ ପ୍ରଭାବ prefers-reduced-motionମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ |

ଉଦାହରଣଗୁଡିକ

ମ Basic ଳିକ

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

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

<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|

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

ସ୍ୱଚ୍ଛ

ଟୋଷ୍ଟଗୁଡ଼ିକ ସେମାନଙ୍କ ତଳେ ଥିବା ସହିତ ମିଶିବା ପାଇଁ ସାମାନ୍ୟ ସ୍ୱଚ୍ଛ |

<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>

ଷ୍ଟାକିଂ

ଆପଣ ଟୋଷ୍ଟ ପାତ୍ରରେ ଗୁଡ଼ାଇ ଟୋଷ୍ଟଗୁଡ଼ିକୁ ଷ୍ଟାକ କରିପାରିବେ, ଯାହା ଭୂଲମ୍ବ ଭାବରେ କିଛି ବ୍ୟବଧାନ ଯୋଗ କରିବ |

<div class="toast-container">
  <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 ଏକ କଷ୍ଟମ୍ ଲୁକ୍କାୟିତ ଆଇକନ୍ ଯୋଡି ଏବଂ ଲେଆଉଟ୍ ଆଡଜଷ୍ଟ କରିବାକୁ କିଛି ଫ୍ଲେକ୍ସବକ୍ସ ୟୁଟିଲିଟି ବ୍ୟବହାର କରି ଏକ ସରଳ ଟୋଷ୍ଟ ସୃଷ୍ଟି କରିଛୁ |

<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 କଳ୍ପିକ ଭାବରେ, ଆପଣ ଟୋଷ୍ଟରେ ଅତିରିକ୍ତ ନିୟନ୍ତ୍ରଣ ଏବଂ ଉପାଦାନ ମଧ୍ୟ ଯୋଡିପାରିବେ |

<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>

ରଙ୍ଗ ଯୋଜନା

ଉପରୋକ୍ତ ଉଦାହରଣ ଉପରେ ନିର୍ମାଣ କରି, ଆପଣ ଆମର ରଙ୍ଗ ଏବଂ ପୃଷ୍ଠଭୂମି ଉପଯୋଗୀତା ସହିତ ବିଭିନ୍ନ ଟୋଷ୍ଟ ରଙ୍ଗ ସ୍କିମ୍ ସୃଷ୍ଟି କରିପାରିବେ | ଏଠାରେ ଆମେ ଯୋଡିଛୁ .bg-primaryଏବଂ .text-white, .toastଏବଂ ତା’ପରେ .btn-close-whiteଆମର ବନ୍ଦ ବଟନ୍ ରେ ଯୋଡିଛୁ | ଏକ ଖରାପ ଧାର ପାଇଁ, ଆମେ ଡିଫଲ୍ଟ ସୀମା ଅପସାରଣ କରୁ .border-0|

<div class="toast align-items-center text-white 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|

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ | 11 ମିନିଟ୍ ପୂର୍ବରୁ
ନମସ୍କାର ବିଶ୍ୱବାସି! ଏହା ଏକ ଟୋଷ୍ଟ ବାର୍ତ୍ତା |
<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 position-absolute 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 ାରା ସେମାନେ ସହଜରେ ଷ୍ଟାକ୍ କରିପାରିବେ |

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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>

ଭୂସମାନ୍ତରାଳ ଏବଂ / କିମ୍ବା ଭୂଲମ୍ବ ଭାବରେ ଟୋଷ୍ଟଗୁଡ଼ିକୁ ଆଲାଇନ୍ କରିବା ପାଇଁ ଆପଣ ଫ୍ଲେକ୍ସବକ୍ସ ୟୁଟିଲିଟି ସହିତ ଫ୍ୟାନ୍ସ ମଧ୍ୟ ପାଇପାରିବେ |

<!-- 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, ଉପଭୋକ୍ତାମାନଙ୍କୁ ଟୋଷ୍ଟକୁ ବରଖାସ୍ତ କରିବାକୁ ଆପଣଙ୍କୁ ଏକ ବନ୍ଦ ବଟନ୍ ଯୋଗ କରିବାକୁ ପଡିବ |

<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|

ସାସ୍ |

ଭେରିଏବଲ୍ |

$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:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$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(0, 0, 0, .05);

ବ୍ୟବହାର

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

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-bs-ଯେପରି ଯୋଡନ୍ତୁ data-bs-animation=""|

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
animation ବୁଲିଅନ୍ true ଟୋଷ୍ଟକୁ ଏକ CSS ଦୁର୍ବଳ ପରିବର୍ତ୍ତନ ପ୍ରୟୋଗ କରନ୍ତୁ |
autohide ବୁଲିଅନ୍ true ଟୋଷ୍ଟକୁ ଅଟୋ ଲୁଚାନ୍ତୁ |
delay ସଂଖ୍ୟା 5000 ଟୋଷ୍ଟ ଲୁଚାଇବାରେ ବିଳମ୍ବ (ms)

ପ୍ରଣାଳୀ

ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |

ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |

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

ଦେଖାନ୍ତୁ |

ଏକ ଉପାଦାନର ଟୋଷ୍ଟ ପ୍ରକାଶ କରେ | ଟୋଷ୍ଟ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.toastଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଆପଣଙ୍କୁ ଏହି ପଦ୍ଧତିକୁ ମାନୁଆଲ୍ କଲ୍ କରିବାକୁ ପଡିବ, ଏହା ବଦଳରେ ଆପଣଙ୍କର ଟୋଷ୍ଟ ଦେଖାଯିବ ନାହିଁ |

toast.show()

ଲୁଚାନ୍ତୁ |

ଏକ ଉପାଦାନର ଟୋଷ୍ଟ ଲୁଚାଏ | ଟୋଷ୍ଟ ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.toastଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଯାଏ | ଯଦି ଆପଣ ଏହି ପଦ୍ଧତିକୁ ମାନୁଆଲୀ କଲ୍ autohideକରିବାକୁ ପଡିବ false|

toast.hide()

ନିଷ୍କାସନ କରନ୍ତୁ |

ଏକ ଉପାଦାନର ଟୋଷ୍ଟ ଲୁଚାଏ | ତୁମର ଟୋଷ୍ଟ DOM ରେ ରହିବ କିନ୍ତୁ ଆଉ ଦେଖାଇବ ନାହିଁ |

toast.dispose()

getInstance

ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ସ୍କ୍ରୋଲ୍ସପି ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ |

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ସ୍କ୍ରୋଲ୍ସପି ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ, କିମ୍ବା ଏହା ଆରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦିଏ |

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

ଘଟଣା

ଇଭେଣ୍ଟ ପ୍ରକାର | ବର୍ଣ୍ଣନା
show.bs.toast showଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ |
shown.bs.toast ଉପଭୋକ୍ତାଙ୍କୁ ଟୋଷ୍ଟ ଦୃଶ୍ୟମାନ ହେବାପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ |
hide.bs.toast hideଉଦାହରଣ ପଦ୍ଧତି ଡକାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ |
hidden.bs.toast ଯେତେବେଳେ ଟୋଷ୍ଟ ବ୍ୟବହାରକାରୀଙ୍କଠାରୁ ଲୁକ୍କାୟିତ ହୋଇସାରିଛି, ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})