ਆਫਕੈਨਵਸ
ਕੁਝ ਕਲਾਸਾਂ ਅਤੇ ਸਾਡੇ 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"
ਲੋੜੀਂਦਾ ਹੈ.
ਆਫਕੈਨਵਸ
<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">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"
ਕਿਉਂਕਿ ਅਸੀਂ ਇਸਨੂੰ ਪਹਿਲਾਂ ਹੀ 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
ਸਮੱਗਰੀ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ.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
ਨੂੰ offcanvas ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਡਿਫੌਲਟ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਵਾਧੂ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ show
।
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 ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।
ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਇੱਕ ਆਫਕੈਨਵਸ ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਕਿਰਿਆਸ਼ੀਲ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ 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...
})