in English

ޓޯސްޓްސް އެވެ

ޓޯސްޓަކާއި، ލުއި އަދި ފަސޭހައިން ކަސްޓަމައިޒް ކުރެވޭ އެލާޓް މެސެޖަކާއެކު ޒިޔާރަތްކުރާ ފަރާތްތަކަށް ނޮޓިފިކޭޝަންތައް ޕުޝް ކުރާށެވެ.

ޓޯސްޓް އަކީ މޯބައިލް އަދި ޑެސްކްޓޮޕް އޮޕަރޭޓިން ސިސްޓަމްތަކުން މަގުބޫލުކޮށްފައިވާ ޕުޝް ނޮޓިފިކޭޝަންތައް ނަކަލު ކުރުމަށް ފަރުމާކޮށްފައިވާ ލުއި ނޮޓިފިކޭޝަންތަކެކެވެ. އެއީ ފްލެކްސްބޮކްސް އާއި އެކު ހަދާފައިވާ އެއްޗެހި ކަމުން އެލައިންކޮށް ޕޮޒިޝަން ކުރަން ފަސޭހަ އެވެ.

އޯވަރވިއު

ޓޯސްޓް ޕްލަގިން ބޭނުންކުރާއިރު އެނގެން ޖެހޭ ކަންތައްތައް:

  • އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ބިލްޑިންގ ފްރޮމް ސޯސް ނަމަ، އެއަށް ބޭނުންވަނީutil.js .
  • ޓޯސްޓްތަކަކީ ޕާފޯމަންސް ސަބަބުތަކާހުރެ އޮޕްޓް-އިން ކުރާ އެއްޗަކަށް ވާތީ އަމިއްލައަށް އިނިޝިއަލައިޒް ކުރަން ޖެހެ އެވެ .
  • ޓޯސްޓްތައް ޕޮޒިޝަން ކުރުމުގެ ޒިންމާ އުފުލަންޖެހޭނީ ތިޔަބޭފުޅުންގެ ޒިންމާއެއްކަން ފާހަގަކުރަމެވެ.
  • ކަނޑައެޅިފައި ނުވާނަމަ ޓޯސްޓްތައް އޮޓޮމެޓިކުން ފޮރުވޭނެއެވެ autohide: false.
މި ކޮމްޕޮނެންޓްގެ އެނިމޭޝަން އިފެކްޓް ބިނާވެފައިވަނީ prefers-reduced-motionމީޑިއާ ކިއުއަރީގެ މައްޗަށެވެ. އަޅުގަނޑުމެންގެ އެކްސެސިބިލިޓީ ޑޮކިއުމަންޓޭޝަންގެ ރިޑޫސްޑް މޮޝަން ބައި ބައްލަވާށެވެ .

މިސާލުތަކެވެ

އާދައިގެ

އެކްސްޓެންސިބަލް އަދި ޕްރިޑިކްޓެބަލް ޓޯސްޓްތަކަށް ހިތްވަރު ދިނުމަށްޓަކައި، ހެޑަރ އާއި ބޮޑީ އެއް ހެދުމަށް އަޅުގަނޑުމެން ލަފާދެމެވެ. ޓޯސްޓް ހެޑަރސް ބޭނުން display: flex, އަޅުގަނޑުމެންގެ މާރޖިން އަދި ފްލެކްސްބޮކްސް ޔުޓިލިޓީސްގެ ސަބަބުން ކޮންޓެންޓް ފަސޭހައިން އެލައިން ކުރެވޭނެ ގޮތް ހެދުން.

ޓޯސްޓްތަކަކީ ބޭނުންވާ ވަރަށް ފްލެކްސިބަލް އެއްޗަކަށް ވާއިރު، ބޭނުންވާ މާކަޕް ވަރަށް މަދު އެއްޗެކެވެ. އެންމެ ކުޑަމިނުން، ތިޔަބޭފުޅުންގެ “ޓޯސްޓް” ކޮންޓެންޓް ހިމެނޭނެ އެއް އުނިއިތުރެއް އަޅުގަނޑުމެން ބޭނުންވެ، ޑިސްމިސް ބަޓަނަކަށް ވަރަށް ބޮޑަށް ބާރުއަޅަމެވެ.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ދިރިއުޅުން

ތިރީގައިވާ ބަޓަންއަށް ފިތާލުމުން ޑިފޯލްޓްކޮށް ފޮރުވިފައިވާ ޓޯސްޓެއް (ކަނާތް ފަރާތުގެ ތިރީ ކޮޅުގައި އަޅުގަނޑުމެންގެ ޔުޓިލިޓީސް ޖަހާފައި ހުންނަ) ފެންނާނެއެވެ .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

ޓްރާންސްލޫސެންޓް އެވެ

ޓޯސްޓްތަކަކީ އޭގެ ތިރީގައި ހުންނަ އެއްޗަކާ ގުޅެން ކުޑަކޮށް ޓްރާންސްލޫސެންޓް އެއްޗެކެވެ.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ސްޓޭކިންގ

ގިނަ ޓޯސްޓްތަކެއް ހުންނައިރު، އަޅުގަނޑުމެން ޑިފޯލްޓްކޮށް ކިޔަން ފަސޭހަ ގޮތަކަށް ވަރުގަދައަށް ސްޓޭކް ކުރަން.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

ޕްލޭސްމަންޓް

ބޭނުންވާ ގޮތަށް ކަސްޓަމް ސީއެސްއެސް އާއި އެކު ޓޯސްޓްތައް ބަހައްޓާށެވެ. މަތީ ކަނާތް ފަރާތް ގިނައިން ބޭނުން ކުރަނީ ނޮޓިފިކޭޝަންތަކަށް ކަމަށާއި، މަތީ މެދު ފަރާތް ވެސް ބޭނުން ކުރެއެވެ. ދުވަހަކުވެސް އެއްފަހަރާ އެއް ޓޯސްޓް ދައްކަން އުޅޭނަމަ، ޕޮޒިޝަނިންގ ސްޓައިލްތައް ރަނގަޅަށް ޖައްސާށެވެ .toast.

ބޫޓްސްޓްރެޕް އެވެ މީގެ 11 މިނެޓް ކުރިން
ހެލޯ، ދުނިޔެ! މިއީ ޓޯސްޓް މެސެޖެކެވެ. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

އިތުރު ނޮޓިފިކޭޝަންތައް އުފައްދާ ސިސްޓަމްތަކަށް، ފަސޭހައިން ސްޓޭކް ކުރެވޭނެ ގޮތަށް ރެޕިންގ އެލިމެންޓެއް ބޭނުން ކުރުމަށް ވިސްނާށެވެ.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

އަދި ޓޯސްޓްތައް ހޮރައިޒޮންޓަލީ އަދި/ނުވަތަ ވަރޓިކަލީ އެލައިން ކުރުމަށް ފްލެކްސްބޮކްސް ޔުޓިލިޓީސް އާއި އެކު ފެންސީ ލިބިދާނެ އެވެ.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

އެކްސެސިބިލިޓީ

ޓޯސްޓްތަކަކީ ތިބާގެ ޒިޔާރަތްކުރާ ފަރާތްތަކަށް ނުވަތަ ބޭނުންކުރާ ފަރާތްތަކަށް ކުދިކުދި މެދުކެނޑުމަކަށް ވާން ނިންމާފައިވާ އެއްޗަކަށް ވާތީ، ސްކްރީން ރީޑަރާއި މިފަދަ އެހީތެރި ޓެކްނޮލޮޖީތައް ހުރި މީހުންނަށް އެހީތެރިވުމަށްޓަކައި، ތިބާގެ ޓޯސްޓްތައް aria-liveސަރަހައްދެއްގައި އޮޅާލަން ޖެހެއެވެ . ލައިވް ރީޖަންތަކަށް އަންނަ ބަދަލުތައް (ޓޯސްޓް ކޮމްޕޮނެންޓެއް އިންޖެކްޓްކުރުން/އަޕްޑޭޓްކުރުން ފަދަ) ސްކްރީން ރީޑަރުން އޮޓޮމެޓިކުން އިއުލާންކުރަނީ ޔޫޒަރުގެ ފޯކަސް ބަދަލުކުރަން ނުޖެހި ނުވަތަ އެހެން ގޮތަކުން ޔޫޒަރަށް މެދުކެނޑުމެއް ނެތިއެވެ. މީގެ އިތުރުން، aria-atomic="true"ހަމައެކަނި ބަދަލު ކުރެވުނު އެއްޗެއް އިޢުލާން ކުރުމަށްވުރެ، މުޅި ޓޯސްޓް އަބަދުވެސް އެއް (އެޓޮމިކް) ޔުނިޓެއްގެ ގޮތުގައި އިޢުލާން ކުރެވޭކަން ކަށަވަރު ކުރުމަށް ހިމަނާށެވެ ފަހުގެ ހިސާބަކުން). ބޭނުންވާ މަޢުލޫމާތަކީ ޕްރޮސެސްއަށް މުހިންމު މަޢުލޫމާތެއްނަމަ، މިސާލަކަށް ފޯމެއްގައި ހުރި ގޯސްތަކުގެ ލިސްޓަކަށް، ދެން އެލާޓް ކޮމްޕޮނެންޓް ބޭނުންކުރާށެވެޓޯސްޓްގެ ބަދަލުގައި.

ޓޯސްޓް ޖެނެރޭޓް ކުރުމުގެ ނުވަތަ އަޕްޑޭޓް ކުރުމުގެ ކުރިން ލައިވް ރީޖަން މާކަޕްގައި ހުންނަން ޖެހޭކަން ފާހަގަކޮށްލެވެއެވެ . އެއްފަހަރާ ޑައިނަމިކް ގޮތެއްގައި މިދެކަންތައްވެސް ޖެނެރޭޓްކޮށް ޕޭޖަށް އިންޖެކްޓްކޮށްފިނަމަ، އާންމުކޮށް އެސިސްޓިވް ޓެކްނޮލޮޖީތަކުން އެކަންކަން އިއުލާން ނުކުރެވޭނެއެވެ.

އަދި ކޮންޓެންޓަށް ބަލާފައި roleއަދި ލެވެލް އެޑެޕްޓް ކުރަން ޖެހެއެވެ . aria-liveއެއީ އެރަރ ފަދަ މުހިންމު މެސެޖެއް ނަމަ، ބޭނުން ކުރާށެވެ role="alert" aria-live="assertive", އެހެން ނޫންނަމަ role="status" aria-live="polite"އެޓްރިބިއުޓްސް ބޭނުން ކުރާށެވެ.

ދައްކާ ކޮންޓެންޓަށް ބަދަލު އަންނަ ވަރަކަށް، ޓޯސްޓް ކިޔުމަށް އެކަށީގެންވާ ވަގުތު ލިބޭނެ ގޮތަށް delayޓައިމްއައުޓް އަޕްޑޭޓް ކުރުން ޔަގީން ކުރައްވާށެވެ.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

ޓޯސްޓް ބޭނުންކުރާއިރު autohide: falseޓޯސްޓް ޑިސްމިސް ކުރެވޭނެ ގޮތަށް ކްލޯޒް ބަޓަންއެއް އިތުރުކުރަން ޖެހެ އެވެ.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ޓެކްނިކަލީ ޓޯސްޓަށް ފޯކަސް ކުރެވޭ/އެކްޝަން ކުރެވޭ ކޮންޓްރޯލްތައް (އިތުރު ބަޓަން ނުވަތަ ލިންކް ފަދަ) އިތުރު ކުރެވިދާނެ ނަމަވެސް، އޮޓޯހައިޑިންގ ޓޯސްޓްތަކަށް މިކަން ކުރުމުން ދުރުހެލިވާން ޖެހެއެވެ. Even if you give the toast a long delaytimeout , ކީބޯޑް އަދި އެސިސްޓިވް ޓެކްނޮލޮޖީ ބޭނުންކުރާ ފަރާތްތަކަށް ފިޔަވަޅު އެޅުމަށް ވަގުތުން ޓޯސްޓާ ހަމައަށް ދިއުމަށް ދަތިވެދާނެ (ޓޯސްޓްތައް ދައްކާއިރު ފޯކަސް ނުލިބޭތީ). މުޅިންވެސް އިތުރު ކޮންޓްރޯލްތަކެއް ގެންގުޅެން ޖެހޭނަމަ، އަޅުގަނޑުމެން ލަފާދެނީ ޓޯސްޓެއް ބޭނުންކުރުމަށެވެ autohide: false.

ޖާވާސްކްރިޕްޓް ސުލޫކު

ބޭނުން ކުރުން

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓޯސްޓްތައް އިނިޝިއަލައިޒް ކުރުން:

$('.toast').toast(option)

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation="".

ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
އެނިމޭޝަން އެވެ ބޫލިއަން އެވެ ރަނގަޅު ޓޯސްޓަށް ސީއެސްއެސް ފޭޑް ޓްރާންސިޝަން އެއް ޖަހާށެވެ
އޮޓޯހައިޑް އެވެ ބޫލިއަން އެވެ ރަނގަޅު އޮޓޯ ފޮރުވާ ޓޯސްޓް
ލަސްވުން ނަންބަރު 500 ޓޯސްޓް ފޮރުވުން ލަސްކުރުން (ms)

ގޮތްތައް

އެސިންކްރޮނަސް މެތޯޑްސް އާއި ޓްރާންސިޝަންސް

ހުރިހާ އެޕީއައި މެތޯޑްތަކަކީ އެސިންކްރޮނަސް މެތޯޑްތަކެއް ކަމުން ޓްރާންސިޝަނެއް ފެށެއެވެ . އެމީހުން އެނބުރި ގުޅާ މީހާއަށް ޓްރާންސިޝަން ފެށުނުހާ އަވަހަކަށް އެކަމަކު ނިމުމުގެ ކުރިން . މީގެ އިތުރުން ޓްރާންސިޝަން ކޮމްޕޮނެންޓެއްގައި މެތޯޑް ކޯލެއް ކުރާނަމަ އަޅާނުލެވޭނެއެވެ .

އިތުރު މަޢުލޫމާތު ހޯދުމަށް އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަން ބައްލަވާށެވެ .

$().toast(options)

އެލިމެންޓް ކަލެކްޝަނަކަށް ޓޯސްޓް ހެންޑްލަރ އެއް އެޓޭޗް ކުރެއެވެ.

.toast('show')

އެލިމެންޓެއްގެ ޓޯސްޓް ހާމަކޮށްދެއެވެ. ޓޯސްޓް ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.toastއިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރިދެއެވެ. މި މެތޯޑަށް މެނުއަލްކޮށް ގުޅަން ޖެހޭނެ، އޭގެ ބަދަލުގައި ތިބާގެ ޓޯސްޓް ނުފެންނާނެ.

$('#element').toast('show')

.toast('hide')

އެލިމެންޓެއްގެ ޓޯސްޓް ފޮރުވައެވެ. ޓޯސްޓް ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ އިވެންޓް ހިނގުމުގެ ކުރިން) ގުޅާ މީހާއަށް އެނބުރި ދެއެވެ . ތިބާއަށް މެނުއަލްކޮށް މި މެތޯޑަށް ގޮވާލަން ޖެހޭނީ hidden.bs.toastތިބާ ހެދިއްޖެނަމަ .autohidefalse

$('#element').toast('hide')

.toast('dispose')

އެލިމެންޓެއްގެ ޓޯސްޓް ފޮރުވައެވެ. ތިބާގެ ޓޯސްޓް ޑީއޯއެމްގައި ހުންނާނެ ނަމަވެސް އިތުރަށް ނުދައްކާނެއެވެ.

$('#element').toast('dispose')

އިވެންޓްސް

އިވެންޓް ޓައިޕް ތަފްޞީލު
ޝޯ.ބީއެސް.ޓޯސްޓް މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ showއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ.
ދައްކާފައި.ބީ.އެސް.ޓޯސްޓް މި އިވެންޓް ފަޔަރ ކުރަނީ ޓޯސްޓް ބޭނުންކުރާ މީހާއަށް ފެންނަ ގޮތަށް ހެދުމުންނެވެ.
ފޮރުވާ.ބީއެސް.ޓޯސްޓް މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hideއިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
ފޮރުވިފައިވާ.ބީއެސް.ޓޯސްޓް މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޯސްޓް ބޭނުންކުރާ މީހާއަށް ފޮރުވައިގެން ނިމުމުންނެވެ. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})