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

Offcanvas

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

እንዴት እንደሚሰራ

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

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

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

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

ምሳሌዎች

Offcanvas ክፍሎች

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

Offcanvas
ከሸራው ውጭ ያለው ይዘት እዚህ ይሄዳል። ስለማንኛውም የቡትስትራፕ አካል ወይም ብጁ ክፍሎችን እዚህ ማስቀመጥ ይችላሉ።
<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ክፍልን ከክፍል ጋር የሚቀያየርን ከሸራ ውጪ የሆነ ኤለመንት ለማሳየት እና ለመደበቅ ከታች ያሉትን ቁልፎች ተጠቀም .offcanvas

  • .offcanvasይዘትን ይደብቃል (ነባሪ)
  • .offcanvas.showይዘት ያሳያል

hrefከባህሪው ጋር አገናኝን ወይም ከባህሪው ጋር አዝራርን መጠቀም ይችላሉ data-bs-target. በሁለቱም ሁኔታዎች, data-bs-toggle="offcanvas"አስፈላጊ ነው.

ከ href ጋር አገናኝ
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>
Offcanvas ታች
...
<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>

Backdrop

ኤለመንቱን ማሸብለል <body>የተሰናከለው ከሸራ እና የጀርባው ገጽታ በሚታዩበት ጊዜ ነው። ማሸብለልን ለመቀየር እና የጀርባውን ገጽታ data-bs-scrollለመቀየር አይነታውን ይጠቀሙ ።<body>data-bs-backdrop

በማሸብለል ቀለም

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

Offcanvas ከጀርባ ጋር

......

በማሸብለል ጀርባ

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

<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>

ተደራሽነት

የ Offcanvas ፓነል በፅንሰ-ሀሳብ የሞዳል ንግግር ስለሆነ፣ aria-labelledby="..."ከሸራ ውጭ ያለውን ርዕስ በመጥቀስ ወደ ማከል እርግጠኛ ይሁኑ .offcanvasrole="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ይዘቱን ይደብቃል
  • .offcanvas.showይዘቱን ያሳያል
  • .offcanvas-startበግራ በኩል ያለውን ሸራውን ይደብቃል
  • .offcanvas-endበቀኝ በኩል ያለውን ሸራውን ይደብቃል
  • .offcanvas-bottomከታች ያለውን ሸራውን ይደብቃል

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

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

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

በጃቫስክሪፕት በኩል

በእጅ አንቃ በ፦

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-bs-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-bs-backdrop=""

ስም ዓይነት ነባሪ መግለጫ
backdrop ቡሊያን true ከሸራ ክፍት በሆነበት ጊዜ በሰውነት ላይ ዳራ ይተግብሩ
keyboard ቡሊያን true የማምለጫ ቁልፉ ሲጫን የ Offሸራውን ይዘጋል
scroll ቡሊያን false ከሸራ ውጭ ክፍት ሆኖ የሰውነት ማሸብለል ይፍቀዱ

ዘዴዎች

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

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

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

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

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

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
ዘዴ መግለጫ
toggle ከሸራ ውጪ የሆነ አካል ወደ የሚታይ ወይም የተደበቀ ይቀየራል። ከሸራ ውጭ ያለው አካል በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል።shown.bs.offcanvashidden.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...
})