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>

வேலை வாய்ப்பு

உங்களுக்குத் தேவையான CSS உடன் டோஸ்ட்களை வைக்கவும். மேல் வலதுபுறம் அடிக்கடி அறிவிப்புகளுக்குப் பயன்படுத்தப்படுகிறது, மேல் நடுப்பகுதி உள்ளது. நீங்கள் எப்போதாவது ஒரு நேரத்தில் ஒரு சிற்றுண்டியை மட்டுமே காட்டப் போகிறீர்கள் எனில், பொருத்துதல் பாணியை சரியாக வைக்கவும் .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>

தொழில்நுட்ப ரீதியாக உங்கள் டோஸ்டில் கவனம் செலுத்தக்கூடிய/செயல்படுத்தக்கூடிய கட்டுப்பாடுகளை (கூடுதல் பொத்தான்கள் அல்லது இணைப்புகள் போன்றவை) சேர்க்க முடியும் என்றாலும், டோஸ்ட்களைத் தானாக மறைப்பதற்கு இதைச் செய்வதைத் தவிர்க்க வேண்டும். நீங்கள் டோஸ்டுக்கு நீண்ட delayகால அவகாசம் கொடுத்தாலும் , விசைப்பலகை மற்றும் அசிஸ்ட்டிவ் டெக்னாலஜி பயனர்கள் டோஸ்டை சரியான நேரத்தில் அடைவது சிரமமாக இருக்கும். உங்களிடம் கண்டிப்பாக கூடுதல் கட்டுப்பாடுகள் இருந்தால், உடன் சிற்றுண்டியைப் பயன்படுத்த பரிந்துரைக்கிறோம் autohide: false.

ஜாவாஸ்கிரிப்ட் நடத்தை

பயன்பாடு

ஜாவாஸ்கிரிப்ட் வழியாக டோஸ்ட்களை துவக்கவும்:

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

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-animation="".

பெயர் வகை இயல்புநிலை விளக்கம்
இயங்குபடம் பூலியன் உண்மை டோஸ்டுக்கு CSS ஃபேட் மாற்றத்தைப் பயன்படுத்தவும்
தானாக மறை பூலியன் உண்மை தானாக சிற்றுண்டியை மறை
தாமதம் எண் 500 சிற்றுண்டியை மறைக்க தாமதம் (மி.எஸ்)

முறைகள்

ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்

அனைத்து API முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .

மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .

$().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.டோஸ்ட் showநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
காட்டப்பட்டுள்ளது.பி.எஸ்.டோஸ்ட் டோஸ்ட் பயனருக்குத் தெரியும்படி செய்யப்பட்டவுடன் இந்த நிகழ்வு நீக்கப்படும்.
hide.bs.டோஸ்ட் hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
மறைக்கப்பட்ட.பி.எஸ்.டோஸ்ட் டோஸ்ட் பயனரிடமிருந்து மறைக்கப்பட்டதும் இந்த நிகழ்வு நீக்கப்பட்டது. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})