ހޭނެތިގެން ވެއްޓުން
މަދު ކްލާސްތަކަކާއި އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޕްލަގިންސްތަކާއެކު ތިބާގެ ޕްރޮޖެކްޓްގެ ތެރެއިން ކޮންޓެންޓްގެ ވިޒިބިލިޓީ ޓޮގްލް ކުރާށެވެ.
އެކަން ކުރާ ގޮތް
ކޮލެޕްސް ޖާވާސްކްރިޕްޓް ޕްލަގިން ބޭނުންކުރަނީ ކޮންޓެންޓް ދައްކާ ފޮރުވުމަށެވެ. ބަޓަން ނުވަތަ އެންކަރ ބޭނުން ކުރަނީ ތިބާ ޓޮގްލް ކުރާ ވަކި އެލިމެންޓްތަކަށް މެޕް ކުރެވޭ ޓްރިގަރ އެއްގެ ގޮތުގައެވެ. އެލިމެންޓެއް ކޮލަޕްސް ކުރުމުން height
އޭގެ މިހާރުގެ އަގުން ފެށިގެން އަށް އެނިމޭޓް ވާނެއެވެ 0
. ސީއެސްއެސް އިން އެނިމޭޝަންތައް ޙަވާލުކުރާ ގޮތަށް ބަލާއިރު، އެލިމެންޓެއްގެ padding
މައްޗަށް ބޭނުން ނުކުރެވޭނެއެވެ . .collapse
އޭގެ ބަދަލުގައި މިނިވަން ރެޕިންގ އެލިމެންޓެއްގެ ގޮތުގައި ކްލާސް ބޭނުން ކުރާށެވެ.
މި ކޮމްޕޮނެންޓްގެ އެނިމޭޝަން އިފެކްޓް ބިނާވެފައިވަނީ prefers-reduced-motion
މީޑިއާ ކިއުއަރީގެ މައްޗަށެވެ. އަޅުގަނޑުމެންގެ އެކްސެސިބިލިޓީ ޑޮކިއުމަންޓޭޝަންގެ ރިޑޫސްޑް މޮޝަން ބައި ބައްލަވާށެވެ .
މިސާލު
ކްލާސް ބަދަލުތަކުގެ ތެރެއިން އެހެން އެލިމެންޓެއް ދައްކައި ފޮރުވުމަށް ތިރީގައިވާ ބަޓަންތަކަށް ފިތާލާށެވެ:
.collapse
ކޮންޓެންޓް ފޮރުވައެވެ.collapsing
ޓްރާންސިޝަންތަކުގެ ތެރޭގައި އަމަލުކުރެއެވެ.collapse.show
ކޮންޓެންޓް ދައްކައެވެ
href
އެޓްރިބިއުޓް އާއި އެކު ލިންކެއް ، ނުވަތަ އެޓްރިބިއުޓް އާއި އެކު ބަޓަން ބޭނުން ކުރެވިދާނެއެވެ data-target
. ދެ ހާލަތުގައި ވެސް data-toggle="collapse"
ލާޒިމްވެ އެވެ.
އެތައް އަމާޒެއް
އޭ <button>
ނުވަތަ އޭގެ ނުވަތަ އެޓްރިބިއުޓްގައި <a>
ޖޭކުއަރީ ސެލެކްޓަރަކުން ރެފަރެންސްކޮށްގެން އެތައް އެލިމެންޓްތަކެއް ދައްކައި ފޮރުވޭނެއެވެ . މަލްޓިޕްލް ނުވަތަ އެލިމެންޓެއް ދައްކައި ފޮރުވޭނީ އެމީހުން ކޮންމެ މީހަކުވެސް އެމީހުންގެ ނުވަތަ އެޓްރިބިއުޓާއެކު އެއަށް ރިފަރެންސް ކޮށްފިނަމައެވެhref
data-target
<button>
<a>
href
data-target
ފުރަތަމަ އެލިމެންޓް ޓޮގްލް ކުރާށެވެ
އެކޯޑިއަން މިސާލެވެ
ކާޑު ކޮމްޕޮނެންޓް ބޭނުންކޮށްގެން ޑިފޯލްޓް ކޮލަޕްސް ބިހޭވިއަރ އެކްސްޓެންޑްކޮށް އެކޯޑިއަން އެއް އުފެއްދިދާނެއެވެ. އެކޯޑިއަން ސްޓައިލް ރަނގަޅަށް ހާސިލް ކުރުމަށްޓަކައި .accordion
ރެޕަރެއްގެ ގޮތުގައި ބޭނުން ކުރުން ޔަގީން ކުރައްވާށެވެ.
އެކްސެސިބިލިޓީ
aria-expanded
ކޮންޓްރޯލް އެލިމެންޓަށް އިތުރުކުރުން ޔަގީން ކުރައްވާށެވެ . މި އެޓްރިބިއުޓް އިން ސްކްރީން ރީޑަރސް އާއި މިފަދަ އެހީތެރި ޓެކްނޮލޮޖީތަކަށް ކޮންޓްރޯލާ ގުޅިފައިވާ ކޮލެޕްސިބަލް އެލިމެންޓްގެ މިހާރުގެ ހާލަތު ސާފުކޮށް ފޯރުކޮށްދެއެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ޑިފޯލްޓްކޮށް ބަންދުކޮށްފައިވާނަމަ، ކޮންޓްރޯލް އެލިމެންޓްގައިވާ އެޓްރިބިއުޓްގެ އަގު ހުންނަންވާނީ aria-expanded="false"
. show
ކްލާސް ބޭނުންކޮށްގެން ޑިފޯލްޓްކޮށް ހުޅުވާލުމަށް ކޮލެޕްސިބަލް އެލިމެންޓް ސެޓްކޮށްފައިވާނަމަ aria-expanded="true"
، އޭގެ ބަދަލުގައި ކޮންޓްރޯލްގައި ސެޓް ކުރާށެވެ. ޕްލަގިން އިން އޮޓޮމެޓިކުން މި އެޓްރިބިއުޓް ކޮންޓްރޯލްގައި ޓޮގްލް ކުރާނީ ކޮލެޕްސިބަލް އެލިމެންޓް ހުޅުވާފައި ނުވަތަ ބަންދުކޮށްފައި ހުރިތޯ ނުވަތަ ނޫންތޯ ބަލައިގެން (ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް، ނުވަތަ ޔޫޒަރ ޓްރިގަރ ކުރި އެހެން ކޮންޓްރޯލް އެލިމެންޓެއް ވެސް ހަމަ ކޮލެޕްސިބަލް އެލިމެންޓާ ގުޅިފައިވާތީ) އެވެ. ކޮންޓްރޯލް އެލިމެންޓްގެ އެޗްޓީއެމްއެލް އެލިމެންޓަކީ ބަޓަނެއް ނޫންނަމަ (އެބަހީ، an <a>
ނުވަތަ <div>
)، އެޓްރިބިއުޓްrole="button"
އެލިމެންޓަށް އިތުރުކުރަން ޖެހެއެވެ.
ތިބާގެ ކޮންޓްރޯލް އެލިމެންޓް ޓާގެޓް ކުރަނީ އެއް ކޮލެޕްސިބަލް އެލިމެންޓަކަށް ނަމަ – މާނައަކީ data-target
އެޓްރިބިއުޓް އިޝާރާތް ކުރަނީ ސެލެކްޓަރަކަށް ނަމަ – ތިބާ އެ އެޓްރިބިއުޓް ކޮންޓްރޯލް އެލިމެންޓަށް id
އިތުރުކުރަންވާނީ ، ކޮލެޕްސިބަލް އެލިމެންޓުގެ ގެ ހިމެނޭ ގޮތަށެވެ. ޒަމާނީ ސްކްރީން ރީޑަރސް އާއި މިފަދަ އެހީތެރި ޓެކްނޮލޮޖީތަކުން މި އެޓްރިބިއުޓްގެ ބޭނުން ހިފައިގެން ސީދާ ކޮލެޕްސިބަލް އެލިމެންޓަށް ޚުދު ދިއުމަށް އިތުރު ޝޯޓްކަޓްތައް ފޯރުކޮށްދެއެވެ.aria-controls
id
ބޫޓްސްޓްރެޕްގެ މިހާރުގެ ތަންފީޒުކުރުމުގައި ވައި-އޭރިއާ އޮތޯރިންގ ޕްރެކްޓިސަސް 1.1 އެކޯޑިއަން ޕެޓަރންގައި ބަޔާންކޮށްފައިވާ އެކިއެކި ކީބޯޑް އިންޓަރެކްޝަންތައް ނުހިމެނޭކަން ފާހަގަކޮށްލަން - ކަސްޓަމް ޖާވާސްކްރިޕްޓާއެކު މިކަންކަން އަމިއްލައަށް ހިމަނަން ޖެހޭނެއެވެ.
ބޭނުން ކުރުން
ކޮލަޕްސް ޕްލަގިން އިން ހެވީ ލިފްޓިންގ ހެންޑްލް ކުރުމަށް މަދު ކްލާސްތަކެއް ބޭނުން ކުރެއެވެ:
.collapse
ކޮންޓެންޓް ފޮރުވައެވެ.collapse.show
ކޮންޓެންޓް ދައްކައެވެ.collapsing
ޓްރާންސިޝަން ފެށުމުން އިތުރުކޮށް، ނިމުމުން ނައްތާލެވޭނެއެވެ
މި ކްލާސްތައް _transitions.scss
.
ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް
ހަމައެކަނި އެއް ނުވަތަ އެއަށްވުރެ ގިނަ ކޮލެޕްސިބަލް އެލިމެންޓްތަކުގެ ކޮންޓްރޯލް އޮޓޮމެޓިކުން ހަވާލުކުރުމަށްޓަކައި އެލިމެންޓަށް data-toggle="collapse"
އަދި އޭ އިތުރުކޮށްލާށެވެ. data-target
އެޓްރިބިއުޓް ބަލައިގަންނަނީ data-target
ކޮލެޕްސް އެޕްލައި ކުރުމަށް ސީއެސްއެސް ސެލެކްޓަރެކެވެ. collapse
ކޮލެޕްސިބަލް އެލިމެންޓަށް ކްލާސް އިތުރުކުރުން ޔަގީން ކުރައްވާށެވެ . ޑިފޯލްޓްކޮށް ހުޅުވާލަން ބޭނުންނަމަ، އިތުރު ކްލާސް އިތުރުކުރައްވާށެވެ show
.
ކޮލެޕްސިބަލް އޭރިއާއަކަށް އެކޯޑިއަން ކަހަލަ ގްރޫޕް މެނޭޖްމަންޓް އިތުރުކުރުމަށްޓަކައި، ޑޭޓާ އެޓްރިބިއުޓް އިތުރުކުރުން data-parent="#selector"
. މިކަން ޢަމަލީ ގޮތުން ބަލާލުމަށް ޑެމޯއަށް ރިފަރ ކުރާށެވެ.
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް
މެނުއަލްކޮށް އެނެބަލް ކުރާނީ:
އިޚްތިޔާރުތައް
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-parent=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
ބެލެނިވެރިޔާ އެވެ | ސެލެކްޓަރ | ޖީކުއަރީ އޮބްޖެކްޓް | ޑީއޯއެމް އެލިމެންޓް އެވެ | ރަނގަޅުނޫން | ޕޭރެންޓް ފޯރުކޮށްދީފިނަމަ، މި ކޮލެޕްސިބަލް އައިޓަމް ދައްކާއިރު، ކަނޑައެޅިފައިވާ ޕޭރެންޓްގެ ދަށުގައިވާ ހުރިހާ ކޮލެޕްސިބަލް އެލިމެންޓްތައް ބަންދުވާނެއެވެ. card (ސަގާފީ އެކޯޑިއަން ސުލޫކާ އެއްގޮތް - މިއީ ކްލާހަށް ބަރޯސާވާ ކަމެކެވެ ). އެޓްރިބިއުޓް ސެޓް ކުރަން ޖެހެނީ ޓާގެޓް ކޮލެޕްސިބަލް އޭރިއާގައެވެ. |
ޓޮގްލް ކޮށްލާށެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | އިންވޮކޭޝަންގައި ކޮލެޕްސިބަލް އެލިމެންޓް ޓޮގްލް ކުރެއެވެ |
ގޮތްތައް
އެސިންކްރޮނަސް މެތޯޑްސް އާއި ޓްރާންސިޝަންސް
ހުރިހާ އެޕީއައި މެތޯޑްތަކަކީ އެސިންކްރޮނަސް މެތޯޑްތަކެއް ކަމުން ޓްރާންސިޝަނެއް ފެށެއެވެ . އެމީހުން އެނބުރި ގުޅާ މީހާއަށް ޓްރާންސިޝަން ފެށުނުހާ އަވަހަކަށް އެކަމަކު ނިމުމުގެ ކުރިން . މީގެ އިތުރުން ޓްރާންސިޝަން ކޮމްޕޮނެންޓެއްގައި މެތޯޑް ކޯލެއް ކުރާއިރު އަޅާނުލެވޭނެއެވެ .
އިތުރު މަޢުލޫމާތު ހޯދުމަށް އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަން ބައްލަވާށެވެ .
.collapse(options)
ކޮލެޕްސިބަލް އެލިމެންޓެއްގެ ގޮތުގައި ތިބާގެ ކޮންޓެންޓް އެކްޓިވޭޓް ކުރެއެވެ. އިޚްތިޔާރީ އިޚްތިޔާރުތަކެއް ބަލައިގަންނަނީ object
.
.collapse('toggle')
ކޮލެޕްސިބަލް އެލިމެންޓެއް ދައްކާ ނުވަތަ ފޮރުވުމަށް ޓޮގްލް ކުރެއެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ shown.bs.collapse
ނުވަތަ hidden.bs.collapse
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ.
.collapse('show')
ކޮލެޕްސިބަލް އެލިމެންޓެއް ދައްކައެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.collapse
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ.
.collapse('hide')
ކޮލެޕްސިބަލް އެލިމެންޓެއް ފޮރުވައެވެ. ކޮލެޕްސިބަލް އެލިމެންޓް ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ hidden.bs.collapse
އިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ.
.collapse('dispose')
އުނިއިތުރެއްގެ ވެއްޓުން ނައްތާލައެވެ.
އިވެންޓްސް
ބޫޓްސްޓްރެޕްގެ ކޮލަޕްސް ކްލާސް އިން ކޮލަޕްސް ފަންކްޝަނަލިޓީއަށް ހޫކް ކުރުމަށް މަދު އިވެންޓްތަކެއް ހާމަކޮށްދެ އެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ޝޯ.ބީއެސް.ކޮލަޕްސް ކޮށްލާށެވެ | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ show އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. |
ދައްކާފައި.bs.collapse | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ކޮލަޕްސް އެލިމެންޓެއް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |
hide.bs.collapse ކޮށްލާށެވެ | މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hide މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
ފޮރުވިފައިވާ.bs.collapse | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޔޫޒަރަށް ކޮލެޕްސް އެލިމެންޓެއް ފޮރުވިފައި އޮތުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ. |