ካብ ካንቫስ ወጻኢ

ኣብ ፕሮጀክትካ ንመጓዓዝያ፣ ናይ ዕዳጋ ዓረብያታትን ካልእን ብውሑዳት ክፍልታትን ናይ ጃቫስክሪፕት ፕላግ-ኢንናን ዝተሓብኡ ጎድናዊ መስመር ምህናጽ።

ኣብዚ ገጽ

ከመይ ይሰርሕ

Offcanvas ብመንገዲ ጃቫስክሪፕት ክቕየር ዝኽእል ናይ ጎድናዊ ባር ክፍሊ ኮይኑ ካብ ጸጋማይ፣ የማናይ፣ ላዕለዋይ ወይ ታሕተዋይ ወሰን ናይቲ ቪውፖርት ክረአ ይኽእል። መጠወቒታት ወይ መልህቕ ከም መበገሲታት ኮይኖም ምስ ፍሉያት ባእታታት ትቕይሮም ዝተተሓሓዙ ይጥቀሙ፣ dataባህርያት ድማ ንጃቫስክሪፕትና ንምጽዋዕ ይጥቀሙ።

Offcanvas ገለ ካብ ሓደ ዓይነት ናይ ጃቫስክሪፕት ኮድ ከም ሞዳላት ይካፈል። ብኣምር ኣዝዮም ተመሳሰልቲ እዮም፡ ግን ከኣ ዝተፈላለዩ ፕላግ-ኢናት እዮም።
ብተመሳሳሊ ገለ ምንጪ Sass ተለዋዋጢ ናይ offcanvas ቅዲታትን መለክዒታትን ካብ ሞዳል ተቐያየርቲ ይውረስ።
ምስ ዝረአ፡ offcanvas ነቲ offcanvas ንምሕባእ ክትጥውቖ እትኽእል ነባሪ ድሕረ ባይታ የጠቓልል።
ምስ ሞዳላት ዝመሳሰል ኣብ ሓደ እዋን ሓደ ኦፍካንቫስ ጥራይ እዩ ክረአ ዝኽእል።

ርእሲ ንላዕሊ! marginCSS ንኣኒሜሽን ብኸመይ ከም ዝሕዞ ኣብ ግምት ብምእታው፡ ክትጥቀመሉ ወይ translateኣብ ልዕሊ ሓደ .offcanvasባእታ ክትጥቀመሉ ኣይትኽእልን ኢኻ ። ኣብ ክንድኡስ፡ ነቲ ክፍሊ ከም ናጻ መጠቕለሊ ባእታ ተጠቐመሉ።

ናይዚ ኣካል ተንቀሳቓሲ ውጽኢት ኣብቲ ናይ prefers-reduced-motionሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ ።

ኣብነታት

ካብ ካንቫስ ወጻኢ ዝኾኑ ኣካላት

ኣብ ታሕቲ ብነባሪ (ብመንገዲ .showon .offcanvas) ዝረአ ናይ offcanvas ኣብነት ኣሎ። Offcanvas ንሓደ ርእሲ ምስ ምዕጻው መጠወቒ ደገፍን ንገለ መጀመርታ ዝኸውን ኣማራጺ ኣካል ክፍሊን የጠቓልል padding። ብዝተኻእለ መጠን ካብ ካንቫስ ወጻኢ ዝኾኑ ርእስታት ምስ ናይ ምብራር ተግባራት ከተካትቱ፡ ወይ ድማ ብግልጺ ናይ ምብራር ስጉምቲ ክትህቡ ንመክር።

ትሕዝቶ ናይቲ offcanvas ኣብዚ ይኸይድ። ዳርጋ ዝኾነ ናይ Bootstrap ክፍሊ ወይ ብሕታዊ ባእታታት ኣብዚ ከተቐምጥ ትኽእል ኢኻ።

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>ንሓደ offcanvasን ድሕረ ባይታኡን ምስ ዝረአ ነቲ ባእታ ምዝዋር ይስረዝ። ምዝዋር 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>

ስታትቲክ ድሕረ ባይታ

ድሕረ ባይታ ናብ ስታትቲክ ምስ ዝቕየር፡ ካብኡ ወጻኢ ክትጥውቕ ከለኻ፡ እቲ 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 ምስ ዩቲሊቲታት ምቕያር ምስ ዝተፈላለዩ ዓውድታት ከም ጸሊም navbars ብዝበለጸ ንምስምማዕ። ኣብዚ ንንግቡእ ቅዲ ምስ ጸሊም offcanvas .text-bg-darkነቲ .offcanvasand .btn-close-whiteto ንውስኸሉ። .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፡ ኣብ ትሕቲ እቲ ነጥቢ ምብታኽ ኣብ ዝርከብ offcanvas ትሕዝቶ ይሓብእ lg፡ ግን ከኣ ነቲ ኣብ ልዕሊ እቲ lgነጥቢ ምብታኽ ዘሎ ትሕዝቶ የርኢ።

ነቲ ምላሽ ዝህብ offcanvas toggle ንምርኣይ ንዓቐን መርበብ ሓበሬታኻ ምቕያር።

እዚ ኣብ ውሽጢ ሓደ .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 ኣካላት ነባሪ ምቕማጥ የለን፣ ስለዚ ሓደ ካብቶም ኣብ ታሕቲ ዘለዉ ናይ መቐየሪ ክፍልታት ክትውስኽ ኣለካ።

.offcanvas-startoffcanvas ኣብ ጸጋማይ ሸነኽ ናይቲ ቪውፖርት የቐምጦ (ኣብ ላዕሊ ተገሊጹ ኣሎ)
.offcanvas-endoffcanvas ኣብ የማናይ ሸነኽ ናይቲ ቪውፖርት የቐምጦ
.offcanvas-topoffcanvas ኣብ ላዕሊ ናይቲ ቪውፖርት የቐምጦ
.offcanvas-bottomoffcanvas ኣብ ታሕቲ ናይቲ ቪውፖርት የቐምጦ

ኣብ ታሕቲ ዘሎ ላዕለዋይን የማንን ታሕተዋይን ኣብነታት ፈትን።

...

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 ተወሰኸ

ከም ኣካል ናይቲ Bootstrap ዝምዕብል ዘሎ CSS ተለዋዋጢ ኣቀራርባ፡ offcanvas ሕጂ ንዝተማዕበለ .offcanvasናይ ሓቂ ግዜ ምምዕርራይ local CSS variables on ይጥቀም። ክብርታት ናይ 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 ብጸጋማይ ሸነኽ ይሓብኦ
.offcanvas-endነቲ offcanvas ብየማን ይሓብኦ
.offcanvas-topነቲ offcanvas ኣብ ላዕሊ ይሓብኦ
.offcanvas-bottomነቲ offcanvas ኣብ ታሕቲ ይሓብኦ

ምስቲ ባህሪ ናይ ምብራር መጠወቒ ወስኸሉ data-bs-dismiss="offcanvas"፣ እዚ ድማ ንተግባር ጃቫስክሪፕት የበግሶ። <button>ኣብ ኩሎም መሳርሒታት ንዝግባእ ባህሪ ነቲ ባእታ ምስኡ ምጥቃምካ ኣረጋግጽ ።

ብመንገዲ ባህርያት ዳታ

ቶግል ምግባር

ምውሳኽን data-bs-toggle="offcanvas"ሓደ data-bs-targetወይ hrefናብቲ ባእታ ብኣውቶማቲክ ምቁጽጻር ናይ ሓደ ካብ ካንቫስ ወጻኢ ባእታ ንምምዳብ። እቲ data-bs-targetባህሪ ነቲ offcanvas ንኽትጥቀመሉ ዝሕግዝ CSS መምረጺ ይቕበል። ነቲ ክፍሊ offcanvasኣብቲ ካብ ካንቫስ ወጻኢ ዝኾነ ባእታ ምውሳኽካ ኣረጋግጽ። ብነባሪ ክኽፈት እንተደሊኻ፡ ነቲ ተወሳኺ ክፍሊ ወስኸሉ show።

ምስንባት

ምብራር ከምቲ ኣብ ታሕቲ ተገሊጹ ዘሎ ኣብ ውሽጢ offcanvasdata ኣብ ዝርከብ መጠወቒ ዘሎ ባህሪ ክረጋገጽ ይከኣል ፤

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

ወይ ድማ ካብቲ offcanvas ወጻኢdata-bs-target ኣብ ዝርከብ መጠወቒ ከምቲ ኣብ ታሕቲ ተገሊጹ ዘሎ ብምጥቃም ፤

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

ክልቲኦም መንገድታት ንሓደ ካብ ካንቫስ ወጻኢ ምብራር ዝድገፉ እኳ እንተኾኑ፡ ካብ ደገ ካንቫስ ምብራር ምስቲ ናይ ARIA Authoring Practices Guide dialog (modal) pattern ከምዘይቃዶ ኣብ ግምት ኣእቱ ። እዚ ብናይ ገዛእ ርእስኻ ሓደጋ ግበር።

ብመንገዲ ጃቫስክሪፕት።

ብኢድካ ምስ ኣንቅሕ፤

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 ጀሚሩ ኩሎም ኣካላት ንሓደ ፈተነ ዝተሓዝአ ዳታ ባህሪ ይድግፉ እዚ data-bs-configድማ ቀሊል ውቅር ኣካላት ከም JSON ሕብረ ቃላት ከዕቁብ ይኽእል። ሓደ ባእታ data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes ምስ ዝህልዎ፡ እቲ ናይ መወዳእታ titleዋጋ ክኸውን እዩ 456፡ እቶም ዝተፈላለዩ ዳታ ባህርያት ድማ ኣብ data-bs-config. ብተወሳኺ፡ ዝጸንሑ ባህርያት ዳታ ከም data-bs-delay='{"show":0,"hide":150}'.

ሽም	ዓይነት	ትሑዝ	መግለፂ
`backdrop`	boolean ወይ ድማ እቲ ሕብረ ቃላት`static`	`true`	offcanvas ክፉት ከሎ ኣብ ኣካላት ድሕረ ባይታ ምልካይ። ከም ኣማራጺ `static`፡ ምስ ጠወቕካ ነቲ offcanvas ዘይዓጽዎ ድሕረ ባይታ ግለጽ።
`keyboard`	ቡልያን ዝብል እዩ።	`true`	መፍትሕ ምህዳም ምስ ዝጽቀጥ ነቲ offcanvas ይዓጽዎ።
`scroll`	ቡልያን ዝብል እዩ።	`false`	offcanvas ክፉት ከሎ ኣካላት ምዝዋር ፍቐድ።

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ኩሎም ናይ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም ምስግጋር ይጅምሩ ። እቲ ምስግጋር ምስ ተጀመረ ግን ከኣ ቅድሚ ምውድኡ ናብቲ ደዋሊ ይምለሱ ። ብተወሳኺ፡ ኣብ ሓደ መሰጋገሪ ኣካል ዝግበር ናይ ሜላ ጻውዒት ዕሽሽ ክበሃል እዩ .

ንዝያዳ ሓበሬታ ኣብ ሰነድ ጃቫስክሪፕትና ርአ ።

ትሕዝቶኻ ከም ካብ ካንቫስ ወጻኢ ዝኾነ ባእታ የነቓቕሖ። ሓደ ኣማራጺ ኣማራጺታት ይቕበል object.

ብሃናጺ ካብ ካንቫስ ወጻኢ ዝኾነ ምሳሌ ክትፈጥር ትኽእል ኢኻ፣ ንኣብነት፤

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

ሜላ	መግለፂ
`getInstance`	ምስ ሓደ DOM element ዝተኣሳሰር offcanvas instance ክትረክብ ዘኽእለካ ስታቲክ ሜላ።
`getOrCreateInstance`	ስታትቲክ ሜላ እዚ ድማ ነቲ offcanvas instance ምስ DOM element ዝተኣሳሰር ክትረኽቦ ዘኽእለካ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ክትፈጥር ዘኽእለካ።
`hide`	ካብ ካንቫስ ወጻኢ ዝኾነ ባእታ ይሓብእ። እቲ ካብ ካንቫስ ወጻኢ ዝኾነ ባእታ ብጭቡጥ ቅድሚ ምሕባኡ (ማለት ቅድሚ እቲ `hidden.bs.offcanvas`ፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ።
`show`	ካብ ካንቫስ ወጻኢ ዝኾነ ባእታ የርኢ። ቅድሚ እቲ ካብ ካንቫስ ወጻኢ ዝኾነ ባእታ ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ `shown.bs.offcanvas`ፍጻመ ምፍጻሙ) ናብቲ ደዋሊ ይምለስ።
`toggle`	ንሓደ ካብ ካንቫስ ወጻኢ ዝኾነ ባእታ ናብ ዝተራእየ ወይ ዝተሓብአ ይቕይሮ። ቅድሚ እቲ ካብ ካንቫስ ወጻኢ ዝኾነ ባእታ ብጭቡጥ ምርኣይ ወይ ምሕባኡ (ማለት ቅድሚ እቲ `shown.bs.offcanvas`ወይ `hidden.bs.offcanvas`ፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ።

ፍጻሜታት

Bootstrap's offcanvas class ንውሑዳት ፍጻመታት ናብ offcanvas ተግባር ምትእስሳር የቃልዕ።

ዓይነት ፍጻመ	መግለፂ
`hide.bs.offcanvas`	እዚ ፍጻመ እዚ እቲ `hide`ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
`hidden.bs.offcanvas`	እዚ ክስተት ዝትኮስ ሓደ ካብ ካንቫስ ወጻኢ ዝኾነ ባእታ ካብ ተጠቃሚ ምስ ተሓብአ እዩ (ምስግጋር CSS ክሳብ ዝዛዘም ክጽበ እዩ)።
`hidePrevented.bs.offcanvas`	እዚ ፍጻመ ዝትኮስ እቲ offcanvas ምስ ዝረአ፣ ድሕረ ባይታኡ ምስ `static`ዝኸውንን ካብቲ offcanvas ወጻኢ ዝግበር ጠውቂ ምስ ዝፍጸምን እዩ። እቲ ፍጻመ ውን ዝትኮስ እቲ ናይ ምህዳም መፍትሕ ምስ ዝጽቀጥን እቲ `keyboard`ኣማራጺ ናብ `false`.
`show.bs.offcanvas`	`show`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
`shown.bs.offcanvas`	እዚ ክስተት ዝትኮስ ሓደ ካብ ካንቫስ ወጻኢ ዝኾነ ባእታ ንተጠቃሚ ክረአ ምስ ተገብረ እዩ (ምስግጋር CSS ክሳብ ዝዛዘም ክጽበ እዩ)።

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

ካብ ካንቫስ ወጻኢ

ከመይ ይሰርሕ

ኣብነታት

ካብ ካንቫስ ወጻኢ ዝኾኑ ኣካላት

ካብ ካንቫስ ወጻኢ

ቀጥታዊ ዲሞ

ካብ ካንቫስ ወጻኢ

ምጥቕላል ኣካላት

ኦፍካንቫስ ምስ ናይ ኣካላት ስክሮሊንግ

ስክሮሊንግ ኣካላትን ድሕረ ባይታ

ድሕረ ባይታ ምስ ስክሮሊንግ

ስታትቲክ ድሕረ ባይታ

ካብ ካንቫስ ወጻኢ

ጸሊም ኦፍካንቫስ

ካብ ካንቫስ ወጻኢ

ምላሽ ዝህብ

ምላሽ ዝህብ ካብ ካንቫስ ወጻኢ

ምምዳብ

ካብ ካንቫስ ወጻኢ ዝኾነ ላዕለዋይ ክፋል

ኦፍካንቫስ ትኽክል

ካብ ካንቫስ ወጻኢ ዝኾነ ታሕተዋይ ክፋል

ተበጻሕነት

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ሳስ ተለዋዋጢ ረቛሒታት

ኣጠቓቕማ

ብመንገዲ ባህርያት ዳታ

ቶግል ምግባር

ምስንባት

ብመንገዲ ጃቫስክሪፕት።

ኣማራጺታት

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ፍጻሜታት