ഓഫ്കാൻവാസ്

കുറച്ച് ക്ലാസുകളും ഞങ്ങളുടെ JavaScript പ്ലഗിനും ഉപയോഗിച്ച് നാവിഗേഷൻ, ഷോപ്പിംഗ് കാർട്ടുകൾ എന്നിവയ്‌ക്കും അതിലേറെ കാര്യങ്ങൾക്കുമായി നിങ്ങളുടെ പ്രോജക്‌റ്റിലേക്ക് മറഞ്ഞിരിക്കുന്ന സൈഡ്‌ബാറുകൾ നിർമ്മിക്കുക.

ഈ പേജിൽ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

വ്യൂപോർട്ടിന്റെ ഇടത്, വലത്, മുകളിൽ അല്ലെങ്കിൽ താഴെ അരികിൽ നിന്ന് ദൃശ്യമാകുന്നതിന് JavaScript വഴി ടോഗിൾ ചെയ്യാൻ കഴിയുന്ന ഒരു സൈഡ്ബാർ ഘടകമാണ് Offcanvas. നിങ്ങൾ ടോഗിൾ ചെയ്യുന്ന നിർദ്ദിഷ്‌ട ഘടകങ്ങളിൽ ഘടിപ്പിച്ചിരിക്കുന്ന ട്രിഗറുകളായി ബട്ടണുകൾ അല്ലെങ്കിൽ ആങ്കറുകൾ ഉപയോഗിക്കുന്നു, കൂടാതെ dataഞങ്ങളുടെ JavaScript അഭ്യർത്ഥിക്കാൻ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നു.

Offcanvas സമാന JavaScript കോഡുകളിൽ ചിലത് മോഡലുകളായി പങ്കിടുന്നു. ആശയപരമായി, അവ തികച്ചും സമാനമാണ്, പക്ഷേ അവ പ്രത്യേക പ്ലഗിനുകളാണ്.
അതുപോലെ, ഓഫ്‌കാൻവാസിന്റെ ശൈലികൾക്കും അളവുകൾക്കുമുള്ള ചില സോഴ്‌സ് സാസ് വേരിയബിളുകൾ മോഡലിന്റെ വേരിയബിളുകളിൽ നിന്ന് പാരമ്പര്യമായി ലഭിക്കുന്നു.
കാണിക്കുമ്പോൾ, ഓഫ്‌കാൻവാസിൽ ഒരു ഡിഫോൾട്ട് ബാക്ക്‌ഡ്രോപ്പ് ഉൾപ്പെടുന്നു, അത് ഓഫ്‌കാൻവാസ് മറയ്‌ക്കാൻ ക്ലിക്കുചെയ്യാനാകും.
മോഡലുകൾക്ക് സമാനമായി, ഒരു സമയം ഒരു ഓഫ്‌കാൻവാസ് മാത്രമേ കാണിക്കാൻ കഴിയൂ.

ഹെഡ്സ് അപ്പുകൾ! CSS എങ്ങനെയാണ് ആനിമേഷനുകൾ കൈകാര്യം ചെയ്യുന്നത് എന്നതിനാൽ, നിങ്ങൾക്ക് ഒരു ഘടകത്തിൽ ഉപയോഗിക്കാനോ marginഉപയോഗിക്കാനോ കഴിയില്ല. പകരം, ഒരു സ്വതന്ത്ര റാപ്പിംഗ് ഘടകമായി ക്ലാസ് ഉപയോഗിക്കുക.translate.offcanvas

ഈ ഘടകത്തിന്റെ ആനിമേഷൻ പ്രഭാവം prefers-reduced-motionമീഡിയ അന്വേഷണത്തെ ആശ്രയിച്ചിരിക്കുന്നു. ഞങ്ങളുടെ പ്രവേശനക്ഷമത ഡോക്യുമെന്റേഷന്റെ കുറച്ച ചലന വിഭാഗം കാണുക .

ഉദാഹരണങ്ങൾ

ഓഫ്കാൻവാസ് ഘടകങ്ങൾ

ഡിഫോൾട്ടായി കാണിക്കുന്ന ഒരു ഓഫ്‌കാൻവാസ് ഉദാഹരണം ചുവടെയുണ്ട് ( .showഓൺ വഴി .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>

ലൈവ് ഡെമോ

ജാവാസ്ക്രിപ്റ്റ് വഴി ഒരു ഓഫ്‌കാൻവാസ് ഘടകം കാണിക്കാനും മറയ്‌ക്കാനും ചുവടെയുള്ള ബട്ടണുകൾ ഉപയോഗിക്കുക, അത് .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"ജാവാസ്ക്രിപ്റ്റ് വഴി ഞങ്ങൾ ഇതിനകം ചേർത്തതിനാൽ നിങ്ങൾ ചേർക്കേണ്ടതില്ല എന്നത് ശ്രദ്ധിക്കുക .

സി.എസ്.എസ്

വേരിയബിളുകൾ

v5.2.0 ൽ ചേർത്തു

.offcanvasബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വികസിച്ചുകൊണ്ടിരിക്കുന്ന CSS വേരിയബിൾ സമീപനത്തിന്റെ ഭാഗമായി, മെച്ചപ്പെടുത്തിയ തത്സമയ ഇഷ്‌ടാനുസൃതമാക്കലിനായി ഓഫ്‌കാൻവാസ് ഇപ്പോൾ പ്രാദേശിക 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};

സാസ് വേരിയബിളുകൾ

$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"ഒരു ഓഫ്‌കാൻവാസ് ഘടകത്തിന്റെ നിയന്ത്രണം സ്വയമേവ നിയോഗിക്കുന്നതിന് ഘടകത്തിലേക്ക് ചേർക്കുകയും ചേർക്കുകയും 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>

ഒരു ഓഫ്‌കാൻവാസ് ഡിസ്മിസ് ചെയ്യുന്നതിനുള്ള രണ്ട് വഴികളും പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിലും, ഒരു ഓഫ്‌കാൻവാസിന് പുറത്ത് നിന്ന് ഡിസ്മിസ് ചെയ്യുന്നത് 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 ഘടകവുമായി ബന്ധപ്പെട്ട ഓഫ്‌കാൻവാസ് ഇൻസ്‌റ്റൻസ് ലഭിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന സ്റ്റാറ്റിക് രീതി.
`getOrCreateInstance`	ഒരു DOM ഘടകവുമായി ബന്ധപ്പെട്ട ഓഫ്‌കാൻവാസ് ഇൻസ്‌റ്റൻസ് ലഭിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന സ്റ്റാറ്റിക് രീതി, അല്ലെങ്കിൽ അത് ആരംഭിച്ചിട്ടില്ലെങ്കിൽ പുതിയൊരെണ്ണം സൃഷ്‌ടിക്കുക.
`hide`	ഒരു ഓഫ്‌കാൻവാസ് ഘടകം മറയ്ക്കുന്നു. ഓഫ്‌കാൻവാസ് ഘടകം യഥാർത്ഥത്തിൽ മറയ്ക്കുന്നതിന് മുമ്പ് (അതായത് `hidden.bs.offcanvas`ഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) കോളറിലേക്ക് മടങ്ങുന്നു.
`show`	ഒരു ഓഫ്‌കാൻവാസ് ഘടകം കാണിക്കുന്നു. ഓഫ്‌കാൻവാസ് ഘടകം യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് (അതായത് `shown.bs.offcanvas`ഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) കോളറിലേക്ക് മടങ്ങുന്നു.
`toggle`	ഒരു ഓഫ്‌കാൻവാസ് ഘടകം കാണിക്കുന്നതിനോ മറച്ചിരിക്കുന്നതിനോ ടോഗിൾ ചെയ്യുന്നു. ഓഫ്‌കാൻവാസ് ഘടകം യഥാർത്ഥത്തിൽ കാണിക്കുകയോ മറയ്‌ക്കുകയോ ചെയ്യുന്നതിനുമുമ്പ് (അതായത് `shown.bs.offcanvas`അല്ലെങ്കിൽ `hidden.bs.offcanvas`ഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) കോളറിലേക്ക് മടങ്ങുന്നു.

ഇവന്റുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഓഫ്‌കാൻവാസ് ക്ലാസ് ഓഫ്‌കാൻവാസ് പ്രവർത്തനത്തിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനായി കുറച്ച് ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു.

ഇവന്റ് തരം	വിവരണം
`hide.bs.offcanvas`	`hide`രീതി വിളിച്ചപ്പോൾ ഈ സംഭവം ഉടനടി വെടിവയ്ക്കുന്നു .
`hidden.bs.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...
})

ഓഫ്കാൻവാസ്

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഉദാഹരണങ്ങൾ

ഓഫ്കാൻവാസ് ഘടകങ്ങൾ

ഓഫ്കാൻവാസ്

ലൈവ് ഡെമോ

ഓഫ്കാൻവാസ്

ബോഡി സ്ക്രോളിംഗ്

ബോഡി സ്ക്രോളിംഗ് ഉള്ള ഓഫ്കാൻവാസ്

ബോഡി സ്ക്രോളിംഗും ബാക്ക്‌ഡ്രോപ്പും

സ്ക്രോളിംഗ് ഉള്ള ബാക്ക്‌ഡ്രോപ്പ്

സ്റ്റാറ്റിക് ബാക്ക്‌ഡ്രോപ്പ്

ഓഫ്കാൻവാസ്

ഇരുണ്ട ഓഫ്കാൻവാസ്

ഓഫ്കാൻവാസ്

പ്രതികരണശേഷിയുള്ള

പ്രതികരിക്കുന്ന ഓഫ്‌കാൻവാസ്

പ്ലേസ്മെന്റ്

ഓഫ്‌കാൻവാസ് ടോപ്പ്

ഓഫ്‌കാൻവാസ് വലത്

ഓഫ്കാൻവാസ് താഴെ

പ്രവേശനക്ഷമത

സി.എസ്.എസ്

വേരിയബിളുകൾ

സാസ് വേരിയബിളുകൾ

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

ടോഗിൾ ചെയ്യുക

പിരിച്ചുവിടുക

JavaScript വഴി

ഓപ്ഷനുകൾ

രീതികൾ

അസിൻക്രണസ് രീതികളും പരിവർത്തനങ്ങളും

ഇവന്റുകൾ