टोस्ट कॉम्पोनेंट बनाना

अडैप्टिव और आसानी से इस्तेमाल किए जा सकने वाले टोस्ट कॉम्पोनेंट बनाने के तरीके के बारे में खास जानकारी.

Adam Argyle

इस पोस्ट में, हम आपको बताना चाहते हैं कि टोस्ट कॉम्पोनेंट कैसे तैयार किए जाते हैं. इसे आज़माएं डेमो के लिए उपलब्ध नहीं है.

अगर आपको वीडियो देखना है, तो इस पोस्ट का YouTube वर्शन यहां देखें:

खास जानकारी

टोस्ट, लोगों के लिए नॉन-इंटरैक्टिव, पैसिव, और एसिंक्रोनस छोटे मैसेज होते हैं. आम तौर पर, इनका इस्तेमाल उपयोगकर्ता को सूचना देने के लिए इंटरफ़ेस में सुझाव के पैटर्न के तौर पर किया जाता है किसी कार्रवाई के नतीजों के बारे में जानकारी.

इंटरैक्शन

टोस्ट, सूचनाओं से अलग होते हैं. सूचनाएं और प्रॉम्प्ट देते हैं, क्योंकि वे इंटरैक्टिव न हों; उन्हें खारिज नहीं किया जाना चाहिए या जारी रखा नहीं जाना चाहिए. सूचनाएं, सिंक्रोनस मैसेजिंग के लिए होती हैं. इंटरैक्शन या सिस्टम लेवल के मैसेज की ज़रूरत होती है (पेज लेवल के उलट). अन्य सूचना रणनीतियों की तुलना में टोस्ट ज़्यादा आसान होते हैं.

मार्कअप

कॉन्टेंट बनाने <output> टोस्ट के लिए एलिमेंट एक अच्छा विकल्प है, क्योंकि इसे स्क्रीन पर दिखाने की सूचना दी गई है पाठक. सही एचटीएमएल हमें JavaScript की मदद से बेहतर बनाने और बहुत सारी JavaScript होगी.

टोस्ट

<output class="gui-toast">Item added to cart</output>

इसमें ज़्यादा जानकारी बिना किसी भेदभाव के role="status" जोड़कर. इससे पता चलता है कि अगर ब्राउज़र <output> एलिमेंट को इंप्लिसिट भूमिका करें.

<output role="status" class="gui-toast">Item added to cart</output>

टोस्ट कंटेनर

एक बार में एक से ज़्यादा टोस्ट दिखाए जा सकते हैं. एक से ज़्यादा प्लान करने के लिए टोस्ट बनाए जाते हैं, एक कंटेनर का इस्तेमाल किया जाता है. यह कंटेनर टोस्ट मिलते हैं.

<section class="gui-toast-group">
  <output role="status">Wizard Rose added to cart</output>
  <output role="status">Self Watering Pot added to cart</output>
</section>

लेआउट

मैंने टोस्ट को inset-block-end और अगर और टोस्ट जोड़े जाते हैं, तो वे स्क्रीन के किनारे से स्टैक हो जाते हैं.

जीयूआई कंटेनर

टोस्ट कंटेनर, टोस्ट पेश करने के लिए लेआउट का पूरा काम करते हैं. यह समय है fixed को व्यूपोर्ट में शामिल किया जाता है और लॉजिकल प्रॉपर्टी का इस्तेमाल किया जाता है inset यह बताने के लिए कि किस पिन करने के लिए किनारे होते हैं. साथ ही, उसी block-end किनारे से padding का थोड़ा सा हिस्सा इस्तेमाल करते हैं.

.gui-toast-group {
  position: fixed;
  z-index: 1;
  inset-block-end: 0;
  inset-inline: 0;
  padding-block-end: 5vh;
}

व्यूपोर्ट के अंदर खुद को जगह पर रखने के अलावा, टोस्ट कंटेनर एक ऐसा ग्रिड कंटेनर, जो टोस्ट को अलाइन कर सकता है और बांट सकता है. आइटम justify-content वाला ग्रुप और justify-items पर फ़ोकस करें. gap की कुछ मात्रा का इस्तेमाल करें, ताकि टोस्ट हाथ से न छुए.

.gui-toast-group {
  display: grid;
  justify-items: center;
  justify-content: center;
  gap: 1vh;
}

जीयूआई टोस्ट

एक टोस्ट में कुछ padding होते हैं, जिसके कोने कुछ नर्म होते हैं border-radius, और min() फ़ंक्शन का इस्तेमाल करके मोबाइल और डेस्कटॉप के साइज़ में मदद करते हैं. नीचे दी गई सीएसएस में रिस्पॉन्सिव साइज़ व्यूपोर्ट के 90% से ज़्यादा हिस्से में टोस्ट को बढ़ने से रोकता है या 25ch.

.gui-toast {
  max-inline-size: min(25ch, 90vw);
  padding-block: .5ch;
  padding-inline: 1ch;
  border-radius: 3px;
  font-size: 1rem;
}

स्टाइल

लेआउट और पोज़िशनिंग सेट की मदद से, ऐसी सीएसएस जोड़ें जो उपयोगकर्ता के हिसाब से ढलने में मदद करती है सेटिंग और इंटरैक्शन.

टोस्ट कंटेनर

टोस्ट इंटरैक्टिव नहीं होते, उन पर टैप करने या स्वाइप करने से कुछ नहीं होता, लेकिन ये फ़िलहाल पॉइंटर इवेंट का इस्तेमाल करते हैं. टोस्ट को चोरी होने से बचाएं क्लिक की संख्या डालें.

.gui-toast-group {
  pointer-events: none;
}

जीयूआई टोस्ट

कस्टम प्रॉपर्टी, HSL और प्राथमिकता वाली मीडिया क्वेरी.

.gui-toast {
  --_bg-lightness: 90%;

  color: black;
  background: hsl(0 0% var(--_bg-lightness) / 90%);
}

@media (prefers-color-scheme: dark) {
  .gui-toast {
    color: white;
    --_bg-lightness: 20%;
  }
}

ऐनिमेशन

एक नए टोस्ट को स्क्रीन में प्रवेश करते ही एक ऐनिमेशन के साथ खुद को पेश करना चाहिए. कम की गई हलचल को अडजस्ट करने के लिए, translate वैल्यू को 0 पर सेट किया जाता है. इसके लिए: डिफ़ॉल्ट, लेकिन मोशन वैल्यू वाले मीडिया में मोशन वैल्यू को लंबाई में अपडेट किया जा रहा है क्वेरी . सभी को कुछ ऐनिमेशन मिलता है, लेकिन कुछ ही लोग यात्रा का आनंद ले पाते हैं दूरी.

यहां टोस्ट ऐनिमेशन के लिए इस्तेमाल किए जाने वाले कीफ़्रेम दिए गए हैं. सीएसएस प्रवेश, इंतज़ार, और टोस्ट से बाहर निकलना, ये सभी एक ही ऐनिमेशन में दिखाए जाएंगे.

@keyframes fade-in {
  from { opacity: 0 }
}

@keyframes fade-out {
  to { opacity: 0 }
}

@keyframes slide-in {
  from { transform: translateY(var(--_travel-distance, 10px)) }
}

इसके बाद टोस्ट एलिमेंट वैरिएबल सेट अप करता है और कीफ़्रेम व्यवस्थित करता है.

.gui-toast {
  --_duration: 3s;
  --_travel-distance: 0;

  will-change: transform;
  animation: 
    fade-in .3s ease,
    slide-in .3s ease,
    fade-out .3s ease var(--_duration);
}

@media (prefers-reduced-motion: no-preference) {
  .gui-toast {
    --_travel-distance: 5vh;
  }
}

JavaScript

स्टाइल और स्क्रीन रीडर से ऐक्सेस किए जा सकने वाले एचटीएमएल के साथ तैयार होने पर, JavaScript की ज़रूरत होती है कि उपयोगकर्ता के हिसाब से टोस्ट बनाना, जोड़ना, और नष्ट करना इवेंट. टोस्ट कॉम्पोनेंट का डेवलपर अनुभव बेहतरीन होना चाहिए और इसे इस्तेमाल करना आसान है, जैसे कि:

import Toast from './toast.js'

Toast('My first toast')

टोस्ट ग्रुप और टोस्ट तैयार किए जा रहे हैं

जब टोस्ट मॉड्यूल JavaScript से लोड होता है, तो इसे एक टोस्ट कंटेनर बनाना चाहिए और इसे पेज पर जोड़ें. मैंने body से पहले एलिमेंट को जोड़ने का विकल्प चुना है, इससे z-index में स्टैकिंग की समस्याओं की संभावना नहीं है, क्योंकि कंटेनर, कंटेनर से ऊपर है शरीर के सभी एलिमेंट शामिल हैं.

const init = () => {
  const node = document.createElement('section')
  node.classList.add('gui-toast-group')

  document.firstElementChild.insertBefore(node, document.body)
  return node
}

एलिमेंट को छिपाकर, init() फ़ंक्शन को मॉड्यूल के अंदर कॉल किया जाता है Toaster के तौर पर:

const Toaster = init()

टोस्ट एचटीएमएल एलिमेंट बनाने के लिए, createToast() फ़ंक्शन का इस्तेमाल किया जाता है. कॉन्टेंट बनाने फ़ंक्शन को टोस्ट के लिए कुछ टेक्स्ट की ज़रूरत होती है, यह <output> एलिमेंट बनाता है, डेकोरेशन यह कुछ क्लास और एट्रिब्यूट के साथ, टेक्स्ट सेट करता है और नोड को दिखाता है.

const createToast = text => {
  const node = document.createElement('output')
  
  node.innerText = text
  node.classList.add('gui-toast')
  node.setAttribute('role', 'status')

  return node
}

एक या कई टोस्ट मैनेज करना

JavaScript अब टोस्ट शामिल करने के लिए दस्तावेज़ में एक कंटेनर जोड़ता है और यह बनाए गए टोस्ट जोड़ने के लिए तैयार हैं. addToast() फ़ंक्शन एक को हैंडल करने के लिए ऑर्केस्ट्रा का काम करता है या कई टोस्ट डालें. सबसे पहले टोस्ट की संख्या देखी जा रही है और यह देखा जा रहा है कि मोशन सही है या नहीं, फिर इस जानकारी का इस्तेमाल टोस्ट जोड़ने के लिए करना या कुछ नया करने के लिए ऐनिमेशन दिखाएं ताकि दूसरे टोस्ट "कमरा बनाएं" दिखाई दे नए टोस्ट के लिए.

const addToast = toast => {
  const { matches:motionOK } = window.matchMedia(
    '(prefers-reduced-motion: no-preference)'
  )

  Toaster.children.length && motionOK
    ? flipToast(toast)
    : Toaster.appendChild(toast)
}

पहला टोस्ट जोड़ते समय, Toaster.appendChild(toast) CSS एनिमेशन को ट्रिगर करने वाला पेज: ऐनिमेट करें, 3s इंतज़ार करें, ऐनिमेट करें. flipToast() को तब कॉल किया जाता है, जब टोस्ट पहले से मौजूद होते हैं और तकनीक का इस्तेमाल करते हैं पॉल का FLIP नाम लुइस. आइडिया यह है कि अंतर कैलकुलेट किया जाए नया टोस्ट डालने से पहले और बाद में, कंटेनर की जगह पर. इस बारे में सोचें कि टोस्टर अब कहां है, कहां जाना है, फिर टोस्टर कहां है, फिर जहां से वह जहां है वहां से ऐनिमेट करता है.

const flipToast = toast => {
  // FIRST
  const first = Toaster.offsetHeight

  // add new child to change container size
  Toaster.appendChild(toast)

  // LAST
  const last = Toaster.offsetHeight

  // INVERT
  const invert = last - first

  // PLAY
  const animation = Toaster.animate([
    { transform: `translateY(${invert}px)` },
    { transform: 'translateY(0)' }
  ], {
    duration: 150,
    easing: 'ease-out',
  })
}

सीएसएस ग्रिड, लेआउट को लिफ़्ट करने का काम करता है. जब एक नया टोस्ट जोड़ा जाता है, तो ग्रिड उसे डाल देता है और उसे अन्य के साथ जोड़ देता है. इस बीच, वेब ऐनिमेशन यह है का इस्तेमाल कंटेनर को पुरानी जगह से ऐनिमेट करने के लिए किया जाता है.

सभी JavaScript को एक साथ रखना

Toast('my first toast') को कॉल करने पर, एक टोस्ट बनाया जाता है और पेज पर जोड़ दिया जाता है (हो सकता है कि कंटेनर को नए टोस्ट के हिसाब से भी ऐनिमेट किया गया हो), प्रॉमिस वापस लौटाया जाता है और बनाया गया टोस्ट होता है इसके लिए देखा प्रॉमिस रिज़ॉल्यूशन के लिए सीएसएस ऐनिमेशन पूरा होना (तीन मुख्य-फ़्रेम ऐनिमेशन).

const Toast = text => {
  let toast = createToast(text)
  addToast(toast)

  return new Promise(async (resolve, reject) => {
    await Promise.allSettled(
      toast.getAnimations().map(animation => 
        animation.finished
      )
    )
    Toaster.removeChild(toast)
    resolve() 
  })
}

मुझे लगा कि इस कोड का भ्रम फैलाने वाला हिस्सा Promise.allSettled() फ़ंक्शन में है और toast.getAnimations() को मैप किया जा रहा है. मैंने कई मुख्य-फ़्रेम ऐनिमेशन का इस्तेमाल किया टोस्ट के लिए, यह जानने के लिए कि सभी सारे काम पूरे हो चुके हैं, हर एक को JavaScript से अनुरोध किया गया है और हर finished पूरा करने के लिए मॉनिटर किए गए वादों को स्वीकार करना. allSettled हमारे लिए काम करता है और सभी वादों के बाद खुद को पूरा कर लेता है जिन्हें पूरा कर दिया गया है. await Promise.allSettled() का इस्तेमाल करने का मतलब है कि अगली लाइन में कोड भरोसे के साथ एलिमेंट को हटा सकता है और मान सकता है कि टोस्ट ने लाइफ़साइकल. आख़िर में, resolve() को कॉल करने से जुड़ा टोस्ट का वादा पूरा होता है टोस्ट दिखने के बाद, डेवलपर सफ़ाई कर सकते हैं या कोई दूसरा काम कर सकते हैं.

export default Toast

आखिर में, Toast फ़ंक्शन को मॉड्यूल से दूसरी स्क्रिप्ट के लिए, आयात और उपयोग करें.

टोस्ट कॉम्पोनेंट का इस्तेमाल करना

टोस्ट या टोस्ट के डेवलपर अनुभव का उपयोग Toast फ़ंक्शन को ट्रांसफ़र किया जा सकता है और इसे मैसेज स्ट्रिंग के साथ कॉल किया जा सकता है.

import Toast from './toast.js'

Toast('Wizard Rose added to cart')

अगर डेवलपर, टोस्ट के बाद सफ़ाई करना चाहता है या कुछ भी करना चाहता है, दिखाई गई हैं, तो वे एक साथ काम नहीं करने वाली साइट का इस्तेमाल await.

import Toast from './toast.js'

async function example() {
  await Toast('Wizard Rose added to cart')
  console.log('toast finished')
}

नतीजा

अब जब आपको पता है कि मैंने इसे कैसे किया, तो आप कैसे करेंगे ‽ 🙂

आइए, हम अलग-अलग तरह के काम करते हैं और वेब पर काम करने के सभी तरीके सीखते हैं. एक डेमो बनाएं, मुझे ट्वीट करें और मैं इसे जोड़ दूंगा कम्यूनिटी रीमिक्स बनाने के लिए यहां दिए गए सेक्शन पर जाएं!

कम्यूनिटी रीमिक्स

• एचटीएमएल/CSS/JS के साथ @_developit: डेमो और कोड
• एचटीएमएल/सीएसएस/JS के साथ Joost van der Schee: demo & कोड