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>

JavaScript व्यवहार

प्रयोग

जाभास्क्रिप्ट मार्फत टोस्टहरू प्रारम्भ गर्नुहोस्:

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-animation=""।

नाम टाइप गर्नुहोस् पूर्वनिर्धारित विवरण
एनिमेसन बुलियन सत्य टोस्टमा CSS फेड ट्रान्जिसन लागू गर्नुहोस्
स्वत: लुकाउनुहोस् बुलियन सत्य स्वत: टोस्ट लुकाउनुहोस्
ढिला संख्या 500 टोस्ट लुकाउन ढिलाइ (ms)

विधिहरू

एसिन्क्रोनस विधि र संक्रमण

सबै एपीआई विधिहरू एसिन्क्रोनस छन् र एक संक्रमण सुरु गर्नुहोस् । तिनीहरू संक्रमण सुरु हुने बित्तिकै तर यो समाप्त हुनु अघि कलरमा फर्कन्छन् । थप रूपमा, ट्रान्जिसनिङ कम्पोनेन्टमा विधि कललाई बेवास्ता गरिनेछ ।

थप जानकारीको लागि हाम्रो जाभास्क्रिप्ट कागजात हेर्नुहोस् ।

$().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.toast टोस्ट प्रयोगकर्ताको लागि दृश्यात्मक बनाइएपछि यो घटना हटाइन्छ।
bs.toast लुकाउनुहोस् यो घटना तुरुन्तै निकालिएको छ जब hideउदाहरण विधि कल गरिएको छ।
hidden.bs.toast टोस्ट प्रयोगकर्ताबाट लुकाउन सकिएपछि यो घटना हटाइन्छ। 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})