Sveltejs Academy · पाठ

हेडलेस UI के लिए बिल्डर पैटर्न

पूरी तरह सुलभ और बिना स्टाइल वाले कॉम्पोनेंट के लिए एट्रिब्यूट और इवेंट गेटर फ़ंक्शन उपलब्ध कराएँ।

पाठ 3, कुल 4 में से13 चरण

हेडलेस UI के लिए बिल्डर पैटर्न, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

हेडलेस यूआई

हेडलेस घटक बिना स्टाइलिंग के तर्क और सुगम्यता प्रदान करते हैं, जिससे उपयोगकर्ता उन्हें पूरी तरह अपनी आवश्यकतानुसार अनुकूलित कर सकते हैं।

बिल्डर पैटर्न

ऐसे एट्रिब्यूट और इवेंट-प्राप्तकर्ता फ़ंक्शन उपलब्ध कराइए, जिन्हें उपयोगकर्ता अपने तत्वों पर फैला सकें।

function createToggle() {
  let pressed = $state(false);
  return {
    get pressed() { return pressed; },
    triggerAttrs: () => ({ "aria-pressed": pressed, onclick: () => pressed = !pressed })
  };
}

घटक में उपयोग

उपयोगकर्ता एट्रिब्यूट्स को अपने बटन पर फैलाते हैं।

const toggle = createToggle();
<button {...toggle.triggerAttrs()}>Toggle</button>

अंतर्निहित सुगम्यता

बिल्डर ARIA एट्रिब्यूट्स, कीबोर्ड संचालन और फ़ोकस प्रबंधन की ज़िम्मेदारी संभालता है।

उदाहरण

कॉम्बोबॉक्स, मेनू, संवाद, टैब और अकॉर्डियन — Melt UI और हेडलेस यूआई इस पैटर्न का उपयोग करते हैं।

हेडलेस क्यों

डिज़ाइनर रूप-रंग नियंत्रित करते हैं और लाइब्रेरी जटिल व्यवहार संभालती है। इससे दोनों दुनियाओं का सर्वोत्तम लाभ मिलता है।

रेंडर प्रॉप्स की तुलना में

बिल्डर पैटर्न इससे मिलता-जुलता है, लेकिन रेंडरिंग के बजाय हुक-जैसी एपीआई उपलब्ध कराता है।

बिल्डरों का संयोजन

जटिल घटकों के लिए कई बिल्डरों को मिलाइए (कॉम्बोबॉक्स = मेनू + इनपुट)।

प्रकार सुरक्षा

स्वतः-पूर्णता के लिए लौटाए गए एट्रिब्यूट्स और सहायक फ़ंक्शनों के प्रकार दृढ़ता से परिभाषित कीजिए।

फ़्रेमवर्क

Melt UI इस पैटर्न का अनुसरण करने वाली लोकप्रिय Svelte हेडलेस लाइब्रेरी है।

लाभ और हानियाँ

अधिकतम लचीलापन मिलता है, लेकिन पूरी तरह स्टाइल किए गए घटकों की तुलना में थोड़ा अधिक दोहराव वाला प्रारंभिक कोड लिखना पड़ता है।

त्वरित जाँच

हेडलेस यूआई क्या उपलब्ध कराता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

बिल्डर पैटर्न हेडलेस यूआई के लिए एट्रिब्यूट और इवेंट फ़ंक्शन उपलब्ध कराता है: उपयोगकर्ताओं को स्वतंत्र रूप से स्टाइल करने के लिए तर्क और सुगम्यता।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “हेडलेस UI के लिए बिल्डर पैटर्न” पाठ निःशुल्क है?

हाँ—“हेडलेस UI के लिए बिल्डर पैटर्न” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“हेडलेस UI के लिए बिल्डर पैटर्न” में मैं क्या सीखूँगा?

पूरी तरह सुलभ और बिना स्टाइल वाले कॉम्पोनेंट के लिए एट्रिब्यूट और इवेंट गेटर फ़ंक्शन उपलब्ध कराएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“हेडलेस UI के लिए बिल्डर पैटर्न” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Sveltejs Academy पर वापस जाएँ