in English

ઑફકેનવાસ

થોડા વર્ગો અને અમારા JavaScript પ્લગઇન સાથે નેવિગેશન, શોપિંગ કાર્ટ અને વધુ માટે તમારા પ્રોજેક્ટમાં છુપાયેલા સાઇડબાર બનાવો.

આ પૃષ્ઠ પર

તે કેવી રીતે કામ કરે છે

Offcanvas એ સાઇડબાર ઘટક છે જે વ્યુપોર્ટની ડાબી, જમણી, ઉપર અથવા નીચેની ધારથી દેખાવા માટે JavaScript દ્વારા ટૉગલ કરી શકાય છે. બટનો અથવા એન્કરનો ઉપયોગ ટ્રિગર્સ તરીકે થાય છે જે તમે ટૉગલ કરો છો તે વિશિષ્ટ ઘટકો સાથે જોડાયેલા હોય છે, અને dataવિશેષતાઓનો ઉપયોગ અમારી JavaScriptને શરૂ કરવા માટે થાય છે.

Offcanvas મોડલ તરીકે સમાન JavaScript કોડને શેર કરે છે. વૈચારિક રીતે, તેઓ તદ્દન સમાન છે, પરંતુ તેઓ અલગ પ્લગઈનો છે.
તેવી જ રીતે, ઓફકેનવાસની શૈલીઓ અને પરિમાણો માટેના કેટલાક સ્ત્રોત Sass ચલ મોડલના ચલોમાંથી વારસામાં મળે છે.
જ્યારે બતાવવામાં આવે ત્યારે, ઑફકેનવાસમાં ડિફૉલ્ટ બેકડ્રોપનો સમાવેશ થાય છે જેને ઑફકેનવાસ છુપાવવા માટે ક્લિક કરી શકાય છે.
મોડલ્સની જેમ, એક સમયે માત્ર એક જ ઑફકેનવાસ બતાવી શકાય છે.

હેડ અપ! 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>

લાઈવ ડેમો

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ઑફકેનવાસ ઘટકમાં વર્ગ ઉમેરવાની ખાતરી કરો . જો તમે તેને ડિફોલ્ટ ખોલવા માંગતા હો, તો વધારાનો વર્ગ ઉમેરો 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))

વિકલ્પો

data-bs-ડેટા એટ્રિબ્યુટ્સ અથવા JavaScript દ્વારા વિકલ્પો પસાર કરી શકાય છે, તમે ની જેમ, માં વિકલ્પ નામ ઉમેરી શકો છો data-bs-animation="{value}". ડેટા એટ્રિબ્યુટ્સ દ્વારા વિકલ્પો પસાર કરતી વખતે વિકલ્પ નામના કેસ પ્રકારને “ camelCase ” થી “ kebab-case ” માં બદલવાની ખાતરી કરો. ઉદાહરણ તરીકે, 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...
})

ઑફકેનવાસ

તે કેવી રીતે કામ કરે છે

ઉદાહરણો

ઑફકેનવાસ ઘટકો

ઑફકેનવાસ

લાઈવ ડેમો

ઑફકેનવાસ

બોડી સ્ક્રોલિંગ

બોડી સ્ક્રોલિંગ સાથે ઓફકેનવાસ

બોડી સ્ક્રોલિંગ અને બેકડ્રોપ

સ્ક્રોલિંગ સાથે બેકડ્રોપ

સ્થિર પૃષ્ઠભૂમિ

ઑફકેનવાસ

ડાર્ક ઑફ કેનવાસ

ઑફકેનવાસ

પ્રતિભાવશીલ

રિસ્પોન્સિવ ઑફકેનવાસ

પ્લેસમેન્ટ

ઑફકેનવાસ ટોચ

ઑફકેનવાસ અધિકાર

ઑફકેનવાસ નીચે

ઉપલ્બધતા

CSS

ચલો

Sass ચલો

ઉપયોગ

ડેટા લક્ષણો દ્વારા

ટૉગલ કરો

કાઢી નાખો

JavaScript દ્વારા

વિકલ્પો

પદ્ધતિઓ

અસુમેળ પદ્ધતિઓ અને સંક્રમણો

ઘટનાઓ