ሰብስብ
በጥቂት ክፍሎች እና በጃቫ ስክሪፕት ፕለጊኖቻችን የይዘት ታይነት በፕሮጀክትህ ላይ ቀይር።
እንዴት እንደሚሰራ
የስብስብ ጃቫ ስክሪፕት ተሰኪ ይዘትን ለማሳየት እና ለመደበቅ ይጠቅማል። አዝራሮች ወይም መልህቆች እርስዎ ወደሚቀያየሩባቸው የተወሰኑ ንጥረ ነገሮች ላይ የተነደፉ እንደ ቀስቅሴዎች ያገለግላሉ። ኤለመንቱን መሰባበር height
አሁን ካለው እሴቱ ወደ ተንቀሳቃሽ ያደርገዋል 0
። ሲኤስኤስ እነማዎችን እንዴት እንደሚይዝ ከተመለከትን፣ padding
በአንድ .collapse
ኤለመንት ላይ መጠቀም አይችሉም። በምትኩ, ክፍሉን እንደ ገለልተኛ መጠቅለያ አካል ይጠቀሙ.
prefers-reduced-motion
በመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ
።
ለምሳሌ
በክፍል ለውጦች ሌላ አካል ለማሳየት እና ለመደበቅ ከታች ያሉትን አዝራሮች ጠቅ ያድርጉ፡
.collapse
ይዘትን ይደብቃል.collapsing
በሽግግር ወቅት ይተገበራል.collapse.show
ይዘት ያሳያል
በአጠቃላይ, ከባህሪው ጋር አንድ አዝራር እንዲጠቀሙ እንመክራለን data-target
. ከትርጉም እይታ አንጻር ባይመከርም፣ href
ከባህሪው (እና ሀ role="button"
) ጋር ማገናኛን መጠቀም ይችላሉ። በሁለቱም ሁኔታዎች, data-toggle="collapse"
አስፈላጊ ነው.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-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>
አግድም
የመሰብሰቢያ ተሰኪው አግድም መሰባበርን ይደግፋል። በምትኩ .width
ለመሸጋገር የመቀየሪያ ክፍሉን ጨምሩ እና በቅርብ የልጅ አካል ላይ ያዘጋጁ ። የራስዎን ብጁ Sass ለመጻፍ፣ የመስመር ውስጥ ቅጦችን ለመጠቀም ወይም የእኛን ስፋት መገልገያዎችን ለመጠቀም ነፃነት ይሰማዎ ።width
height
width
min-height
በዶክተሮቻችን ውስጥ ከመጠን በላይ መቀባትን ለማስወገድ ስብስብ ቢኖረውም ይህ በግልፅ አያስፈልግም።
በልጁ ላይ ያለው ንጥረ ነገር ብቻ width
ያስፈልጋል.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
በርካታ ኢላማዎች
ሀ <button>
ወይም ብዙ ኤለመንቶችን በ JQuery መራጭ ወይም <a>
ባህሪው በማጣቀስ ማሳየት እና መደበቅ ይችላል ። እያንዳንዳቸው ከነሱ ወይም ከባህሪያቸው ጋር ከጠቀሱት ብዙ ወይም ማሳየት እና መደበቅ ይችላሉ።href
data-target
<button>
<a>
href
data-target
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-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>
የአኮርዲዮን ምሳሌ
የካርድ ክፍሉን በመጠቀም አኮርዲዮን ለመፍጠር ነባሪውን የመሰብሰብ ባህሪን ማራዘም ይችላሉ። .accordion
የአኮርዲዮን ዘይቤን በትክክል ለማሳካት እንደ መጠቅለያ መጠቀምዎን ያረጋግጡ ።
.show
ለክፍሉ ምስጋና ይግባው።
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
ተደራሽነት
aria-expanded
ወደ መቆጣጠሪያው አካል መጨመርዎን እርግጠኛ ይሁኑ . ይህ ባህሪ ከቁጥጥሩ ጋር የተያያዘውን ሊሰበሰብ የሚችል ኤለመንት አሁን ያለውን ሁኔታ ከስክሪን አንባቢዎች እና ተመሳሳይ አጋዥ ቴክኖሎጂዎች ጋር በግልጽ ያስተላልፋል። ሊሰበሰብ የሚችል ኤለመንት በነባሪ ከተዘጋ፣ በመቆጣጠሪያ ኤለመንት ላይ ያለው አይነታ እሴት ሊኖረው ይገባል aria-expanded="false"
። ክፍሉን ተጠቅመው ሊሰበሰብ የሚችለውን አካል በነባሪነት እንዲከፍት ካቀናበሩት ፣ በምትኩ መቆጣጠሪያውን show
ያዘጋጁ ። aria-expanded="true"
ተሰኪው የሚሰበሰበው ኤለመንት መከፈቱን ወይም አለመዘጋቱን (በጃቫ ስክሪፕት በኩል ወይም ተጠቃሚው ሌላ የቁጥጥር አካል ስላስነሳ እንዲሁም ከተመሳሳዩ ሊሰበሰብ ከሚችለው ኤለመንት ጋር የተሳሰረ) ላይ በመመስረት ይህንን ባህሪ በመቆጣጠሪያው ላይ በራስ-ሰር ይቀየራል። የመቆጣጠሪያው አካል ኤችቲኤምኤል ኤለመንቱ አዝራር ካልሆነ (ለምሳሌ፣ an <a>
ወይም <div>
)፣ ባህሪውrole="button"
ወደ ኤለመንቱ መጨመር አለበት.
የእርስዎ የቁጥጥር አካል አንድ ነጠላ ሊሰበሰብ የሚችል ኤለመንት እያነጣጠረ ከሆነ - ማለትም data-target
ባህሪው ወደ መራጭ እየጠቆመ ከሆነ - ባህሪውን ወደ መቆጣጠሪያ ኤለመንት id
ማከል አለብዎት ፣ የሚሰበሰበውን ኤለመንት የያዘ። ዘመናዊ የስክሪን አንባቢዎች እና ተመሳሳይ አጋዥ ቴክኖሎጂዎች ይህንን ባህሪ ለተጠቃሚዎች ተጨማሪ አቋራጮችን ለማቅረብ በቀጥታ ወደ ተሰበሰበው አካል እንዲሄዱ ያደርጋሉ።aria-controls
id
የ Bootstrap የአሁኑ ትግበራ በ ARIA የደራሲ ልምምዶች መመሪያ ውስጥ የተገለጹትን የተለያዩ የቁልፍ ሰሌዳ መስተጋብሮችን እንደማይሸፍን ልብ ይበሉ - እነዚህን ከብጁ ጃቫ ስክሪፕት ጋር እራስዎ ማካተት ያስፈልግዎታል።
አጠቃቀም
የብልሽት ፕለጊን ከባድ ማንሳትን ለመቆጣጠር ጥቂት ክፍሎችን ይጠቀማል፡-
.collapse
ይዘቱን ይደብቃል.collapse.show
ይዘቱን ያሳያል.collapsing
ሽግግሩ ሲጀምር ይጨመራል, እና ሲጠናቀቅ ይወገዳል
እነዚህ ክፍሎች በ ውስጥ ሊገኙ ይችላሉ _transitions.scss
.
በውሂብ ባህሪያት በኩል
በቀላሉ አንድ ወይም ከዚያ በላይ ሊሰበሰቡ የሚችሉ ኤለመንቶችን ለመቆጣጠር ወደ ኤለመንት data-toggle="collapse"
ያክሉ ። data-target
ባህሪው data-target
ውድቀትን ለመተግበር የ CSS መራጭን ይቀበላል። ክፍሉን collapse
ወደ ሊሰበሰበው አካል ማከልዎን ያረጋግጡ። በነባሪ እንዲከፈት ከፈለጉ ተጨማሪውን ክፍል ያክሉ show
።
አኮርዲዮን የመሰለ የቡድን አስተዳደርን ወደ ሊሰበሰብበት ቦታ ለመጨመር የውሂብ ባህሪውን ያክሉ data-parent="#selector"
። ይህንን በተግባር ለማየት ማሳያውን ይመልከቱ።
በጃቫስክሪፕት በኩል
በእጅ አንቃ በ፦
$('.collapse').collapse()
አማራጮች
አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-
እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-parent=""
።
ስም | ዓይነት | ነባሪ | መግለጫ |
---|---|---|---|
ወላጅ | መራጭ | jQuery ነገር | DOM አባል | የውሸት | ወላጅ ከቀረበ፣ ይህ የሚሰበሰብ ንጥል ነገር ሲታይ በተገለጸው ወላጅ ስር ያሉ ሁሉም የሚሰበሰቡ ክፍሎች ይዘጋሉ። (ከባህላዊ አኮርዲዮን ባህሪ ጋር ተመሳሳይ - ይህ card በክፍሉ ላይ የተመሰረተ ነው). ባህሪው በዒላማው ሊሰበሰብ በሚችል ቦታ ላይ መቀመጥ አለበት. |
ቀያይር | ቡሊያን | እውነት ነው። | በጥሪ ላይ ሊሰበሰብ የሚችለውን አካል ይቀየራል። |
ዘዴዎች
ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች
ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .
.collapse(options)
የእርስዎን ይዘት እንደ ሊሰበሰብ የሚችል አካል ያገብራል። አማራጭ አማራጮችን ይቀበላል object
።
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
ሊሰበሰብ የሚችል አካል ወደ የሚታይ ወይም የተደበቀ ይቀየራል። ሊሰበሰብ የሚችል አካል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደshown.bs.collapse
ደዋዩ ይመለሳል hidden.bs.collapse
።
.collapse('show')
ሊፈርስ የሚችል አካል ያሳያል። ሊሰበሰብ የሚችል አካል በትክክል ከመታየቱ በፊት (ማለትም shown.bs.collapse
ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል።
.collapse('hide')
ሊፈርስ የሚችል አካል ይደብቃል። ሊሰበሰብ የሚችል አካል በትክክል ከመደበቅ በፊት (ማለትም hidden.bs.collapse
ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል።
.collapse('dispose')
የአንድ ንጥረ ነገር ውድቀትን ያጠፋል.
ክስተቶች
የቡትስትራፕ ውድቀት ክፍል ወደ ውድቀት ተግባር ለመያያዝ ጥቂት ክስተቶችን ያጋልጣል።
የክስተት አይነት | መግለጫ |
---|---|
አሳይ.bs. መውደቅ | show የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል . |
ታየ.bs.ሰብስብ | ይህ ክስተት የሚተኮሰው የውድቀት አካል ለተጠቃሚው እንዲታይ ከተደረገ ነው (የCSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል።) |
ደብቅ.bs. ሰብስብ | hide ዘዴው ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል . |
የተደበቀ.bs. ሰብስብ | ይህ ክስተት የሚተኮሰው የመሰብሰቢያ አካል ከተጠቃሚው ከተደበቀ ነው (የCSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል።) |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})