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

ሰብስብ

በጥቂት ክፍሎች እና በጃቫ ስክሪፕት ፕለጊኖቻችን የይዘት ታይነት በፕሮጀክትህ ላይ ቀይር።

እንዴት እንደሚሰራ

የስብስብ ጃቫ ስክሪፕት ተሰኪ ይዘትን ለማሳየት እና ለመደበቅ ይጠቅማል። አዝራሮች ወይም መልህቆች እርስዎ ወደሚቀያየሩባቸው የተወሰኑ ንጥረ ነገሮች ላይ የተነደፉ እንደ ቀስቅሴዎች ያገለግላሉ። ኤለመንቱን መሰባበር heightአሁን ካለው እሴቱ ወደ ተንቀሳቃሽ ያደርገዋል 0። ሲኤስኤስ እነማዎችን እንዴት እንደሚይዝ ከተመለከትን፣ paddingበአንድ .collapseአካል ላይ መጠቀም አይችሉም። በምትኩ, ክፍሉን እንደ ገለልተኛ መጠቅለያ አካል ይጠቀሙ.

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

ለምሳሌ

በክፍል ለውጦች በኩል ሌላ አካል ለማሳየት እና ለመደበቅ ከታች ያሉትን አዝራሮች ጠቅ ያድርጉ፡

  • .collapseይዘትን ይደብቃል
  • .collapsingበሽግግር ወቅት ይተገበራል
  • .collapse.showይዘት ያሳያል

በአጠቃላይ, ከባህሪው ጋር አንድ አዝራር እንዲጠቀሙ እንመክራለን data-bs-target. ከትርጉም እይታ አንጻር ባይመከርም፣ hrefከባህሪው (እና ሀ 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>

በርካታ ኢላማዎች

<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"ተሰኪው የሚሰበሰበው ኤለመንት መከፈቱን ወይም አለመዘጋቱን (በጃቫ ስክሪፕት በኩል ወይም ተጠቃሚው ሌላ የቁጥጥር አካል ስላስነሳ እንዲሁም ከተመሳሳዩ ሊሰበሰብ ከሚችለው ኤለመንት ጋር የተሳሰረ) ላይ በመመስረት ይህንን ባህሪ በመቆጣጠሪያው ላይ በራስ-ሰር ይቀየራል። የመቆጣጠሪያው አካል ኤችቲኤምኤል ኤለመንቱ አዝራር ካልሆነ (ለምሳሌ፣ an <a>ወይም <div>)፣ ባህሪውrole="button"ወደ ኤለመንቱ መጨመር አለበት.

የእርስዎ የቁጥጥር አካል አንድ ነጠላ ሊሰበሰብ የሚችል ኤለመንት እያነጣጠረ ከሆነ - ማለትም data-bs-targetባህሪው ወደ መራጭ እየጠቆመ ከሆነ - ባህሪውን ወደ መቆጣጠሪያ ኤለመንት idማከል አለብዎት ፣ የሚሰበሰበውን ኤለመንት የያዘ። ዘመናዊ የስክሪን አንባቢዎች እና ተመሳሳይ አጋዥ ቴክኖሎጂዎች ይህንን ባህሪ ለተጠቃሚዎች ተጨማሪ አቋራጮችን ለማቅረብ በቀጥታ ወደ ተሰበሰበው አካል እንዲሄዱ ያደርጋሉ።aria-controlsid

የ Bootstrap የአሁኑ አተገባበር በ WAI-ARIA የደራሲ ልምምዶች 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"ያክሉ ። 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 አባል ላይ ያስወግዳል)
getInstance ከDOM ኤለመንት ጋር የተጎዳኘውን የውድቀት ምሳሌ እንዲያገኙ የሚያስችልዎ የማይንቀሳቀስ ዘዴ፣ እንደዚህ ሊጠቀሙበት ይችላሉ።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...
})