ޓޯސްޓްސް އެވެ
ޓޯސްޓަކާއި، ލުއި އަދި ފަސޭހައިން ކަސްޓަމައިޒް ކުރެވޭ އެލާޓް މެސެޖަކާއެކު ޒިޔާރަތްކުރާ ފަރާތްތަކަށް ނޮޓިފިކޭޝަންތައް ޕުޝް ކުރާށެވެ.
ޓޯސްޓް އަކީ މޯބައިލް އަދި ޑެސްކްޓޮޕް އޮޕަރޭޓިން ސިސްޓަމްތަކުން މަގުބޫލުކޮށްފައިވާ ޕުޝް ނޮޓިފިކޭޝަންތައް ނަކަލު ކުރުމަށް ފަރުމާކޮށްފައިވާ ލުއި ނޮޓިފިކޭޝަންތަކެކެވެ. އެއީ ފްލެކްސްބޮކްސް އާއި އެކު ހަދާފައިވާ އެއްޗެހި ކަމުން އެލައިންކޮށް ޕޮޒިޝަން ކުރަން ފަސޭހަ އެވެ.
އޯވަރވިއު
ޓޯސްޓް ޕްލަގިން ބޭނުންކުރާއިރު އެނގެން ޖެހޭ ކަންތައްތައް:
- އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ބިލްޑިންގ ފްރޮމް ސޯސް ނަމަ، އެއަށް ބޭނުންވަނީ
util.js
. - ޓޯސްޓްތަކަކީ ޕާފޯމަންސް ސަބަބުތަކާހުރެ އޮޕްޓް-އިން ކުރާ އެއްޗަކަށް ވާތީ އަމިއްލައަށް އިނިޝިއަލައިޒް ކުރަން ޖެހެ އެވެ .
- ޓޯސްޓްތައް ޕޮޒިޝަން ކުރުމުގެ ޒިންމާ އުފުލަންޖެހޭނީ ތިޔަބޭފުޅުންގެ ޒިންމާއެއްކަން ފާހަގަކުރަމެވެ.
- ކަނޑައެޅިފައި ނުވާނަމަ ޓޯސްޓްތައް އޮޓޮމެޓިކުން ފޮރުވޭނެއެވެ
autohide: false
.
މި ކޮމްޕޮނެންޓްގެ އެނިމޭޝަން އިފެކްޓް ބިނާވެފައިވަނީ prefers-reduced-motion
މީޑިއާ ކިއުއަރީގެ މައްޗަށެވެ. އަޅުގަނޑުމެންގެ އެކްސެސިބިލިޓީ ޑޮކިއުމަންޓޭޝަންގެ ރިޑޫސްޑް މޮޝަން ބައި ބައްލަވާށެވެ .
މިސާލުތަކެވެ
އާދައިގެ
އެކްސްޓެންސިބަލް އަދި ޕްރިޑިކްޓެބަލް ޓޯސްޓްތަކަށް ހިތްވަރު ދިނުމަށްޓަކައި، ހެޑަރ އާއި ބޮޑީ އެއް ހެދުމަށް އަޅުގަނޑުމެން ލަފާދެމެވެ. ޓޯސްޓް ހެޑަރސް ބޭނުން display: flex
, އަޅުގަނޑުމެންގެ މާރޖިން އަދި ފްލެކްސްބޮކްސް ޔުޓިލިޓީސްގެ ސަބަބުން ކޮންޓެންޓް ފަސޭހައިން އެލައިން ކުރެވޭނެ ގޮތް ހެދުން.
ޓޯސްޓްތަކަކީ ބޭނުންވާ ވަރަށް ފްލެކްސިބަލް އެއްޗަކަށް ވާއިރު، ބޭނުންވާ މާކަޕް ވަރަށް މަދު އެއްޗެކެވެ. އެންމެ ކުޑަމިނުން، ތިޔަބޭފުޅުންގެ “ޓޯސްޓް” ކޮންޓެންޓް ހިމެނޭނެ އެއް އުނިއިތުރެއް އަޅުގަނޑުމެން ބޭނުންވެ، ޑިސްމިސް ބަޓަނަކަށް ވަރަށް ބޮޑަށް ބާރުއަޅަމެވެ.
ޓްރާންސްލޫސެންޓް އެވެ
ޓޯސްޓްތަކަކީ ވެސް ކުޑަކޮށް ޓްރާންސްލޫސެންޓް އެއްޗެހި ކަމުން، އޭގެ މައްޗަށް ފެނިދާނެ ކޮންމެ އެއްޗެއްގެ މައްޗަށް ބްލެންޑް ވެއެވެ. ސީއެސްއެސް ޕްރޮޕަޓީއަށް ސަޕޯޓްކުރާ ބްރައުޒާތަކަށް backdrop-filter
، ޓޯސްޓެއްގެ ދަށުގައި އެލިމެންޓްތައް ބްލަރ ކުރަން ވެސް މަސައްކަތް ކުރާނަމެވެ.
ސްޓޭކިންގ
ގިނަ ޓޯސްޓްތަކެއް ހުންނައިރު، އަޅުގަނޑުމެން ޑިފޯލްޓްކޮށް ކިޔަން ފަސޭހަ ގޮތަކަށް ވަރުގަދައަށް ސްޓޭކް ކުރަން.
ޕްލޭސްމަންޓް
ބޭނުންވާ ގޮތަށް ކަސްޓަމް ސީއެސްއެސް އާއި އެކު ޓޯސްޓްތައް ބަހައްޓާށެވެ. މަތީ ކަނާތް ފަރާތް ގިނައިން ބޭނުން ކުރަނީ ނޮޓިފިކޭޝަންތަކަށް ކަމަށާއި، މަތީ މެދު ފަރާތް ވެސް ބޭނުން ކުރެއެވެ. ދުވަހަކުވެސް އެއްފަހަރާ އެއް ޓޯސްޓް ދައްކަން އުޅޭނަމަ، ޕޮޒިޝަނިންގ ސްޓައިލްތައް ރަނގަޅަށް ޖައްސާށެވެ .toast
.
އިތުރު ނޮޓިފިކޭޝަންތައް އުފައްދާ ސިސްޓަމްތަކަށް، ފަސޭހައިން ސްޓޭކް ކުރެވޭނެ ގޮތަށް ރެޕިންގ އެލިމެންޓެއް ބޭނުން ކުރުމަށް ވިސްނާށެވެ.
އަދި ޓޯސްޓްތައް ހޮރައިޒޮންޓަލީ އަދި/ނުވަތަ ވަރޓިކަލީ އެލައިން ކުރުމަށް ފްލެކްސްބޮކްސް ޔުޓިލިޓީސް އާއި އެކު ފެންސީ ލިބިދާނެ އެވެ.
އެކްސެސިބިލިޓީ
ޓޯސްޓްތަކަކީ ތިބާގެ ޒިޔާރަތްކުރާ ފަރާތްތަކަށް ނުވަތަ ބޭނުންކުރާ ފަރާތްތަކަށް ކުދިކުދި މެދުކެނޑުމަކަށް ވާން ނިންމާފައިވާ އެއްޗަކަށް ވާތީ، ސްކްރީން ރީޑަރާއި މިފަދަ އެހީތެރި ޓެކްނޮލޮޖީތައް ހުރި މީހުންނަށް އެހީތެރިވުމަށްޓަކައި، ތިބާގެ ޓޯސްޓްތައް aria-live
ސަރަހައްދެއްގައި އޮޅާލަން ޖެހެއެވެ . ލައިވް ރީޖަންތަކަށް އަންނަ ބަދަލުތައް (ޓޯސްޓް ކޮމްޕޮނެންޓެއް އިންޖެކްޓްކުރުން/އަޕްޑޭޓްކުރުން ފަދަ) ސްކްރީން ރީޑަރުން އޮޓޮމެޓިކުން އިއުލާންކުރަނީ ޔޫޒަރުގެ ފޯކަސް ބަދަލުކުރަން ނުޖެހި ނުވަތަ އެހެން ގޮތަކުން ޔޫޒަރަށް މެދުކެނޑުމެއް ނެތިއެވެ. މީގެ އިތުރުން، aria-atomic="true"
ބަދަލު ކުރެވުނު އެއްޗެއް އިއުލާން ކުރުމުގެ ބަދަލުގައި، މުޅި ޓޯސްޓް އަބަދުވެސް އެއް (އެޓޮމިކް) ޔުނިޓެއްގެ ގޮތުގައި އިއުލާން ކުރެވޭތޯ ބެލުމަށް ހިމަނާށެވެ ވަގުތުގެ ފަހުގެ ހިސާބެއް). ބޭނުންވާ މަޢުލޫމާތަކީ ޕްރޮސެސްއަށް މުހިންމު މަޢުލޫމާތެއްނަމަ، މިސާލަކަށް ފޯމެއްގައި ހުރި ގޯސްތަކުގެ ލިސްޓަކަށް، ދެން އެލާޓް ކޮމްޕޮނެންޓް ބޭނުންކުރާށެވެޓޯސްޓްގެ ބަދަލުގައި.
ޓޯސްޓް ޖެނެރޭޓް ކުރުމުގެ ނުވަތަ އަޕްޑޭޓް ކުރުމުގެ ކުރިން ލައިވް ރީޖަން މާކަޕްގައި ހުންނަން ޖެހޭކަން ފާހަގަކޮށްލެވެއެވެ . އެއްފަހަރާ ޑައިނަމިކް ގޮތެއްގައި މިދެކަންތައްވެސް ޖެނެރޭޓްކޮށް ޕޭޖަށް އިންޖެކްޓްކޮށްފިނަމަ، އާންމުކޮށް އެސިސްޓިވް ޓެކްނޮލޮޖީތަކުން އެކަންކަން އިއުލާން ނުކުރެވޭނެއެވެ.
އަދި ކޮންޓެންޓަށް ބަލާފައި role
އަދި ލެވެލް އެޑެޕްޓް ކުރަން ޖެހެއެވެ . aria-live
އެއީ އެރަރ ފަދަ މުހިންމު މެސެޖެއް ނަމަ، ބޭނުން ކުރާށެވެ role="alert" aria-live="assertive"
, އެހެން ނޫންނަމަ role="status" aria-live="polite"
އެޓްރިބިއުޓްސް ބޭނުން ކުރާށެވެ.
ދައްކާ ކޮންޓެންޓަށް ބަދަލު އަންނަ ވަރަކަށް، ޓޯސްޓް ކިޔުމަށް މީހުންނަށް އެކަށީގެންވާ ވަގުތު ލިބޭނެ ގޮތް ހެދުމަށްޓަކައި delay
ޓައިމްއައުޓް އަޕްޑޭޓް ކުރުން ޔަގީން ކުރައްވާށެވެ.
ޓޯސްޓް ބޭނުންކުރާއިރު autohide: false
ޓޯސްޓް ޑިސްމިސް ކުރެވޭނެ ގޮތަށް ކްލޯޒް ބަޓަންއެއް އިތުރުކުރަން ޖެހެ އެވެ.
ޖާވާސްކްރިޕްޓް ސުލޫކު
ބޭނުން ކުރުން
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓޯސްޓްތައް އިނިޝިއަލައިޒް ކުރުން:
އިޚްތިޔާރުތައް
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
އެނިމޭޝަން އެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | ޓޯސްޓަށް ސީއެސްއެސް ފޭޑް ޓްރާންސިޝަން އެއް ޖަހާށެވެ |
އޮޓޯހައިޑް އެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | އޮޓޯ ފޮރުވާ ޓޯސްޓް |
ލަސްވުން | ނަންބަރު | 500 |
ޓޯސްޓް ފޮރުވުން ލަސްކުރުން (ms) |
ގޮތްތައް
އެސިންކްރޮނަސް މެތޯޑްސް އާއި ޓްރާންސިޝަންސް
ހުރިހާ އެޕީއައި މެތޯޑްތަކަކީ އެސިންކްރޮނަސް މެތޯޑްތަކެއް ކަމުން ޓްރާންސިޝަނެއް ފެށެއެވެ . އެމީހުން އެނބުރި ގުޅާ މީހާއަށް ޓްރާންސިޝަން ފެށުނުހާ އަވަހަކަށް އެކަމަކު ނިމުމުގެ ކުރިން . މީގެ އިތުރުން ޓްރާންސިޝަން ކޮމްޕޮނެންޓެއްގައި މެތޯޑް ކޯލެއް ކުރާނަމަ އަޅާނުލެވޭނެއެވެ .
އިތުރު މަޢުލޫމާތު ހޯދުމަށް އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަން ބައްލަވާށެވެ .
$().toast(options)
އެލިމެންޓް ކަލެކްޝަނަކަށް ޓޯސްޓް ހެންޑްލަރ އެއް އެޓޭޗް ކުރެއެވެ.
.toast('show')
އެލިމެންޓެއްގެ ޓޯސްޓް ހާމަކޮށްދެއެވެ. ޓޯސްޓް ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.toast
އިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރިދެއެވެ. މި މެތޯޑަށް މެނުއަލްކޮށް ގުޅަން ޖެހޭނެ، އޭގެ ބަދަލުގައި ތިބާގެ ޓޯސްޓް ނުފެންނާނެ.
.toast('hide')
އެލިމެންޓެއްގެ ޓޯސްޓް ފޮރުވައެވެ. ޓޯސްޓް ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ އިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރި ދެއެވެ . ތިބާއަށް މެނުއަލްކޮށް މި މެތޯޑަށް ގޮވާލަން ޖެހޭނީ hidden.bs.toast
ތިބާ ހެދިއްޖެނަމަ .autohide
false
.toast('dispose')
އެލިމެންޓެއްގެ ޓޯސްޓް ފޮރުވައެވެ. ތިބާގެ ޓޯސްޓް ޑީއޯއެމްގައި ހުންނާނެ ނަމަވެސް އިތުރަށް ނުދައްކާނެއެވެ.
އިވެންޓްސް
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ޝޯ.ބީއެސް.ޓޯސްޓް | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ show އިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ. |
ދައްކާފައި.ބީ.އެސް.ޓޯސްޓް | މި އިވެންޓް ފަޔަރ ކުރަނީ ޓޯސްޓް ބޭނުންކުރާ މީހާއަށް ފެންނަ ގޮތަށް ހެދުމުންނެވެ. |
ފޮރުވާ.ބީއެސް.ޓޯސްޓް | މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hide އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
ފޮރުވިފައިވާ.ބީއެސް.ޓޯސްޓް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޯސްޓް ބޭނުންކުރާ މީހާއަށް ފޮރުވައިގެން ނިމުމުންނެވެ. |