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

ଅଫକାନଭାସ୍ |

ନାଭିଗେସନ୍, ସପିଂ କାର୍ଟ, ଏବଂ କିଛି କ୍ଲାସ୍ ଏବଂ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ଆପଣଙ୍କ ପ୍ରୋଜେକ୍ଟରେ ଲୁକ୍କାୟିତ ପାର୍ଶ୍ୱ ଦଣ୍ଡିକା ନିର୍ମାଣ କରନ୍ତୁ |

ଏହା କିପରି କାମ କରେ |

ଅଫକାନଭାସ୍ ହେଉଛି ଏକ ପାର୍ଶ୍ୱ ଦଣ୍ଡିକା ଉପାଦାନ ଯାହା ଭ୍ୟୁପୋର୍ଟର ବାମ, ଡାହାଣ କିମ୍ବା ତଳ ଧାରରୁ ଦେଖାଯିବା ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟୋଗଲ୍ ହୋଇପାରିବ | ବଟନ୍ କିମ୍ବା ଆଙ୍କର୍ ଟ୍ରିଗର ଭାବରେ ବ୍ୟବହୃତ ହୁଏ ଯାହାକି ତୁମେ ଟୋଗଲ୍ କରୁଥିବା ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନ ସହିତ ସଂଯୁକ୍ତ, ଏବଂ dataଆମର ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ଡାକିବା ପାଇଁ ଗୁଣଗୁଡ଼ିକ ବ୍ୟବହୃତ ହୁଏ |

  • ଅଫକାନଭାସ୍ ମୋଡାଲ୍ ପରି ସମାନ ଜାଭାସ୍କ୍ରିପ୍ଟ କୋଡ୍ ଅଂଶୀଦାର କରେ | ଧାରଣା ଅନୁଯାୟୀ, ସେଗୁଡ଼ିକ ସମ୍ପୂର୍ଣ୍ଣ ସମାନ, କିନ୍ତୁ ସେଗୁଡ଼ିକ ଅଲଗା ପ୍ଲଗଇନ୍ |
  • ସେହିଭଳି, ଅଫକାନଭାସ୍ ର ଶ yles ଳୀ ଏବଂ ପରିମାପ ପାଇଁ କିଛି ଉତ୍ସ ସାସ୍ ଭେରିଏବଲ୍ ମୋଡାଲ୍ ଭେରିଏବଲ୍ ରୁ ଉତ୍ତରାଧିକାରୀ |
  • ଯେତେବେଳେ ଦେଖାଯାଏ, ଅଫକାନଭାସ୍ ଏକ ଡିଫଲ୍ଟ ବ୍ୟାକଡ୍ରପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ଯାହା ଅଫକାନଭାସ୍ ଲୁଚାଇବା ପାଇଁ କ୍ଲିକ୍ କରାଯାଇପାରିବ |
  • ମୋଡାଲ ପରି, ଗୋଟିଏ ଥରରେ କେବଳ ଗୋଟିଏ ଅଫକାନଭା ଦେଖାଯାଇପାରିବ |

ମୁଣ୍ଡ ଉପରକୁ! CSS କିପରି ଆନିମେସନ୍ ନିୟନ୍ତ୍ରଣ କରେ, ଆପଣ ବ୍ୟବହାର କରିପାରିବେ ନାହିଁ marginକିମ୍ବା translateଏକ .offcanvasଉପାଦାନରେ | ଏହା ପରିବର୍ତ୍ତେ, ଶ୍ରେଣୀକୁ ଏକ ସ୍ independent ାଧୀନ ରାପିଙ୍ଗ୍ ଉପାଦାନ ଭାବରେ ବ୍ୟବହାର କରନ୍ତୁ |

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

ଉଦାହରଣଗୁଡିକ

ଅଫକାନଭାସ୍ ଉପାଦାନଗୁଡ଼ିକ |

ନିମ୍ନରେ ଏକ ଅଫକାନଭାସ୍ ଉଦାହରଣ ଅଛି ଯାହା ଡିଫଲ୍ଟ ଭାବରେ ଦେଖାଯାଏ ( .showଅନ ମାଧ୍ୟମରେ .offcanvas) | ଅଫକାନଭାସ୍ ଏକ କ୍ଲୋଜ୍ ବଟନ୍ ସହିତ ଏକ ହେଡର୍ ପାଇଁ ସମର୍ଥନ ଏବଂ କିଛି ପ୍ରାରମ୍ଭିକ ପାଇଁ ଏକ ବ body କଳ୍ପିକ ଶରୀର ଶ୍ରେଣୀ ଅନ୍ତର୍ଭୁକ୍ତ କରେ padding| ଆମେ ପରାମର୍ଶ ଦେଉଛୁ ଯେ ଆପଣ ଯେତେବେଳେ ବି ସମ୍ଭବ ବହିଷ୍କାର କାର୍ଯ୍ୟ ସହିତ ଅଫକାନଭାସ୍ ହେଡର୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ, କିମ୍ବା ଏକ ସ୍ପଷ୍ଟ ବହିଷ୍କାର କାର୍ଯ୍ୟ ପ୍ରଦାନ କରନ୍ତୁ |

ଅଫକାନଭାସ୍ |
ଅଫକାନଭାସ୍ ପାଇଁ ବିଷୟବସ୍ତୁ ଏଠାକୁ ଯାଏ | ଆପଣ ଏଠାରେ ଯେକ any ଣସି ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନ କିମ୍ବା କଷ୍ଟମ୍ ଉପାଦାନଗୁଡିକ ରଖିପାରିବେ |
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

ଲାଇଭ୍ ଡେମୋ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନ ଦେଖାଇବା ଏବଂ ଲୁଚାଇବା ପାଇଁ ନିମ୍ନରେ ଥିବା ବଟନ୍ଗୁଡ଼ିକୁ ବ୍ୟବହାର କରନ୍ତୁ ଯାହା .showଶ୍ରେଣୀ ସହିତ ଏକ ଉପାଦାନରେ ଶ୍ରେଣୀକୁ ଟୋଗଲ୍ କରେ .offcanvas|

  • .offcanvasବିଷୟବସ୍ତୁ ଲୁଚାଇଥାଏ (ଡିଫଲ୍ଟ)
  • .offcanvas.showବିଷୟବସ୍ତୁ ଦେଖାଏ |

ଆପଣ ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଏକ ଲିଙ୍କ୍ href, କିମ୍ବା ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଏକ ବଟନ୍ ବ୍ୟବହାର କରିପାରିବେ data-bs-target| ଉଭୟ କ୍ଷେତ୍ରରେ, data-bs-toggle="offcanvas"ଆବଶ୍ୟକ |

Href ସହିତ ଲିଙ୍କ୍ |
ଅଫକାନଭାସ୍ |
କିଛି ପାଠ୍ୟ ସ୍ଥାନଧାରୀ ଭାବରେ | ବାସ୍ତବ ଜୀବନରେ ତୁମେ ବାଛିଥିବା ଉପାଦାନଗୁଡିକ ପାଇପାରିବ | ଯେପରି, ପାଠ, ପ୍ରତିଛବି, ତାଲିକା ଇତ୍ୟାଦି |
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

ସ୍ଥାନ

ଅଫକାନଭାସ୍ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ କ default ଣସି ଡିଫଲ୍ଟ ପ୍ଲେସମେଣ୍ଟ୍ ନାହିଁ, ତେଣୁ ଆପଣଙ୍କୁ ନିମ୍ନରେ ଏକ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମଧ୍ୟରୁ ଗୋଟିଏ ଯୋଡିବାକୁ ପଡିବ |

  • .offcanvas-startଭ୍ୟୁପୋର୍ଟର ବାମ ପାର୍ଶ୍ୱରେ ଅଫକାନଭାସ୍ ରଖେ (ଉପରେ ଦେଖାଯାଇଛି)
  • .offcanvas-endଭ୍ୟୁପୋର୍ଟର ଡାହାଣ ପାର୍ଶ୍ୱରେ ଅଫକାନଭାସ୍ ରଖେ |
  • .offcanvas-topଭ୍ୟୁପୋର୍ଟର ଉପରେ ଅଫକାନଭାସ୍ ରଖେ |
  • .offcanvas-bottomଭ୍ୟୁପୋର୍ଟର ତଳେ ଅଫକାନଭାସ୍ ରଖେ |

ନିମ୍ନରେ ଉପର, ଡାହାଣ ଏବଂ ନିମ୍ନ ଉଦାହରଣଗୁଡିକ ଚେଷ୍ଟା କରନ୍ତୁ |

ଅଫକାନଭାସ୍ ଟପ୍ |
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
ଅଫକାନଭାସ୍ ଠିକ୍ |
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
ଅଫକାନଭାସ୍ ତଳ |
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

ପୃଷ୍ଠଭୂମି

<body>ଏକ ଅଫକାନଭାସ୍ ଏବଂ ଏହାର ପୃଷ୍ଠଭୂମି ଦୃଶ୍ୟମାନ ହେଲେ ଉପାଦାନ ସ୍କ୍ରୋଲ୍ ଅକ୍ଷମ ହୋଇଥାଏ | ସ୍କ୍ରୋଲିଂ ଟୋଗଲ୍ ଏବଂ ବ୍ୟାକଡ୍ରପ୍ ଟୋଗଲ୍ କରିବାକୁ data-bs-scrollଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରନ୍ତୁ |<body>data-bs-backdrop

ସ୍କ୍ରୋଲିଂ ସହିତ ରଙ୍ଗିତ |

ଏହି ବିକଳ୍ପକୁ କାର୍ଯ୍ୟରେ ଦେଖିବା ପାଇଁ ବାକି ପୃଷ୍ଠାକୁ ସ୍କ୍ରୋଲ୍ କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ |

ପୃଷ୍ଠଭୂମି ସହିତ ଅଫକାନଭାସ୍ |

.....

ସ୍କ୍ରୋଲିଂ ସହିତ ପୃଷ୍ଠଭୂମି |

ଏହି ବିକଳ୍ପକୁ କାର୍ଯ୍ୟରେ ଦେଖିବା ପାଇଁ ବାକି ପୃଷ୍ଠାକୁ ସ୍କ୍ରୋଲ୍ କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ |

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

ଅଭିଗମ୍ୟତା

aria-labelledby="..."ଯେହେତୁ ଅଫକାନଭାସ୍ ପ୍ୟାନେଲ୍ ଧାରଣାଗତ ଭାବରେ ଏକ ମୋଡାଲ୍ ସଂଳାପ, ତେଣୁ ଅଫକାନଭାସ୍ ଆଖ୍ୟାକୁ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ .offcanvas| ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଆପଣ ଯୋଡିବା ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ role="dialog"ଯେହେତୁ ଆମେ ଏହାକୁ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଯୋଡିଥାଉ |

ସାସ୍ |

ଭେରିଏବଲ୍ |

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;

ବ୍ୟବହାର

ଅଫକାନଭାସ୍ ପ୍ଲଗଇନ୍ ଭାରୀ ଉଠାଇବା ପାଇଁ କିଛି ଶ୍ରେଣୀ ଏବଂ ଗୁଣ ବ୍ୟବହାର କରେ:

  • .offcanvasବିଷୟବସ୍ତୁ ଲୁଚାଏ |
  • .offcanvas.showବିଷୟବସ୍ତୁ ଦେଖାଏ |
  • .offcanvas-startବାମ ପାର୍ଶ୍ୱରେ ଅଫକାନଭାସ୍ ଲୁଚାଏ |
  • .offcanvas-endଡାହାଣ ପାର୍ଶ୍ୱରେ ଅଫକାନଭାସ୍ ଲୁଚାଏ |
  • .offcanvas-bottomତଳେ ଥିବା ଅଫକାନଭାସ୍ ଲୁଚାଇଥାଏ |

ଗୁଣବତ୍ତା ସହିତ ଏକ ଖାରଜ ବଟନ୍ ଯୋଡନ୍ତୁ data-bs-dismiss="offcanvas", ଯାହା ଜାଭାସ୍କ୍ରିପ୍ଟ କାର୍ଯ୍ୟକାରିତାକୁ ଟ୍ରିଗର କରିଥାଏ | <button>ସମସ୍ତ ଡିଭାଇସରେ ସଠିକ୍ ଆଚରଣ ପାଇଁ ଏହା ସହିତ ଉପାଦାନ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |

ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଗୋଟିଏ ଅଫକାନଭାସ୍ ଉପାଦାନର ନିୟନ୍ତ୍ରଣ ନ୍ୟସ୍ତ କରିବାକୁ data-bs-toggle="offcanvas"ଏକ data-bs-targetକିମ୍ବା ଏକ ଉପାଦାନକୁ ଯୋଡନ୍ତୁ | hrefଅଫକାନଭାସ୍ data-bs-targetପ୍ରୟୋଗ କରିବାକୁ ଆଟ୍ରିବ୍ୟୁଟ୍ ଏକ CSS ଚୟନକର୍ତ୍ତା ଗ୍ରହଣ କରେ | offcanvasଅଫକାନଭାସ୍ ଉପାଦାନରେ କ୍ଲାସ୍ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | ଯଦି ଆପଣ ଏହାକୁ ଡିଫଲ୍ଟ ଖୋଲିବାକୁ ଚାହାଁନ୍ତି, ଅତିରିକ୍ତ ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ show|

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ସହିତ ମାନୁଆଲ୍ ସକ୍ଷମ କରନ୍ତୁ:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

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

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

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
backdrop ବୁଲିଅନ୍ true ଅଫକାନଭାସ୍ ଖୋଲା ଥିବାବେଳେ ଶରୀର ଉପରେ ଏକ ପୃଷ୍ଠଭୂମି ଲଗାନ୍ତୁ |
keyboard ବୁଲିଅନ୍ true ଏସ୍କେପ୍ ଚାବି ଦବାଇଲେ ଅଫକାନଭାସ୍ ବନ୍ଦ ହୋଇଯାଏ |
scroll ବୁଲିଅନ୍ false ଅଫକାନଭାସ୍ ଖୋଲା ଥିବାବେଳେ ଶରୀର ସ୍କ୍ରୋଲ୍ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତୁ |

ପ୍ରଣାଳୀ

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

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

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

ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନ ଭାବରେ ଆପଣଙ୍କର ବିଷୟବସ୍ତୁକୁ ସକ୍ରିୟ କରିଥାଏ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ object|

କନଷ୍ଟ୍ରକ୍ଟର ସହିତ ଆପଣ ଏକ ଅଫକାନଭାସ୍ ଉଦାହରଣ ସୃଷ୍ଟି କରିପାରିବେ, ଉଦାହରଣ ସ୍ୱରୂପ:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
ପଦ୍ଧତି ବର୍ଣ୍ଣନା
toggle ଦେଖାଯାଇଥିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପାଇଁ ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନକୁ ଟୋଗଲ୍ କରେ | ଅଫକାନଭାସ୍ ଉପାଦାନ ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲ୍ କରୁଥିବା ବ୍ୟକ୍ତିଙ୍କshown.bs.offcanvas ନିକଟକୁ ଫେରିଥାଏ hidden.bs.offcanvas|
show ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନ ଦେଖାଏ | ଅଫକାନଭାସ୍ ଉପାଦାନ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.offcanvasଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ |
hide ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନ ଲୁଚାଏ | ଅଫକାନଭାସ୍ ଉପାଦାନ ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.offcanvasଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ |
getInstance ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଅଫକାନଭାସ୍ ଉଦାହରଣ ପାଇବାକୁ ଅନୁମତି ଦିଏ |
getOrCreateInstance ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଅଫକାନଭାସ୍ ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ, କିମ୍ବା ଏହା ଆରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦିଏ |

ଘଟଣା

ବୁଟଷ୍ଟ୍ରାପର ଅଫକାନଭାସ୍ ଶ୍ରେଣୀ ଅଫକାନଭାସ୍ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଇଭେଣ୍ଟକୁ ପ୍ରକାଶ କରିଥାଏ |

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