ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
in English

ፈረሰ

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

ከመይ ይሰርሕ

እቲ 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"ይድለ።

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>

ብዙሕ ዕላማታት

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;

ክፍልታት

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

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

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

ኣጠቓቕማ

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

  • .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...
})