ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
Check
in English

Offcanvas

በጥቂት ክፍሎች እና በጃቫስክሪፕት ፕለጊን በፕሮጀክትዎ ውስጥ የተደበቁ የጎን አሞሌዎችን ለዳሰሳ፣ ለግዢ ጋሪዎች እና ለሌሎችም ይገንቡ።

በዚህ ገጽ ላይ

እንዴት እንደሚሰራ

Offcanvas በጃቫ ስክሪፕት በኩል ከግራ፣ ከቀኝ፣ ከላይ ወይም ከታች ጠርዝ ላይ ለመታየት የሚቀያየር የጎን አሞሌ አካል ነው። አዝራሮች ወይም መልህቆች እርስዎ ከሚቀያየሯቸው የተወሰኑ ንጥረ ነገሮች ጋር ተያይዘው እንደ ቀስቅሴዎች ጥቅም ላይ ይውላሉ፣ እና dataባህሪያት የእኛን ጃቫስክሪፕት ለመጥራት ያገለግላሉ።

  • Offcanvas አንዳንድ ተመሳሳይ የጃቫ ስክሪፕት ኮድ እንደ ሞዳልያ ይጋራል። በፅንሰ-ሀሳብ ፣ እነሱ በጣም ተመሳሳይ ናቸው ፣ ግን የተለየ ተሰኪዎች ናቸው።
  • በተመሳሳይ፣ አንዳንድ የምንጭ Sass ተለዋዋጮች ለoffcanvas ቅጦች እና ልኬቶች ከሞዳል ተለዋዋጮች የተወረሱ ናቸው።
  • በሚታይበት ጊዜ Offcanvas የሸራውን ለመደበቅ ጠቅ ሊደረግ የሚችል ነባሪ backdrop ያካትታል።
  • ከሞዳሎች ጋር በሚመሳሰል መልኩ፣ በአንድ ጊዜ አንድ ከሸራ ውጪ ብቻ ይታያል።

ቀና በል! ሲኤስኤስ እነማዎችን እንዴት እንደሚይዝ ከተመለከትን፣ አንድን አካል መጠቀም marginወይም መጠቀም አይችሉም። በምትኩ, ክፍሉን እንደ ገለልተኛ መጠቅለያ አካል ይጠቀሙ.translate.offcanvas

የዚህ አካል አኒሜሽን ተጽእኖ prefers-reduced-motionበመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ ።

ምሳሌዎች

Offcanvas ክፍሎች

ከዚህ በታች በነባሪ የሚታየው ከሸራ ውጭ የሆነ ምሳሌ ነው (በላይ .show) .offcanvas። Offcanvas ለራስጌ በተዘጋ አዝራር እና ለተወሰነ የመጀመሪያ አማራጭ የአካል ክፍል ድጋፍን ያካትታል padding። በተቻለ መጠን ከሸራ ራስጌዎችን የማሰናበት እርምጃዎችን እንዲያካትቱ ወይም ግልጽ የሆነ የማሰናበት እርምጃ እንዲያቀርቡ እንመክርዎታለን።

Offcanvas
ከሸራው ውጭ ያለው ይዘት እዚህ ይሄዳል። ስለማንኛውም የቡትስትራፕ አካል ወይም ብጁ ክፍሎችን እዚህ ማስቀመጥ ይችላሉ።
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 ጋር አገናኝ
Offcanvas
አንዳንድ ጽሑፍ እንደ ቦታ ያዥ። በእውነተኛ ህይወት እርስዎ የመረጧቸውን ንጥረ ነገሮች ሊኖሩዎት ይችላሉ. እንደ፣ ጽሑፍ፣ ምስሎች፣ ዝርዝሮች፣ ወዘተ.
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>

Offcanvas ከሰውነት ማሸብለል ጋር

ይህን አማራጭ በተግባር ለማየት የቀረውን ገጽ ለማሸብለል ይሞክሩ።

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>እንዲሁም ከሚታየው backdrop ጋር ማሸብለልን ማንቃት ይችላሉ ።

Backdrop በማሸብለል

ይህን አማራጭ በተግባር ለማየት የቀረውን ገጽ ለማሸብለል ይሞክሩ።

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>

የማይንቀሳቀስ ዳራ

backdrop ወደ static ሲዋቀር ከሱ ውጭ ጠቅ ሲደረግ ሸራውን አይዘጋም።

Offcanvas
ከኔ ውጪ ጠቅ ካደረግክ አልዘጋም።
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 ውስጥ ተጨምሯል

እንደ ጨለማ ናቭባርስ ካሉ የተለያዩ አውዶች ጋር በተሻለ ለማዛመድ የoffcanvasesን ገጽታ ከመገልገያዎች ጋር ይለውጡ። እዚህ .text-bg-darkወደ .offcanvasእና .btn-close-whiteለትክክለኛው .btn-closeየቅጥ አሰራር ከጨለማ ሸራ ጋር እንጨምራለን ። ውስጥ ተቆልቋይዎች ካሉህ .dropdown-menu-darkወደ ማከልም አስብበት .dropdown-menu።

Offcanvas

ከሸራ ውጭ ያለውን ይዘት እዚህ ያስቀምጡ።

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>
Offcanvas ታች
...
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>

ተደራሽነት

የ Offcanvas ፓነል በፅንሰ-ሀሳብ የሞዳል ንግግር ስለሆነ፣ aria-labelledby="..."ከሸራ ውጭ ያለውን ርዕስ በመጥቀስ ወደ ማከል እርግጠኛ ይሁኑ .offcanvas። role="dialog"አስቀድመን በጃቫስክሪፕት ስለጨመርን ማከል እንደማያስፈልግህ አስተውል ።

CSS

ተለዋዋጮች

በ v5.2.0 ውስጥ ተጨምሯል

እንደ የBootstrap የ CSS ተለዋዋጮች አቀራረብ አካል፣ Offcanvas አሁን ለተሻሻለ የአሁናዊ ማበጀት የአካባቢያዊ CSS ተለዋዋጮችን ይጠቀማል .offcanvas። የ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ይዘቱን ይደብቃል
  • .offcanvas.showይዘቱን ያሳያል
  • .offcanvas-startበግራ በኩል ያለውን ሸራውን ይደብቃል
  • .offcanvas-endበቀኝ በኩል ያለውን ሸራውን ይደብቃል
  • .offcanvas-topከላይ ያለውን ሸራ ይደብቃል
  • .offcanvas-bottomከታች ያለውን ሸራውን ይደብቃል

data-bs-dismiss="offcanvas"የጃቫስክሪፕት ተግባርን የሚቀሰቅሰው ከባህሪው ጋር የማሰናበት ቁልፍ ያክሉ ። <button>በሁሉም መሳሪያዎች ላይ ለትክክለኛ ባህሪ ከእሱ ጋር ያለውን ንጥረ ነገር መጠቀምዎን ያረጋግጡ ።

በውሂብ ባህሪያት በኩል

ቀያይር

የአንድን ከሸራ ውጪ ኤለመንት በራስ ሰር ለመመደብ data-bs-toggle="offcanvas"እና ወደ ኤለመንት ያክሉ ። ባህሪው ውጪያዊ ሸራውን ለመተግበር የCSS መራጭን ይቀበላል። ክፍሉን ወደ ውጪያዊው ክፍል ማከልዎን ያረጋግጡ። በነባሪ እንዲከፈት ከፈለጉ ተጨማሪውን ክፍል ያክሉ ።data-bs-targethrefdata-bs-targetoffcanvasshow

አሰናብት

ከታች እንደሚታየው ከሸራው ውስጥ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 የደራሲ ልምምዶች መመሪያ ንግግር (ሞዳል) ንድፍ ጋር እንደማይዛመድ ያስታውሱ ። ይህንን በራስዎ ሃላፊነት ያድርጉ።

በጃቫስክሪፕት በኩል

በእጅ አንቃ በ፦

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

አማራጮች

አማራጮች በውሂብ ባህሪያት ወይም በጃቫ ስክሪፕት ሊተላለፉ ስለሚችሉ፣ በ ውስጥ እንዳለ የአማራጭ ስም ወደ ላይ ማከል data-bs-ይችላሉ data-bs-animation="{value}"። በመረጃ ባህሪያት በኩል አማራጮችን ሲያስተላልፉ የአማራጭ ስም የጉዳይ አይነትን ከ " camelcase " ወደ " kebab-case " መቀየርዎን ያረጋግጡ. ለምሳሌ, data-bs-custom-class="beautifier"በምትኩ ይጠቀሙ data-bs-customClass="beautifier".

ከ Bootstrap 5.2.0 ጀምሮ፣ ሁሉም አካላት ቀላል የአካል ክፍሎችን እንደ JSON string ውቅረት ሊያስቀምጥ የሚችል በሙከራ የተያዘ የውሂብ ባህሪን ይደግፋሉ። data-bs-configአንድ ኤለመንት ሲኖረው 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ጠቅ ሲደረግ የዉጭ ሸራውን የማይዘጋው ለbackdrop ይግለጹ።
keyboard ቡሊያን true የማምለጫ ቁልፉ ሲጫን የዉጭ ሸራውን ይዘጋል።
scroll ቡሊያን false ከሸራ ውጭ ክፍት ሆኖ የሰውነት ማሸብለል ይፍቀዱ።

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ ።

ይዘትህን እንደ ከሸራ ውጪ አካል ያገብራል። አማራጭ አማራጮችን ይቀበላል object።

ከሸራ ውጪ የሆነ ምሳሌ ከግንባታው ጋር መፍጠር ትችላለህ፣ ለምሳሌ፡-

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
ዘዴ መግለጫ
getInstance ከ DOM ኤለመንት ጋር የተጎዳኘውን ከሸራ ውጭ ያለውን ምሳሌ ለማግኘት የሚያስችል የማይንቀሳቀስ ዘዴ።
getOrCreateInstance ከ DOM ኤለመንት ጋር የተገናኘውን ከሸራ ውጭ ያለውን ምሳሌ እንድታገኙ ወይም ካልተጀመረ አዲስ ለመፍጠር የሚያስችል የማይንቀሳቀስ ዘዴ።
hide ከሸራ ውጪ የሆነ አካል ይደብቃል። ከሸራ ውጭ ያለው አካል በትክክል ከመደበቅ በፊት (ማለትም hidden.bs.offcanvasክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል።
show ከሸራ ውጪ የሆነ አካል ያሳያል። ከሸራ ውጭ ያለው አካል በትክክል ከመታየቱ በፊት (ማለትም shown.bs.offcanvasክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል።
toggle ከሸራ ውጪ የሆነ አካል ወደ የሚታይ ወይም የተደበቀ ይቀየራል። ከሸራ ውጭ ያለው አካል በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል።shown.bs.offcanvashidden.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...
})