Source

சிற்றுண்டி

ஒரு சிற்றுண்டி, இலகுரக மற்றும் எளிதில் தனிப்பயனாக்கக்கூடிய எச்சரிக்கை செய்தியுடன் உங்கள் பார்வையாளர்களுக்கு அறிவிப்புகளை அழுத்தவும்.

டோஸ்ட்கள் என்பது மொபைல் மற்றும் டெஸ்க்டாப் இயக்க முறைமைகளால் பிரபலப்படுத்தப்பட்ட புஷ் அறிவிப்புகளைப் பிரதிபலிக்கும் வகையில் வடிவமைக்கப்பட்ட இலகுரக அறிவிப்புகள் ஆகும். அவை ஃப்ளெக்ஸ்பாக்ஸுடன் கட்டமைக்கப்பட்டுள்ளன, எனவே அவை சீரமைக்க மற்றும் நிலைப்படுத்த எளிதானது.

கண்ணோட்டம்

டோஸ்ட் செருகுநிரலைப் பயன்படுத்தும் போது தெரிந்து கொள்ள வேண்டியவை:

  • நீங்கள் எங்கள் ஜாவாஸ்கிரிப்டை மூலத்திலிருந்து உருவாக்கினால், அதற்கு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>

ஒளிஊடுருவக்கூடியது

டோஸ்ட்கள் சற்று ஒளிஊடுருவக்கூடியவை, எனவே அவை தோன்றக்கூடியவற்றின் மீது கலக்கின்றன. CSS பண்புகளை ஆதரிக்கும் உலாவிகளுக்கு backdrop-filter, டோஸ்ட்டின் கீழ் உள்ள உறுப்புகளை மங்கலாக்க முயற்சிப்போம்.

<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="min-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>

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

பயன்பாடு

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

$('.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...
})