ሰብስብ

እንዴት እንደሚሰራ

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

ለምሳሌ

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

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

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

አግድም

የመሰብሰቢያ ተሰኪው አግድም መሰባበርን ይደግፋል። በምትኩ .collapse-horizontalለመሸጋገር የመቀየሪያ ክፍሉን ጨምሩ እና በቅርብ የልጅ አካል ላይ ያዘጋጁ ። የራስዎን ብጁ Sass ለመጻፍ፣ የመስመር ውስጥ ቅጦችን ለመጠቀም ወይም የእኛን ስፋት መገልገያዎችን ለመጠቀም ነፃነት ይሰማዎ ።widthheightwidth

<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>

በርካታ ኢላማዎች

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

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

የ Bootstrap የአሁኑ ትግበራ በ ARIA የደራሲ ልምምዶች መመሪያ አኮርዲዮን ንድፍ ውስጥ የተገለጹትን የተለያዩ አማራጭ የቁልፍ ሰሌዳ መስተጋብሮችን እንደማይሸፍን ልብ ይበሉ - እነዚህን ከብጁ ጃቫስክሪፕት ጋር እራስዎ ማካተት ያስፈልግዎታል።

ሳስ

ተለዋዋጮች

$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"ያክሉ ። data-bs-targetባህሪው data-bs-targetውድቀትን ለመተግበር የ CSS መራጭን ይቀበላል። ክፍሉን collapseወደ ሊሰበሰበው አካል ማከልዎን ያረጋግጡ። በነባሪ እንዲከፈት ከፈለጉ ተጨማሪውን ክፍል ያክሉ show።

አኮርዲዮን የመሰለ የቡድን አስተዳደርን ወደ ሊሰበሰብበት ቦታ ለመጨመር የውሂብ ባህሪውን ያክሉ data-bs-parent="#selector"። ለበለጠ መረጃ የአኮርዲዮን ገጽን ይመልከቱ ።

በጃቫስክሪፕት በኩል

በእጅ አንቃ በ፦

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

አማራጮች

አማራጮች በውሂብ ባህሪያት ወይም በጃቫ ስክሪፕት ሊተላለፉ ስለሚችሉ፣ በ ውስጥ እንዳለ የአማራጭ ስም ወደ ላይ ማከል data-bs-ይችላሉ data-bs-animation="{value}"። በመረጃ ባህሪያት በኩል አማራጮችን ሲያስተላልፉ የአማራጭ ስም የጉዳይ አይነትን ከ " camelcase " ወደ " kebab-case " መቀየርዎን ያረጋግጡ. ለምሳሌ, data-bs-custom-class="beautifier"በምትኩ ይጠቀሙ data-bs-customClass="beautifier".

ከ Bootstrap 5.2.0 ጀምሮ፣ ሁሉም አካላት ቀላል የአካል ክፍሎችን እንደ JSON string ውቅረት ሊያስቀምጥ የሚችል በሙከራ የተያዘ የውሂብ ባህሪን ይደግፋሉ። data-bs-configአንድ ኤለመንት ሲኖረው data-bs-config='{"delay":0, "title":123}'እና data-bs-title="456"ባህሪያቱ ሲኖረው፣ የመጨረሻው titleእሴት ይሆናል 456እና የተለዩ የውሂብ ባህሪያት በ ላይ የተሰጡ እሴቶችን ይሽራሉ data-bs-config። በተጨማሪም፣ ነባር የውሂብ ባህሪያት እንደ JSON ያሉ እሴቶችን ማኖር ይችላሉ data-bs-delay='{"show":0,"hide":150}'።

ዘዴዎች

የእርስዎን ይዘት እንደ ሊሰበሰብ የሚችል አካል ያገብራል። አማራጭ አማራጮችን ይቀበላል object።

ከግንባታው ጋር የመውደቅ ምሳሌ መፍጠር ይችላሉ፣ ለምሳሌ፡-

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

ክስተቶች

የቡትስትራፕ ውድቀት ክፍል ወደ ውድቀት ተግባር ለመያያዝ ጥቂት ክስተቶችን ያጋልጣል።

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