טאָסט

פּוש נאָוטאַפאַקיישאַנז צו דיין וויזאַטערז מיט אַ טאָסט, אַ לייטווייט און לייכט קוסטאָמיזאַבלע פלינק אָנזאָג.

טאָוסטס זענען לייטווייט נאָוטאַפאַקיישאַנז דיזיינד צו נאָכקרימען די שטופּן נאָוטאַפאַקיישאַנז וואָס זענען פּאָפּולאַרייזד דורך רירעוודיק און דעסקטאַפּ אָפּערייטינג סיסטעמען. זיי זענען געבויט מיט פלעקסבאָקס, אַזוי זיי זענען גרינג צו ייַנרייען און שטעלע.

איבערבליק

טינגז צו וויסן ווען איר נוצן די טאָסט פּלוגין:

• אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערזutil.js .
• טאָוסטס זענען אַפּט-אין פֿאַר פאָרשטעלונג סיבות, אַזוי איר מוזן ינישאַלייז זיי זיך .
• טאָוסט וועט אויטאָמאַטיש באַהאַלטן אויב איר טאָן ניט ספּעציפיצירן autohide: false.

ביישפילן

באַסיק

צו מוטיקן עקסטענסיבלע און פּרידיקטאַבאַל טאָסט, מיר רעקאָמענדירן אַ כעדער און גוף. טאָסט כעדערז נוצן 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>

טראַנסלוסאַנט

טאָוסט זענען אויך אַ ביסל טראַנסלוסאַנט, אַזוי זיי צונויפגיסן איבער וואָס זיי זאלן דערשייַנען איבער. פֿאַר בראַוזערז וואָס שטיצן די backdrop-filterCSS פאַרמאָג, מיר וועלן אויך פּרווון צו בלער די עלעמענטן אונטער אַ טאָסט.

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

מעטהאָדס

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

געשעענישן

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