ഓഫ്കാൻവാസ്
കുറച്ച് ക്ലാസുകളും ഞങ്ങളുടെ JavaScript പ്ലഗിനും ഉപയോഗിച്ച് നാവിഗേഷൻ, ഷോപ്പിംഗ് കാർട്ടുകൾ എന്നിവയ്ക്കും അതിലേറെ കാര്യങ്ങൾക്കുമായി നിങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് മറഞ്ഞിരിക്കുന്ന സൈഡ്ബാറുകൾ നിർമ്മിക്കുക.
ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു
വ്യൂപോർട്ടിന്റെ ഇടത്, വലത് അല്ലെങ്കിൽ താഴെ അരികിൽ നിന്ന് ദൃശ്യമാകുന്നതിന് JavaScript വഴി ടോഗിൾ ചെയ്യാൻ കഴിയുന്ന ഒരു സൈഡ്ബാർ ഘടകമാണ് Offcanvas. നിങ്ങൾ ടോഗിൾ ചെയ്യുന്ന നിർദ്ദിഷ്ട ഘടകങ്ങളിൽ ഘടിപ്പിച്ചിരിക്കുന്ന ട്രിഗറുകളായി ബട്ടണുകൾ അല്ലെങ്കിൽ ആങ്കറുകൾ ഉപയോഗിക്കുന്നു, കൂടാതെ data
ഞങ്ങളുടെ JavaScript അഭ്യർത്ഥിക്കാൻ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നു.
- Offcanvas സമാന JavaScript കോഡുകളിൽ ചിലത് മോഡലുകളായി പങ്കിടുന്നു. ആശയപരമായി, അവ തികച്ചും സമാനമാണ്, പക്ഷേ അവ പ്രത്യേക പ്ലഗിനുകളാണ്.
- അതുപോലെ, ഓഫ്കാൻവാസിന്റെ ശൈലികൾക്കും അളവുകൾക്കുമുള്ള ചില സോഴ്സ് സാസ് വേരിയബിളുകൾ മോഡലിന്റെ വേരിയബിളുകളിൽ നിന്ന് പാരമ്പര്യമായി ലഭിക്കുന്നു.
- കാണിക്കുമ്പോൾ, ഓഫ്കാൻവാസിൽ ഒരു ഡിഫോൾട്ട് ബാക്ക്ഡ്രോപ്പ് ഉൾപ്പെടുന്നു, അത് ഓഫ്കാൻവാസ് മറയ്ക്കാൻ ക്ലിക്കുചെയ്യാനാകും.
- മോഡലുകൾക്ക് സമാനമായി, ഒരു സമയം ഒരു ഓഫ്കാൻവാസ് മാത്രമേ കാണിക്കാൻ കഴിയൂ.
ഹെഡ്സ് അപ്പുകൾ! CSS എങ്ങനെയാണ് ആനിമേഷനുകൾ കൈകാര്യം ചെയ്യുന്നത് എന്നതിനാൽ, നിങ്ങൾക്ക് ഒരു ഘടകത്തിൽ ഉപയോഗിക്കാനോ margin
ഉപയോഗിക്കാനോ കഴിയില്ല. പകരം, ഒരു സ്വതന്ത്ര റാപ്പിംഗ് ഘടകമായി ക്ലാസ് ഉപയോഗിക്കുക.translate
.offcanvas
prefers-reduced-motion
മീഡിയ അന്വേഷണത്തെ ആശ്രയിച്ചിരിക്കുന്നു. ഞങ്ങളുടെ പ്രവേശനക്ഷമത ഡോക്യുമെന്റേഷന്റെ കുറച്ച ചലന വിഭാഗം കാണുക
.
ഉദാഹരണങ്ങൾ
ഓഫ്കാൻവാസ് ഘടകങ്ങൾ
ഡിഫോൾട്ടായി കാണിക്കുന്ന ഒരു ഓഫ്കാൻവാസ് ഉദാഹരണം ചുവടെയുണ്ട് ( .show
ഓൺ വഴി .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>
ലൈവ് ഡെമോ
.show
ക്ലാസ് ഉപയോഗിച്ച് ഒരു ഘടകത്തിൽ ക്ലാസ് ടോഗിൾ ചെയ്യുന്ന JavaScript വഴി ഓഫ്കാൻവാസ് ഘടകം കാണിക്കാനും മറയ്ക്കാനും ചുവടെയുള്ള ബട്ടണുകൾ ഉപയോഗിക്കുക .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"
ജാവാസ്ക്രിപ്റ്റ് വഴി ഞങ്ങൾ ഇതിനകം ചേർത്തതിനാൽ നിങ്ങൾ ചേർക്കേണ്ടതില്ല എന്നത് ശ്രദ്ധിക്കുക .
സാസ്
വേരിയബിളുകൾ
$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"
ഒരു ഓഫ്കാൻവാസ് എലമെന്റിന്റെ നിയന്ത്രണം സ്വയമേവ നിയോഗിക്കുന്നതിന് ഘടകത്തിലേക്ക് ചേർക്കുകയും ചേർക്കുകയും data-bs-target
ചെയ്യുക . href
ഓഫ്കാൻവാസ് data-bs-target
പ്രയോഗിക്കാൻ ആട്രിബ്യൂട്ട് ഒരു CSS സെലക്ടറെ സ്വീകരിക്കുന്നു. 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 രീതികളും അസമന്വിതവും ഒരു പരിവർത്തനം ആരംഭിക്കുന്നതുമാണ് . പരിവർത്തനം ആരംഭിച്ചയുടൻ അവർ വിളിക്കുന്ന ആളിലേക്ക് മടങ്ങുന്നു, പക്ഷേ അത് അവസാനിക്കുന്നതിന് മുമ്പ് . കൂടാതെ, ഒരു സംക്രമണ ഘടകത്തിലെ ഒരു മെത്തേഡ് കോൾ അവഗണിക്കപ്പെടും .
കൂടുതൽ വിവരങ്ങൾക്ക് ഞങ്ങളുടെ 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 ഘടകവുമായി ബന്ധപ്പെട്ട ഓഫ്കാൻവാസ് ഇൻസ്റ്റൻസ് ലഭിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന സ്റ്റാറ്റിക് രീതി |
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...
})