ટોસ્ટ્સ

તમારા મુલાકાતીઓને ટોસ્ટ, હળવા અને સરળતાથી કસ્ટમાઇઝ કરી શકાય તેવા ચેતવણી સંદેશ સાથે સૂચનાઓ મોકલો.

ટોસ્ટ એ હળવા વજનની સૂચનાઓ છે જે પુશ સૂચનાઓની નકલ કરવા માટે રચાયેલ છે જે મોબાઇલ અને ડેસ્કટોપ ઓપરેટિંગ સિસ્ટમ દ્વારા લોકપ્રિય કરવામાં આવી છે. તેઓ ફ્લેક્સબોક્સ સાથે બનેલ છે, જેથી તેઓ સંરેખિત અને સ્થિત કરવામાં સરળ હોય.

ઝાંખી

ટોસ્ટ પ્લગઇનનો ઉપયોગ કરતી વખતે જાણવા જેવી બાબતો:

જો તમે સ્ત્રોતમાંથી અમારી JavaScript બનાવી રહ્યાં છો, તો તેને જરૂરી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>

પ્લેસમેન્ટ

તમને જરૂર મુજબ કસ્ટમ CSS સાથે ટોસ્ટ્સ મૂકો. ટોચની જમણી બાજુનો ઉપયોગ ઘણીવાર સૂચનાઓ માટે થાય છે, જેમ કે ટોચની મધ્યમાં છે. જો તમે એક સમયે માત્ર એક ટોસ્ટ બતાવવા જઈ રહ્યાં છો, તો પોઝિશનિંગ શૈલીઓ સીધા જ પર મૂકો .toast.

હેલો, વિશ્વ! આ ટોસ્ટ સંદેશ છે.

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

જ્યારે તકનીકી રીતે તમારા ટોસ્ટમાં ફોકસેબલ/એક્શનેબલ કંટ્રોલ (જેમ કે વધારાના બટન અથવા લિંક્સ) ઉમેરવાનું શક્ય છે, તો તમારે ટોસ્ટને સ્વતઃ છુપાવવા માટે આવું કરવાનું ટાળવું જોઈએ. જો તમે ટોસ્ટને લાંબો સમય delayસમાપ્ત કરો છો , તો પણ કીબોર્ડ અને સહાયક ટેક્નોલોજી વપરાશકર્તાઓને પગલાં લેવા માટે સમયસર ટોસ્ટ સુધી પહોંચવામાં મુશ્કેલી પડી શકે છે (કારણ કે ટોસ્ટ જ્યારે પ્રદર્શિત થાય ત્યારે ફોકસ પ્રાપ્ત કરતા નથી). જો તમારી પાસે એકદમ વધુ નિયંત્રણો હોવા જોઈએ, તો અમે સાથે ટોસ્ટનો ઉપયોગ કરવાની ભલામણ કરીએ છીએ autohide: false.

JavaScript વર્તન

ઉપયોગ

જાવાસ્ક્રિપ્ટ દ્વારા ટોસ્ટ શરૂ કરો:

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

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-animation="".

નામ	પ્રકાર	ડિફૉલ્ટ	વર્ણન
એનિમેશન	બુલિયન	સાચું	ટોસ્ટ પર CSS ફેડ સંક્રમણ લાગુ કરો
સ્વતઃ છુપાવો	બુલિયન	સાચું	સ્વતઃ ટોસ્ટ છુપાવો
વિલંબ	સંખ્યા	`500`	ટોસ્ટ છુપાવવામાં વિલંબ (ms)

પદ્ધતિઓ

અસુમેળ પદ્ધતિઓ અને સંક્રમણો

બધી API પદ્ધતિઓ અસુમેળ છે અને સંક્રમણ શરૂ કરે છે . સંક્રમણ શરૂ થતાંની સાથે જ તેઓ કૉલર પાસે પાછા ફરે છે પરંતુ તે સમાપ્ત થાય તે પહેલાં . વધુમાં, સંક્રમણ ઘટક પર પદ્ધતિ કૉલ અવગણવામાં આવશે .

વધુ માહિતી માટે અમારા JavaScript દસ્તાવેજીકરણ જુઓ .

`$().toast(options)`

તત્વ સંગ્રહમાં ટોસ્ટ હેન્ડલર જોડે છે.

`.toast('show')`

તત્વની ટોસ્ટ દર્શાવે છે. ટોસ્ટ વાસ્તવમાં બતાવવામાં આવે તે પહેલાં (એટલે કે shown.bs.toastઘટના બને તે પહેલાં) કોલરને પરત કરે છે. તમારે આ પદ્ધતિને મેન્યુઅલી કૉલ કરવી પડશે, તેના બદલે તમારું ટોસ્ટ દેખાશે નહીં.

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

`.toast('hide')`

તત્વના ટોસ્ટને છુપાવે છે. ટોસ્ટ વાસ્તવમાં છુપાયેલ હોય તે પહેલાં (એટલે કે hidden.bs.toastઘટના બને તે પહેલાં) કોલર પાસે પરત આવે છે. જો તમે કર્યું હોય તો તમારે આ પદ્ધતિને મેન્યુઅલી કૉલ કરવી autohideપડશે false.

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

`.toast('dispose')`

તત્વના ટોસ્ટને છુપાવે છે. તમારું ટોસ્ટ DOM પર રહેશે પરંતુ હવે દેખાશે નહીં.

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

ઘટનાઓ

ઇવેન્ટનો પ્રકાર	વર્ણન
show.bs.toast	`show`જ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
બતાવેલ.bs.ટોસ્ટ	જ્યારે ટોસ્ટ વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટને બરતરફ કરવામાં આવે છે.
છુપાવો.બીએસ.ટોસ્ટ	`hide`જ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
hidden.bs.toast	જ્યારે ટોસ્ટ વપરાશકર્તાથી છુપાયેલું સમાપ્ત થઈ જાય ત્યારે આ ઇવેન્ટને બરતરફ કરવામાં આવે છે.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})