ፈረሰ

ኣብ መላእ ፕሮጀክትካ ርኡይነት ትሕዝቶ ብውሑዳት ክፍልታትን ናይ ጃቫስክሪፕት ፕላጊናትናን ምቕያር።

ኣብዚ ገጽ

ከመይ ይሰርሕ

እቲ collapse JavaScript plugin ትሕዝቶ ንምርኣይን ንምሕባእን ይጥቀመሉ። መጠወቒታት ወይ መልህቕ ከም መበገሲታት ዝጥቀሙ ኮይኖም ናብ ፍሉያት ባእታታት ትቕይሮም ዝምደብ እዩ። ንሓደ ባእታ ምፍራስ ነቲ heightካብቲ ሕጂ ዘለዎ ዋጋ ናብ 0. paddingCSS ንኣኒሜሽን ብኸመይ ከም ዝሕዞ ኣብ ግምት ብምእታው ፡ ኣብ ሓደ .collapseባእታ ክትጥቀመሉ ኣይትኽእልን ኢኻ ። ኣብ ክንድኡስ፡ ነቲ ክፍሊ ከም ናጻ መጠቕለሊ ባእታ ተጠቐመሉ።

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

ኣብነት

ካልእ ባእታ ብመንገዲ ለውጢ ክፍሊ ንምርኣይን ንምሕባእን ኣብ ታሕቲ ዘለዉ መጠወቒታት ጠውቑ፤

.collapseትሕዝቶ ይሓብእ እዩ።
.collapsingኣብ እዋን ምስግጋር ይትግበር
.collapse.showትሕዝቶ የርኢ

data-bs-targetብሓፈሻ፡ ምስቲ ባህሪ ዘለዎ መጠወቒ ክትጥቀም ንመክር ። hrefብዓይኒ ትርጉማዊ ኣረኣእያ እኳ እንተዘይተመከረ፡ ምስቲ ባህሪ (ከምኡ’ውን a role="button") ዘለዎ መላግቦ’ውን ክትጥቀም ትኽእል ኢኻ ። ኣብ ክልቲኡ ኩነታት፡ እቲ data-bs-toggle="collapse"ይድለ።

ምስ href ምትእስሳር

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

ንጋድም

እቲ ናይ ምፍራስ ፕላግ-ኢን ንኣግማድ ምፍራስ እውን ይድግፍ እዩ። ነቲ ኣብ ክንዲ .collapse-horizontalነቲ ንምስግጋር ነቲ መቐየሪ ክፍሊ ወስኸሉ እሞ ኣብቲ ናይ ቀረባ ውላድ ባእታ a ኣቐምጦ ። ናይ ገዛእ ርእስኻ ብሕታዊ Sass ክትጽሕፍ፡ ኣብ መስመር ቅዲታት ክትጥቀም፡ ወይ ድማ ናይ ስፍሓት መገልገሊታትና ክትጥቀም ናጻ ትኸውን ።widthheightwidth

ኣስተውዕሉ፡ እዚ ኣብ ታሕቲ ዘሎ ኣብነት ኣብ min-heightዶክስና ካብ መጠን ንላዕሊ ዳግማይ ቀለም ንኸይፍጠር ዝሕግዝ ስብስብ እኳ እንተሃለዎ፡ እዚ ግን ብግልጺ ኣየድልን እዩ። እቲ widthኣብ ውላድ ዘሎ ባእታ ጥራይ እዩ ዘድሊ።

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

ብዙሕ ዕላማታት

A <button>ወይ ኣብ ናቱ ወይ ባህርያቱ <a>ብሓደ መምረጺ ብምውካስ ብዙሓት ባእታታት ከርኢን ክሓብኦምን ይኽእል ። ብዙሕ ወይ ንሓደ ባእታ ከርእይዎን ክሓብእዎን ይኽእሉ ነፍሲ ወከፎም ብናቶም ወይ ባህሪ እንተወከስዎ።hrefdata-bs-target<button><a>hrefdata-bs-target

ቀዳማይ ባእታ ምቕያር

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

ተበጻሕነት

aria-expandedኣብቲ ናይ ምቁጽጻር ባእታ ምውሳኽካ ኣረጋግጽ ። እዚ ባህሪ እዚ ህሉው ኩነታት ናይቲ ምስቲ ቁጽጽር ዝተኣሳሰር ዝዕጸፍ ባእታ ብግልጺ ናብ ስክሪን ኣንበብቲን ተመሳሳሊ ሓገዝቲ ቴክኖሎጂታትን የመሓላልፍ። እቲ ዝዕጾ ባእታ ብነባሪ እንተተዓጽዩ፡ እቲ ኣብቲ ናይ ምቁጽጻር ባእታ ዘሎ ባህሪ ዋጋ ክህልዎ ይግባእ aria-expanded="false"። ነቲ ዝዕጾ ባእታ ብነባሪ showንክፍሊ ተጠቒምካ ክፉት ክኸውን እንተ ኣቐሚጥካዮ aria-expanded="true"፡ ኣብ ክንድኡ ኣብቲ ቁጽጽር ኣቐምጦ። እቲ ፕላግ-ኢን ነዚ ባህሪ ኣብቲ ቁጽጽር ብኣውቶማቲክ ክቕይሮ እዩ እቲ ዝዕጾ ባእታ ተኸፊቱ ወይ ተዓጽዩ ድዩ ኣይተዓጽወን (ብመንገዲ ጃቫስክሪፕት፣ ወይ እቲ ተጠቃሚ ካልእ ናይ ምቁጽጻር ባእታ እውን ምስ ተመሳሳሊ ዝዕጾ ባእታ ዝተኣሳሰር ስለዘበገሰ) መሰረት ብምግባር። ናይቲ ቁጽጽር ባእታ HTML ባእታ መጠወቒ እንተዘይኮይኑ (ንኣብነት፡ an <a>ወይ <div>)፡ እቲ ባህሪrole="button"ኣብቲ ባእታ ክውሰኽ ይግባእ።

ናትካ ናይ ምቁጽጻር ባእታ ንሓደ ዝዕጾ ባእታ ዒላማ ዝገብር እንተኾይኑ – ማለት እቲ data-bs-targetባህሪ ናብ ሓደ መምረጺ ዘመልክት እንተኾይኑ – ነቲ ባህሪ ናብቲ ናይ ምቁጽጻር ባእታ idክትውስኾ ይግባእ ፣ እቲ ናይቲ ዝዕጾ ባእታ ዝሓዘ። ዘመናውያን ስክሪን ሪደርን ተመሳሳሊ ሓገዝቲ ቴክኖሎጂታትን ነዚ ባህሪ እዚ ተጠቒሞም ተጠቀምቲ ብቐጥታ ናብቲ ዝዕጾ ባእታ ባዕሉ ንኽኸዱ ተወሳኺ ኣቋራጭ መገዲ ይህቡ።aria-controlsid

ኣስተውዕል ቡትስትራፕ ናይ ሕጂ ኣተገባብራ ነቶም ኣብ WAI-ARIA Authoring Practices 1.1 ኣኮርድዮን ቅዲ ዝተገልጹ ዝተፈላለዩ ኣማራጺ ናይ ቁልፊ ሰሌዳ ምትእስሳራት ከምዘይሽፍኖም ኣስተውዕል - ነዚኦም ባዕልኻ ምስ ብሕታዊ ጃቫስክሪፕት ከተእትዎም ከድልየካ እዩ።

ሳስ

ተለዋዋጢ ረቛሒታት

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

ክፍልታት

scss/_transitions.scssእዚኦም ኣብ ብዙሓት ባእታታት (ምዕራፍን ኣኮርድዮንን) ስለዝካፈሉ፡ ናይ ምፍራስ መሰጋገሪ ክፍልታት ኣብ ክትረኽቦም ትኽእል ኢኻ ።

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

ኣጠቓቕማ

እቲ ናይ ምፍራስ ፕላግ-ኢን ነቲ ከቢድ ምልዓል ንምሕላው ውሑዳት ክፍልታት ይጥቀም፤

.collapseነቲ ትሕዝቶ ይሓብኦ
.collapse.showዝብል ትሕዝቶ የርኢ
.collapsingምስግጋር ምስ ተጀመረ ይውሰኽ፣ ምስተወድአ ድማ ይእለ

እዞም ክፍልታት ኣብ _transitions.scss.

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

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

ኣኮርድዮን ዝመስል ምሕደራ ጉጅለ ኣብ ዝዕጸፍ ቦታ ንምውሳኽ፡ ነቲ ናይ ዳታ ባህሪ ወስኸሉ data-bs-parent="#selector"። ንዝያዳ ሓበሬታ ኣብ ገጽ ኣኮርድዮን ተወከሱ ።

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

ብኢድካ ምስ ኣንቅሕ፤

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-bs-፡ ከምቲ ኣብ data-bs-parent="".

ሽም	ዓይነት	ትሑዝ	መግለፂ
`parent`	መምረጺ \| jQuery ነገር \| DOM ባእታ	`false`	ወላዲ እንተተዋሂቡ፡ ሽዑ ኩሎም ኣብ ትሕቲ እቲ ዝተገልጸ ወላዲ ዝዕጸፉ ባእታታት እዚ ዝዕጸፍ ኣቕሓ ምስ ዝረአ ክዕጸዉ እዮም። `card`(ምስ ባህላዊ ባህሪ ኣኮርድዮን ዝመሳሰል - እዚ ኣብቲ ክፍሊ ዝምርኮስ እዩ )። እቲ ባህሪ ኣብቲ ዕላማ ዝዕጾ ቦታ ክቕመጥ ኣለዎ።
`toggle`	ቡልያን ዝብል እዩ።	`true`	ኣብ ምጽዋዕ ነቲ ዝዕጾ ባእታ ይቕይሮ

ኣገባባት

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

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

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

ትሕዝቶኻ ከም ዝዕጸፍ ባእታ የነቓቕሖ። ሓደ ኣማራጺ ኣማራጺታት ይቕበል object.

ምስቲ ሃናጺ ናይ ምዕጻፍ ምሳሌ ክትፈጥር ትኽእል ኢኻ፣ ንኣብነት፤

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

ሜላ	መግለፂ
`toggle`	ንሓደ ዝዕጾ ባእታ ናብ ዝተራእየ ወይ ዝተሓብአ ይቕይሮ። እቲ ዝዕጾ ባእታ ብጭቡጥ ቅድሚ ምርኣዩ ወይ ምሕባኡ (ማለት ቅድሚ እቲ `shown.bs.collapse`ወይ `hidden.bs.collapse`ፍጻመ ምፍጻሙ) ናብቲ ደዋሊ ይምለስ።
`show`	ዝዕጾ ባእታ የርኢ። እቲ ዝዕጸፍ ባእታ ብጭቡጥ ቅድሚ ምርኣዩ (ንኣብነት፡ ቅድሚ እቲ `shown.bs.collapse`ፍጻመ ምፍጻሙ) ናብቲ ደዋሊ ይምለስ።
`hide`	ዝዕጾ ባእታ ይሓብእ። እቲ ዝዕጾ ባእታ ብጭቡጥ ቅድሚ ምሕባኡ (ንኣብነት፡ ቅድሚ እቲ `hidden.bs.collapse`ፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ።
`dispose`	ናይ ሓደ ባእታ ምፍራስ የጥፍእ። (ኣብ DOM element ዝተዓቀበ ዳታ የወግድ)
`getInstance`	ምስ ሓደ DOM element ዝተኣሳሰር collapse instance ክትረክብ ዘኽእለካ Static method፣ ከምዚ ጌርካ ክትጥቀመሉ ትኽእል ኢኻ፤`bootstrap.Collapse.getInstance(element)`
`getOrCreateInstance`	ምስ ሓደ DOM ባእታ ዝተኣሳሰር ናይ ምዕጻፍ ምሳሌ ዝምለስ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ዝፈጥር ስታትቲክ ሜላ። ከምዚ ጌርካ ክትጥቀመሉ ትኽእል ኢኻ፤`bootstrap.Collapse.getOrCreateInstance(element)`

ፍጻሜታት

ናይ ቡትስትራፕ ናይ ምፍራስ ክፍሊ ንውሑዳት ፍጻመታት ንናይ ምፍራስ ተግባር ምትእስሳር የቃልዕ።

ዓይነት ፍጻመ	መግለፂ
`show.bs.collapse`	`show`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
`shown.bs.collapse`	እዚ ክስተት ዝትኮስ ሓደ ናይ ምፍራስ ባእታ ንተጠቃሚ ክርአ ምስ ተገብረ እዩ (ምስግጋር CSS ክሳብ ዝዛዘም ክጽበ እዩ)።
`hide.bs.collapse`	እዚ ፍጻመ እዚ እቲ `hide`ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
`hidden.bs.collapse`	እዚ ክስተት ዝትኮስ ሓደ ናይ ምፍራስ ባእታ ካብ ተጠቃሚ ምስ ተሓብአ እዩ (CSS ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})