ਆਫਕੈਨਵਸ

ਕੁਝ ਕਲਾਸਾਂ ਅਤੇ ਸਾਡੇ JavaScript ਪਲੱਗਇਨ ਨਾਲ ਨੈਵੀਗੇਸ਼ਨ, ਸ਼ਾਪਿੰਗ ਕਾਰਟਸ ਅਤੇ ਹੋਰ ਲਈ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਲੁਕਵੇਂ ਸਾਈਡਬਾਰ ਬਣਾਓ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਕਿਦਾ ਚਲਦਾ

ਔਫਕੈਨਵਸ ਇੱਕ ਸਾਈਡਬਾਰ ਕੰਪੋਨੈਂਟ ਹੈ ਜਿਸ ਨੂੰ ਵਿਊਪੋਰਟ ਦੇ ਖੱਬੇ, ਸੱਜੇ, ਉੱਪਰ, ਜਾਂ ਹੇਠਲੇ ਕਿਨਾਰੇ ਤੋਂ ਵਿਖਾਈ ਦੇਣ ਲਈ JavaScript ਰਾਹੀਂ ਟੌਗਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਬਟਨਾਂ ਜਾਂ ਐਂਕਰਾਂ ਨੂੰ ਟਰਿਗਰਾਂ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਦੁਆਰਾ ਟੌਗਲ ਕਰਦੇ ਹੋਏ ਖਾਸ ਤੱਤਾਂ ਨਾਲ ਜੁੜੇ ਹੁੰਦੇ ਹਨ, ਅਤੇ dataਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸਾਡੀ JavaScript ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।

Offcanvas ਕੁਝ ਸਮਾਨ JavaScript ਕੋਡ ਨੂੰ ਮਾਡਲਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਸਾਂਝਾ ਕਰਦਾ ਹੈ। ਸੰਕਲਪਿਕ ਤੌਰ 'ਤੇ, ਉਹ ਕਾਫ਼ੀ ਸਮਾਨ ਹਨ, ਪਰ ਉਹ ਵੱਖਰੇ ਪਲੱਗਇਨ ਹਨ।
ਇਸੇ ਤਰ੍ਹਾਂ, ਔਫਕੈਨਵਸ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਅਤੇ ਮਾਪਾਂ ਲਈ ਕੁਝ ਸਰੋਤ ਸਾਸ ਵੇਰੀਏਬਲ ਮਾਡਲ ਦੇ ਵੇਰੀਏਬਲ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੇ ਗਏ ਹਨ।
ਦਿਖਾਏ ਜਾਣ 'ਤੇ, offcanvas ਵਿੱਚ ਇੱਕ ਡਿਫੌਲਟ ਬੈਕਡ੍ਰੌਪ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਜਿਸਨੂੰ offcanvas ਨੂੰ ਲੁਕਾਉਣ ਲਈ ਕਲਿੱਕ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਮਾਡਲਾਂ ਵਾਂਗ, ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਸਿਰਫ਼ ਇੱਕ ਆਫ਼ਕੈਨਵਸ ਦਿਖਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।

ਸਿਰ! CSS ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਕਿਵੇਂ ਹੈਂਡਲ ਕਰਦਾ ਹੈ, ਇਸ ਨੂੰ ਦੇਖਦੇ ਹੋਏ, ਤੁਸੀਂ ਕਿਸੇ ਤੱਤ ਦੀ ਵਰਤੋਂ marginਜਾਂ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਸਦੀ ਬਜਾਏ, ਕਲਾਸ ਨੂੰ ਇੱਕ ਸੁਤੰਤਰ ਰੈਪਿੰਗ ਐਲੀਮੈਂਟ ਵਜੋਂ ਵਰਤੋ।translate.offcanvas

ਇਸ ਕੰਪੋਨੈਂਟ ਦਾ ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਭਾਵ prefers-reduced-motionਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ ।

ਉਦਾਹਰਨਾਂ

ਆਫਕੈਨਵਸ ਕੰਪੋਨੈਂਟ

.showਹੇਠਾਂ ਇੱਕ ਆਫਕੈਨਵਸ ਉਦਾਹਰਨ ਹੈ ਜੋ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਦਿਖਾਈ ਗਈ ਹੈ ( ਦੁਆਰਾ .offcanvas)। Offcanvas ਵਿੱਚ ਬੰਦ ਬਟਨ ਦੇ ਨਾਲ ਇੱਕ ਸਿਰਲੇਖ ਲਈ ਸਮਰਥਨ ਅਤੇ ਕੁਝ ਸ਼ੁਰੂਆਤੀ ਲਈ ਇੱਕ ਵਿਕਲਪਿਕ ਬਾਡੀ ਕਲਾਸ ਸ਼ਾਮਲ ਹੈ padding। ਅਸੀਂ ਸੁਝਾਅ ਦਿੰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ ਬਰਖਾਸਤ ਕਰਨ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਦੇ ਨਾਲ ਆਫਕੈਨਵਸ ਸਿਰਲੇਖ ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਖਾਰਜ ਕਰਨ ਦੀ ਕਾਰਵਾਈ ਪ੍ਰਦਾਨ ਕਰੋ।

ਆਫਕੈਨਵਸ ਲਈ ਸਮੱਗਰੀ ਇੱਥੇ ਜਾਂਦੀ ਹੈ। ਤੁਸੀਂ ਇੱਥੇ ਕੋਈ ਵੀ ਬੂਟਸਟਰੈਪ ਕੰਪੋਨੈਂਟ ਜਾਂ ਕਸਟਮ ਐਲੀਮੈਂਟਸ ਰੱਖ ਸਕਦੇ ਹੋ।

html

<div class="offcanvas offcanvas-start show" 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" 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>

ਲਾਈਵ ਡੈਮੋ

JavaScript ਰਾਹੀਂ ਔਫਕੈਨਵਸ ਐਲੀਮੈਂਟ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੋ .showਕਲਾਸ ਦੇ ਨਾਲ ਕਿਸੇ ਐਲੀਮੈਂਟ 'ਤੇ ਕਲਾਸ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ .offcanvas।

.offcanvasਸਮੱਗਰੀ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ (ਮੂਲ)
.offcanvas.showਸਮੱਗਰੀ ਦਿਖਾਉਂਦਾ ਹੈ

ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਲਿੰਕ href, ਜਾਂ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ data-bs-target। ਦੋਵਾਂ ਮਾਮਲਿਆਂ ਵਿੱਚ, data-bs-toggle="offcanvas"ਲੋੜੀਂਦਾ ਹੈ.

href ਨਾਲ ਲਿੰਕ ਕਰੋ

ਪਲੇਸਹੋਲਡਰ ਵਜੋਂ ਕੁਝ ਟੈਕਸਟ। ਅਸਲ ਜੀਵਨ ਵਿੱਚ ਤੁਹਾਡੇ ਕੋਲ ਉਹ ਤੱਤ ਹੋ ਸਕਦੇ ਹਨ ਜੋ ਤੁਸੀਂ ਚੁਣੇ ਹਨ। ਜਿਵੇਂ, ਟੈਕਸਟ, ਚਿੱਤਰ, ਸੂਚੀਆਂ, ਆਦਿ।

html

<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

ਬਾਡੀ ਸਕ੍ਰੋਲਿੰਗ

<body>ਜਦੋਂ ਇੱਕ ਆਫਕੈਨਵਸ ਅਤੇ ਇਸਦਾ ਬੈਕਡ੍ਰੌਪ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਤਾਂ ਤੱਤ ਨੂੰ ਸਕ੍ਰੌਲ ਕਰਨਾ ਅਸਮਰੱਥ ਹੁੰਦਾ ਹੈ। ਸਕ੍ਰੋਲਿੰਗ data-bs-scrollਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰੋ ।<body>

ਇਸ ਵਿਕਲਪ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਣ ਲਈ ਬਾਕੀ ਪੰਨੇ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

ਬਾਡੀ ਸਕ੍ਰੋਲਿੰਗ ਅਤੇ ਬੈਕਡ੍ਰੌਪ

<body>ਤੁਸੀਂ ਇੱਕ ਦ੍ਰਿਸ਼ਮਾਨ ਬੈਕਡ੍ਰੌਪ ਨਾਲ ਸਕ੍ਰੋਲਿੰਗ ਨੂੰ ਵੀ ਸਮਰੱਥ ਕਰ ਸਕਦੇ ਹੋ ।

ਇਸ ਵਿਕਲਪ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਣ ਲਈ ਬਾਕੀ ਪੰਨੇ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

html

<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" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" 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>

ਸਥਿਰ ਬੈਕਡ੍ਰੌਪ

ਜਦੋਂ ਬੈਕਡ੍ਰੌਪ ਨੂੰ ਸਥਿਰ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸ ਤੋਂ ਬਾਹਰ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਆਫਕੈਨਵਸ ਬੰਦ ਨਹੀਂ ਹੋਵੇਗਾ।

ਜੇਕਰ ਤੁਸੀਂ ਮੇਰੇ ਤੋਂ ਬਾਹਰ ਕਲਿੱਕ ਕਰੋ ਤਾਂ ਮੈਂ ਬੰਦ ਨਹੀਂ ਕਰਾਂਗਾ।

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

ਗੂੜ੍ਹਾ ਆਫਕੈਨਵਸ

v5.2.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

ਵੱਖ-ਵੱਖ ਸੰਦਰਭਾਂ ਜਿਵੇਂ ਕਿ ਡਾਰਕ ਨੇਵਬਾਰਜ਼ ਨਾਲ ਬਿਹਤਰ ਮੇਲ ਕਰਨ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ ਆਫਕੈਨਵੇਸ ਦੀ ਦਿੱਖ ਨੂੰ ਬਦਲੋ। ਇੱਥੇ ਅਸੀਂ ਇੱਕ ਗੂੜ੍ਹੇ ਆਫਕੈਨਵਸ ਦੇ ਨਾਲ ਸਹੀ ਸਟਾਈਲ ਲਈ .text-bg-darkਅਤੇ ਵਿੱਚ .offcanvasਜੋੜਦੇ .btn-close-whiteਹਾਂ । .btn-closeਜੇਕਰ ਤੁਹਾਡੇ ਅੰਦਰ ਡ੍ਰੌਪਡਾਉਨ ਹਨ, ਤਾਂ ਇਸ ਵਿੱਚ ਸ਼ਾਮਲ .dropdown-menu-darkਕਰਨ ਬਾਰੇ ਵੀ ਵਿਚਾਰ ਕਰੋ .dropdown-menu।

ਕੈਨਵਸ ਸਮੱਗਰੀ ਨੂੰ ਇੱਥੇ ਰੱਖੋ।

html

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

ਜਵਾਬਦੇਹ

v5.2.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

ਜਵਾਬਦੇਹ ਆਫਕੈਨਵਸ ਕਲਾਸਾਂ ਵਿਊਪੋਰਟ ਦੇ ਬਾਹਰ ਇੱਕ ਨਿਸ਼ਚਿਤ ਬ੍ਰੇਕਪੁਆਇੰਟ ਅਤੇ ਡਾਊਨ ਤੋਂ ਸਮੱਗਰੀ ਨੂੰ ਲੁਕਾਉਂਦੀਆਂ ਹਨ। ਉਸ ਬ੍ਰੇਕਪੁਆਇੰਟ ਦੇ ਉੱਪਰ, ਅੰਦਰਲੀ ਸਮੱਗਰੀ ਆਮ ਵਾਂਗ ਵਿਵਹਾਰ ਕਰੇਗੀ। ਉਦਾਹਰਨ ਲਈ, ਬ੍ਰੇਕਪੁਆਇੰਟ .offcanvas-lgਦੇ ਹੇਠਾਂ ਇੱਕ ਆਫਕੈਨਵਸ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ lg, ਪਰ ਸਮੱਗਰੀ ਨੂੰ ਬ੍ਰੇਕਪੁਆਇੰਟ ਦੇ ਉੱਪਰ ਦਿਖਾਉਂਦਾ ਹੈ lg।

ਜਵਾਬਦੇਹ ਆਫਕੈਨਵਸ ਟੌਗਲ ਦਿਖਾਉਣ ਲਈ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਕਾਰ ਬਦਲੋ।

ਇਹ ਇੱਕ ਦੇ ਅੰਦਰ ਸਮੱਗਰੀ ਹੈ .offcanvas-lg.

html

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

ਜਵਾਬਦੇਹ ਆਫਕੈਨਵਸ ਕਲਾਸਾਂ ਹਰੇਕ ਬ੍ਰੇਕਪੁਆਇੰਟ ਲਈ ਉਪਲਬਧ ਹਨ।

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

ਪਲੇਸਮੈਂਟ

ਆਫਕੈਨਵਸ ਕੰਪੋਨੈਂਟਸ ਲਈ ਕੋਈ ਡਿਫੌਲਟ ਪਲੇਸਮੈਂਟ ਨਹੀਂ ਹੈ, ਇਸਲਈ ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਸੋਧਕ ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਇੱਕ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

.offcanvas-startਵਿਊਪੋਰਟ ਦੇ ਖੱਬੇ ਪਾਸੇ ਆਫਕੈਨਵਸ ਰੱਖਦਾ ਹੈ (ਉੱਪਰ ਦਿਖਾਇਆ ਗਿਆ)
.offcanvas-endਆਫਕੈਨਵਸ ਨੂੰ ਵਿਊਪੋਰਟ ਦੇ ਸੱਜੇ ਪਾਸੇ ਰੱਖਦਾ ਹੈ
.offcanvas-topਆਫਕੈਨਵਸ ਨੂੰ ਵਿਊਪੋਰਟ ਦੇ ਸਿਖਰ 'ਤੇ ਰੱਖਦਾ ਹੈ
.offcanvas-bottomਆਫਕੈਨਵਸ ਨੂੰ ਵਿਊਪੋਰਟ ਦੇ ਹੇਠਾਂ ਰੱਖਦਾ ਹੈ

ਹੇਠਾਂ ਉੱਪਰ, ਸੱਜੇ ਅਤੇ ਹੇਠਲੇ ਉਦਾਹਰਨਾਂ ਨੂੰ ਅਜ਼ਮਾਓ।

...

html

<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

ਪਹੁੰਚਯੋਗਤਾ

ਕਿਉਂਕਿ ਆਫਕੈਨਵਸ ਪੈਨਲ ਸੰਕਲਪਿਕ ਤੌਰ 'ਤੇ ਇੱਕ ਮਾਡਲ ਡਾਇਲਾਗ ਹੈ, aria-labelledby="..."ਇਸ ਲਈ -ਆਫਕੈਨਵਸ ਟਾਈਟਲ ਦਾ ਹਵਾਲਾ ਦਿੰਦੇ ਹੋਏ — ਨੂੰ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ .offcanvas। ਨੋਟ ਕਰੋ ਕਿ ਤੁਹਾਨੂੰ ਜੋੜਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ role="dialog"ਕਿਉਂਕਿ ਅਸੀਂ ਇਸਨੂੰ ਪਹਿਲਾਂ ਹੀ JavaScript ਰਾਹੀਂ ਜੋੜਦੇ ਹਾਂ।

CSS

ਵੇਰੀਏਬਲ

v5.2.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

ਬੂਟਸਟਰੈਪ ਦੀ ਵਿਕਸਿਤ ਹੋ ਰਹੀ CSS ਵੇਰੀਏਬਲ ਪਹੁੰਚ ਦੇ ਹਿੱਸੇ ਵਜੋਂ, offcanvas ਹੁਣ .offcanvasਵਧੇ ਹੋਏ ਰੀਅਲ-ਟਾਈਮ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। CSS ਵੇਰੀਏਬਲ ਲਈ ਮੁੱਲ Sass ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ, ਇਸਲਈ Sass ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਅਜੇ ਵੀ ਸਮਰਥਿਤ ਹੈ।

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass ਵੇਰੀਏਬਲ

$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-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

ਵਰਤੋਂ

ਔਫਕੈਨਵਸ ਪਲੱਗਇਨ ਭਾਰੀ ਲਿਫਟਿੰਗ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕੁਝ ਸ਼੍ਰੇਣੀਆਂ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ:

.offcanvasਸਮੱਗਰੀ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ
.offcanvas.showਸਮੱਗਰੀ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ
.offcanvas-startਔਫਕੈਨਵਸ ਨੂੰ ਖੱਬੇ ਪਾਸੇ ਲੁਕਾਉਂਦਾ ਹੈ
.offcanvas-endਆਫਕੈਨਵਸ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਲੁਕਾਉਂਦਾ ਹੈ
.offcanvas-topਸਿਖਰ 'ਤੇ ਆਫਕੈਨਵਸ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ
.offcanvas-bottomਤਲ 'ਤੇ ਆਫਕੈਨਵਸ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ

ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਖਾਰਜ ਬਟਨ ਸ਼ਾਮਲ ਕਰੋ data-bs-dismiss="offcanvas", ਜੋ JavaScript ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਚਾਲੂ ਕਰਦਾ ਹੈ। <button>ਸਾਰੀਆਂ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸਹੀ ਵਿਵਹਾਰ ਲਈ ਇਸਦੇ ਨਾਲ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਟੌਗਲ ਕਰੋ

ਇੱਕ ਆਫਕੈਨਵਸ ਤੱਤ ਦੇ ਨਿਯੰਤਰਣ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਐਲੀਮੈਂਟ ਨੂੰ ਜੋੜੋ data-bs-toggle="offcanvas"ਅਤੇ a data-bs-targetਜਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ। hrefਔਫਕੈਨਵਸ data-bs-targetਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ CSS ਚੋਣਕਾਰ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੀ ਹੈ। ਕਲਾਸ offcanvasਨੂੰ offcanvas ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਡਿਫੌਲਟ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਵਾਧੂ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ show।

ਖਾਰਜ ਕਰੋ

ਹੇਠਾਂ ਦਰਸਾਏ ਅਨੁਸਾਰ ਆਫਕੈਨਵਸ ਦੇ ਅੰਦਰdata ਇੱਕ ਬਟਨ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਬਰਖਾਸਤਗੀ ਪ੍ਰਾਪਤ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ :

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

ਜਾਂ ਆਫਕੈਨਵਸ ਦੇ ਬਾਹਰ ਇੱਕ ਬਟਨ 'ਤੇ ਜਿਵੇਂ data-bs-targetਕਿ ਹੇਠਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ:

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

ਹਾਲਾਂਕਿ ਆਫਕੈਨਵਸ ਨੂੰ ਖਾਰਜ ਕਰਨ ਦੇ ਦੋਵੇਂ ਤਰੀਕੇ ਸਮਰਥਿਤ ਹਨ, ਇਹ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ ਇੱਕ ਆਫਕੈਨਵਸ ਨੂੰ ਬਾਹਰੋਂ ਖਾਰਜ ਕਰਨਾ ARIA ਆਥਰਿੰਗ ਪ੍ਰੈਕਟਿਸ ਗਾਈਡ ਡਾਇਲਾਗ (ਮੋਡਲ) ਪੈਟਰਨ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ ਹੈ । ਇਹ ਆਪਣੇ ਜੋਖਮ 'ਤੇ ਕਰੋ।

JavaScript ਰਾਹੀਂ

ਇਸ ਨਾਲ ਹੱਥੀਂ ਯੋਗ ਕਰੋ:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

ਵਿਕਲਪ

ਜਿਵੇਂ ਕਿ ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਤੁਸੀਂ ਇੱਕ ਵਿਕਲਪ ਦਾ ਨਾਮ ਜੋੜ ਸਕਦੇ ਹੋ 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}'.

ਨਾਮ	ਟਾਈਪ ਕਰੋ	ਡਿਫਾਲਟ	ਵਰਣਨ
`backdrop`	ਬੂਲੀਅਨ ਜਾਂ ਸਤਰ`static`	`true`	ਜਦੋਂ ਆਫਕੈਨਵਸ ਖੁੱਲ੍ਹਾ ਹੋਵੇ ਤਾਂ ਬਾਡੀ 'ਤੇ ਬੈਕਡ੍ਰੌਪ ਲਗਾਓ। ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, `static`ਇੱਕ ਬੈਕਡ੍ਰੌਪ ਲਈ ਨਿਸ਼ਚਿਤ ਕਰੋ ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਆਫਕੈਨਵਸ ਨੂੰ ਬੰਦ ਨਹੀਂ ਕਰਦਾ ਹੈ।
`keyboard`	ਬੁਲੀਅਨ	`true`	ਐਸਕੇਪ ਕੁੰਜੀ ਦਬਾਉਣ 'ਤੇ ਆਫਕੈਨਵਸ ਬੰਦ ਹੋ ਜਾਂਦਾ ਹੈ।
`scroll`	ਬੁਲੀਅਨ	`false`	ਔਫਕੈਨਵਸ ਖੁੱਲ੍ਹੇ ਹੋਣ 'ਤੇ ਬਾਡੀ ਸਕ੍ਰੋਲਿੰਗ ਦੀ ਇਜਾਜ਼ਤ ਦਿਓ।

ਢੰਗ

ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਤਬਦੀਲੀਆਂ

ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।

ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡ�� JavaScript ਦਸਤਾਵੇਜ਼ ਵੇਖੋ ।

ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਇੱਕ ਆਫਕੈਨਵਸ ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object।

ਤੁਸੀਂ ਕੰਸਟਰਕਟਰ ਨਾਲ ਇੱਕ ਆਫਕੈਨਵਸ ਉਦਾਹਰਨ ਬਣਾ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

ਢੰਗ	ਵਰਣਨ
`getInstance`	ਸਥਿਰ ਵਿਧੀ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ DOM ਤੱਤ ਨਾਲ ਸੰਬੰਧਿਤ offcanvas ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ।
`getOrCreateInstance`	ਸਥਿਰ ਵਿਧੀ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ DOM ਐਲੀਮੈਂਟ ਨਾਲ ਸੰਬੰਧਿਤ ਆਫਕੈਨਵਸ ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ, ਜਾਂ ਇੱਕ ਨਵਾਂ ਬਣਾਉਣ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਇਹ ਸ਼ੁਰੂ ਨਹੀਂ ਕੀਤੀ ਗਈ ਸੀ।
`hide`	ਇੱਕ ਆਫਕੈਨਵਸ ਤੱਤ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਆਫਕੈਨਵਸ ਐਲੀਮੈਂਟ ਨੂੰ ਅਸਲ ਵਿੱਚ ਲੁਕਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ `hidden.bs.offcanvas`ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
`show`	ਇੱਕ ਆਫਕੈਨਵਸ ਤੱਤ ਦਿਖਾਉਂਦਾ ਹੈ। ਆਫਕੈਨਵਸ ਐਲੀਮੈਂਟ ਨੂੰ ਅਸਲ ਵਿੱਚ ਦਰਸਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ `shown.bs.offcanvas`ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
`toggle`	ਇੱਕ ਆਫਕੈਨਵਸ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਉਣ ਲਈ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਆਫਕੈਨਵਸ ਐਲੀਮੈਂਟ ਦੇ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ (ਭਾਵ `shown.bs.offcanvas`ਜਾਂ `hidden.bs.offcanvas`ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਆਫਕੈਨਵਸ ਕਲਾਸ ਆਫਕੈਨਵਸ ਫੰਕਸ਼ਨੈਲਿਟੀ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਇਵੈਂਟਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।

ਘਟਨਾ ਦੀ ਕਿਸਮ	ਵਰਣਨ
`hide.bs.offcanvas`	`hide`ਜਦੋਂ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਕੱਢ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ .
`hidden.bs.offcanvas`	ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ offcanvas ਤੱਤ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
`hidePrevented.bs.offcanvas`	ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਆਫਕੈਨਵਸ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ, ਇਸਦਾ ਬੈਕਡ੍ਰੌਪ ਹੁੰਦਾ ਹੈ `static`ਅਤੇ ਆਫਕੈਨਵਸ ਦੇ ਬਾਹਰ ਇੱਕ ਕਲਿਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਵੈਂਟ ਨੂੰ ਉਦੋਂ ਵੀ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਏਸਕੇਪ ਕੁੰਜੀ ਨੂੰ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ ਅਤੇ `keyboard`ਵਿਕਲਪ ਨੂੰ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ `false`।
`show.bs.offcanvas`	ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ `show`ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
`shown.bs.offcanvas`	ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਔਫਕੈਨਵਸ ਤੱਤ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

ਆਫਕੈਨਵਸ

ਕਿਦਾ ਚਲਦਾ

ਉਦਾਹਰਨਾਂ

ਆਫਕੈਨਵਸ ਕੰਪੋਨੈਂਟ

ਆਫਕੈਨਵਸ

ਲਾਈਵ ਡੈਮੋ

ਆਫਕੈਨਵਸ

ਬਾਡੀ ਸਕ੍ਰੋਲਿੰਗ

ਬਾਡੀ ਸਕ੍ਰੋਲਿੰਗ ਦੇ ਨਾਲ ਆਫਕੈਨਵਸ

ਬਾਡੀ ਸਕ੍ਰੋਲਿੰਗ ਅਤੇ ਬੈਕਡ੍ਰੌਪ

ਸਕ੍ਰੋਲਿੰਗ ਨਾਲ ਬੈਕਡ੍ਰੌਪ

ਸਥਿਰ ਬੈਕਡ੍ਰੌਪ

ਆਫਕੈਨਵਸ

ਗੂੜ੍ਹਾ ਆਫਕੈਨਵਸ

ਆਫਕੈਨਵਸ

ਜਵਾਬਦੇਹ

ਜਵਾਬਦੇਹ ਆਫਕੈਨਵਸ

ਪਲੇਸਮੈਂਟ

ਆਫਕੈਨਵਸ ਸਿਖਰ

ਆਫਕੈਨਵਸ ਸੱਜੇ

ਆਫਕੈਨਵਸ ਹੇਠਾਂ

ਪਹੁੰਚਯੋਗਤਾ

CSS

ਵੇਰੀਏਬਲ

Sass ਵੇਰੀਏਬਲ

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਟੌਗਲ ਕਰੋ

ਖਾਰਜ ਕਰੋ

JavaScript ਰਾਹੀਂ

ਵਿਕਲਪ

ਢੰਗ

ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਤਬਦੀਲੀਆਂ

ਸਮਾਗਮ