ፈረሰ

ከመይ ይሰርሕ

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

ኣብነት

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

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

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

<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

<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="".

ኣገባባት

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

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

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

ፍጻሜታት

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

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