ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
in English

ਆਫਕੈਨਵਸ

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

ਕਿਦਾ ਚਲਦਾ

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

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

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

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

ਉਦਾਹਰਨਾਂ

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

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

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

ਲਾਈਵ ਡੈਮੋ

JavaScript ਰਾਹੀਂ ਔਫਕੈਨਵਸ ਐਲੀਮੈਂਟ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੋ .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>

ਪਲੇਸਮੈਂਟ

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

  • .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">Backdrop 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"ਕਿਉਂਕਿ ਅਸੀਂ ਇਸਨੂੰ ਪਹਿਲਾਂ ਹੀ JavaScript ਰਾਹੀਂ ਜੋੜਦੇ ਹਾਂ।

ਸੱਸ

ਵੇਰੀਏਬਲ

$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-bottomਤਲ 'ਤੇ ਆਫਕੈਨਵਸ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ

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

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

ਟੌਗਲ ਕਰੋ

ਇੱਕ ਆਫਕੈਨਵਸ ਤੱਤ ਦੇ ਨਿਯੰਤਰਣ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਐਲੀਮੈਂਟ ਨੂੰ ਜੋੜੋ data-bs-toggle="offcanvas"ਅਤੇ a data-bs-targetਜਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ। hrefਔਫਕੈਨਵਸ data-bs-targetਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ CSS ਚੋਣਕਾਰ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੀ ਹੈ। ਕਲਾਸ 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>
ਹਾਲਾਂਕਿ ਇੱਕ ਆਫਕੈਨਵਸ ਨੂੰ ਖਾਰਜ ਕਰਨ ਦੇ ਦੋਵੇਂ ਤਰੀਕੇ ਸਮਰਥਿਤ ਹਨ, ਇਹ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ ਇੱਕ ਆਫਕੈਨਵਸ ਨੂੰ ਬਾਹਰੋਂ ਖਾਰਜ ਕਰਨਾ WAI-ARIA ਮਾਡਲ ਡਾਇਲਾਗ ਡਿਜ਼ਾਈਨ ਪੈਟਰਨ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ ਹੈ । ਇਹ ਆਪਣੇ ਜੋਖਮ 'ਤੇ ਕਰੋ।

JavaScript ਰਾਹੀਂ

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

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-bs-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-bs-backdrop=""

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

ਢੰਗ

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

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

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

ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਇੱਕ ਆਫਕੈਨਵਸ ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ 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 ਤੱਤ ਨਾਲ ਸੰਬੰਧਿਤ offcanvas ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ
getOrCreateInstance ਸਥਿਰ ਵਿਧੀ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ DOM ਐਲੀਮੈਂਟ ਨਾਲ ਸਬੰਧਿਤ offcanvas ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ, ਜਾਂ ਇੱਕ ਨਵਾਂ ਬਣਾਉਣ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਇਹ ਸ਼ੁਰੂ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਸੀ

ਸਮਾਗਮ

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

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.offcanvas ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ showਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
shown.bs.offcanvas ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਔਫਕੈਨਵਸ ਤੱਤ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
hide.bs.offcanvas hideਜਦੋਂ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਕੱਢ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ .
hidden.bs.offcanvas ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ offcanvas ਤੱਤ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})