in English

ଟୋଷ୍ଟ

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

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

ସମୀକ୍ଷା

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

  • ଯଦି ଆପଣ ଉତ୍ସରୁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ନିର୍ମାଣ କରୁଛନ୍ତି, ଏହା ଆବଶ୍ୟକ କରେutil.js |
  • କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ ଟୋଷ୍ଟଗୁଡିକ ଅପ୍ଟ-ଇନ୍ ଅଟେ, ତେଣୁ ଆପଣ ସେମାନଙ୍କୁ ନିଜେ ଆରମ୍ଭ କରିବା ଜରୁରୀ |
  • ଦୟାକରି ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଟୋଷ୍ଟଗୁଡିକ ପୋଜିସନ୍ ପାଇଁ ଆପଣ ଦାୟୀ ଅଟନ୍ତି |
  • ଯଦି ଆପଣ ନିର୍ଦ୍ଦିଷ୍ଟ ନକରନ୍ତି ତେବେ ଟୋଷ୍ଟଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଲୁଚିବ 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 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>

ଷ୍ଟାକିଂ

ଯେତେବେଳେ ଆପଣଙ୍କର ଏକାଧିକ ଟୋଷ୍ଟ ଅଛି, ଆମେ ଏକ ପ read ଼ିବା manner ଙ୍ଗରେ ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକିଂ କରିବାକୁ ଡିଫଲ୍ଟ |

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

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

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

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

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

ଜାଭାସ୍କ୍ରିପ୍ଟ ଆଚରଣ |

ବ୍ୟବହାର

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

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

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

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

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

ପ୍ରଣାଳୀ

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

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

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

$().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ଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ |
show.bs.toast ଉପଭୋକ୍ତାଙ୍କୁ ଟୋଷ୍ଟ ଦୃଶ୍ୟମାନ ହେବାପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ |
hide.bs.toast hideଉଦାହରଣ ପଦ୍ଧତି ଡକାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ |
hidden.bs.toast ଯେତେବେଳେ ଟୋଷ୍ଟ ବ୍ୟବହାରକାରୀଙ୍କଠାରୁ ଲୁକ୍କାୟିତ ହୋଇସାରିଛି, ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ |
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})