शूलेस का परिचय, एक फ्रेमवर्क-स्वतंत्र घटक-आधारित यूएक्स लाइब्रेरी

यह पोस्ट . के बारे में है जूते का फीता, एक घटक पुस्तकालय कोरी लाविस्का, लेकिन एक मोड़ के साथ। यह आपके सभी मानक UX घटकों को परिभाषित करता है: टैब, मोडल, अकॉर्डियन, स्वतः पूर्ण, और बहुत, बहुत अधिक. वे बॉक्स से बाहर सुंदर दिखते हैं, सुलभ हैं, और पूरी तरह से अनुकूलन योग्य हैं। लेकिन इन घटकों को रिएक्ट, या सॉलिड, या स्वेल्ट, आदि में बनाने के बजाय, यह उन्हें बनाता है वेब घटक; इसका मतलब है कि आप उनका उपयोग कर सकते हैं कोई ढांचा।

कुछ प्रारंभिक बातें

वेब कंपोनेंट्स बहुत अच्छे हैं, लेकिन वर्तमान में कुछ छोटी-छोटी अड़चनें हैं जिनके बारे में पता होना चाहिए।

प्रतिक्रिया

मैंने कहा कि वे किसी भी जावास्क्रिप्ट ढांचे में काम करते हैं, लेकिन जैसा कि मैंने पहले लिखा है, वेब घटकों के लिए रिएक्ट का समर्थन है वर्तमान में गरीब. इसे संबोधित करने के लिए, Shoelace वास्तव में रैपर बनाया सिर्फ प्रतिक्रिया के लिए।

एक अन्य विकल्प, जो मुझे व्यक्तिगत रूप से पसंद है, एक पतला रिएक्ट घटक बनाना है जो एक वेब घटक के टैग नाम और उसके सभी गुणों और गुणों को स्वीकार करता है, फिर रिएक्ट की कमियों को संभालने का गंदा काम करता है। मैंने इस विकल्प के बारे में बात की पिछले पोस्ट में. मुझे यह समाधान पसंद है क्योंकि इसे हटाने के लिए डिज़ाइन किया गया है। वेब कंपोनेंट इंटरऑपरेबिलिटी समस्या वर्तमान में रिएक्ट की प्रायोगिक शाखा में तय की गई है, इसलिए एक बार इसे शिप करने के बाद, आपके द्वारा उपयोग किए जा रहे किसी भी पतले वेब कंपोनेंट-इंटरऑपरेबल कंपोनेंट को खोजा और हटाया जा सकता है, जिससे आपको बिना किसी रिएक्ट रैपर के सीधे वेब कंपोनेंट के उपयोग के साथ छोड़ दिया जा सकता है।

सर्वर-साइड रेंडरिंग (SSR)

इस लेखन के समय SSR के लिए समर्थन भी खराब है। सिद्धांत रूप में, कुछ कहा जाता है घोषणात्मक छाया डोम (DSD) जो SSR को सक्षम करेगा। लेकिन ब्राउज़र समर्थन न्यूनतम है, और किसी भी घटना में, डीएसडी को वास्तव में आवश्यकता होती है सर्वर समर्थन सही काम करने के लिए, जिसका अर्थ है अगला, रीमिक्स, या जो कुछ भी आप सर्वर पर उपयोग करने के लिए करते हैं, उसे कुछ विशेष हैंडलिंग में सक्षम होने की आवश्यकता होगी।

उस ने कहा, वेब घटकों को प्राप्त करने के अन्य तरीके हैं सिर्फ काम एक वेब ऐप के साथ जो SSR'd कुछ ऐसा है जैसे अगला। संक्षिप्त संस्करण यह है कि आपके वेब घटकों को पंजीकृत करने वाली स्क्रिप्ट को आपके मार्कअप को पार्स करने से पहले एक अवरुद्ध स्क्रिप्ट में चलाने की आवश्यकता होती है। लेकिन यह एक और पोस्ट के लिए एक विषय है।

बेशक, यदि आप किसी भी प्रकार के क्लाइंट-रेंडर एसपीए का निर्माण कर रहे हैं, तो यह एक गैर-मुद्दा है। इसी के साथ हम इस पोस्ट में काम करेंगे।

चलो शुरू करते हैं

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

मैं आपको दिखाऊंगा कि Shoelace का उपयोग कैसे करें, और इससे भी महत्वपूर्ण बात यह है कि इसे कैसे अनुकूलित किया जाए। हम बात करेंगे छाया डोम्स और वे बाहरी दुनिया से किन शैलियों को अवरुद्ध करते हैं (साथ ही वे किन शैलियों को नहीं)। हम के बारे में भी बात करेंगे ::part CSS चयनकर्ता — जो आपके लिए पूरी तरह से नया हो सकता है — और हम यह भी देखेंगे कि कैसे Shoelace हमें इसके विभिन्न एनिमेशन को ओवरराइड और अनुकूलित करने की अनुमति देता है।

यदि आप इस पोस्ट को पढ़ने के बाद आपको शूलेस पसंद करते हैं और इसे एक रिएक्ट प्रोजेक्ट में आज़माना चाहते हैं, तो मेरी सलाह है कि आप इसका उपयोग करें एक आवरण जैसा कि मैंने परिचय में उल्लेख किया है। यह आपको Shoelace के किसी भी घटक का उपयोग करने की अनुमति देगा, और इसे पूरी तरह से हटाया जा सकता है जब React शिप किए गए वेब घटक को ठीक कर देता है (संस्करण 19 में इसके लिए देखें)।

पेश है जूते का फीता

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

Shoelace स्थापित होने के साथ, आइए कुछ सामग्री को प्रस्तुत करने के लिए एक Svelte घटक बनाएं, और फिर इसे पूरी तरह से अनुकूलित करने के चरणों के माध्यम से जाएं। कुछ गैर-तुच्छ चुनने के लिए, मैं टैब और एक संवाद (आमतौर पर एक मोडल के रूप में जाना जाता है) घटकों के साथ गया था। ये रहा कुछ मार्कअप डॉक्स . से बड़े पैमाने पर लिया गया:

  General
  Custom
  Advanced
  Disabled

  This is the general tab panel.
  This is the custom tab panel.
  This is the advanced tab panel.
  This is a disabled tab panel.



  Hello World!
  Close




Open Dialog

यह कुछ अच्छे, स्टाइल वाले टैब प्रस्तुत करता है। सक्रिय टैब पर रेखांकन भी अच्छी तरह से एनिमेट करता है, और एक सक्रिय टैब से दूसरे पर स्लाइड करता है।

मैं एपीआई के हर इंच के माध्यम से अपना समय बर्बाद नहीं करूँगा जो पहले से ही शूलेस वेबसाइट पर अच्छी तरह से प्रलेखित हैं। इसके बजाय, आइए देखें कि इन वेब घटकों के साथ सर्वोत्तम तरीके से कैसे इंटरैक्ट किया जाए और इन वेब घटकों को पूरी तरह से अनुकूलित किया जाए।

एपीआई के साथ बातचीत: तरीके और घटनाएँ

वेब घटक पर कॉल करने के तरीके और ईवेंट की सदस्यता लेना आपकी पसंद के सामान्य ढांचे के साथ आपके द्वारा उपयोग किए जाने वाले तरीके से थोड़ा भिन्न हो सकता है, लेकिन यह बहुत जटिल नहीं है। आइए देखें कैसे।

टैब्स

टैब घटक () एक show तरीका, जो मैन्युअल रूप से एक विशेष टैब दिखाता है। इसे कॉल करने के लिए, हमें अपने टैब के अंतर्निहित DOM तत्व तक पहुंच प्राप्त करने की आवश्यकता है। Svelte में, इसका अर्थ है उपयोग करना bind:this. प्रतिक्रिया में, यह होगा a ref. और इसी तरह। चूँकि हम Svelte का उपयोग कर रहे हैं, आइए हमारे लिए एक वेरिएबल घोषित करें tabs उदाहरण:

  let tabs;

... और इसे बांधें:

अब हम इसे कॉल करने के लिए एक बटन जोड़ सकते हैं:

 tabs.show("custom")}>Show custom

घटनाओं के लिए यह वही विचार है। वहाँ है sl-tab-show घटना जो एक नया टैब दिखाए जाने पर सक्रिय होता है। हम इस्तेमाल कर सकते हैं addEventListener पर हमारे tabs चर, या हम Svelte's . का उपयोग कर सकते हैं on:event-name शॉर्टकट।

 console.log(e)}>

जब आप अलग-अलग टैब दिखाते हैं तो यह ईवेंट ऑब्जेक्ट्स को काम करता है और लॉग करता है।

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

संवाद

संवाद घटक () लेता है open प्रोप जो नियंत्रित करता है कि संवाद है या नहीं ... खुला। आइए इसे हमारे Svelte घटक में घोषित करें:

  let tabs;
  let open = false;

यह भी एक sl-hide घटना जब संवाद छिपा हुआ है। चलो अपना open सहारा देना और बांधना hide घटना ताकि हम इसे रीसेट कर सकें जब उपयोगकर्ता इसे बंद करने के लिए संवाद सामग्री के बाहर क्लिक करता है। और हमारे सेट करने के लिए उस क्लोज बटन पर एक क्लिक हैंडलर जोड़ें open सहारा false, जो संवाद को भी बंद कर देगा।

 open = false}>
  Hello World!
   open = false}>Close

अंत में, हमारे खुले संवाद बटन को तार-तार करते हैं:

 (open = true)}>Open Dialog

और वही जो है। एक घटक पुस्तकालय के एपीआई के साथ बातचीत करना कमोबेश सीधा है। अगर यह सब इस पोस्ट ने किया, तो यह बहुत उबाऊ होगा।

लेकिन शूलेस - वेब कंपोनेंट्स के साथ बनाया जा रहा है - इसका मतलब है कि कुछ चीजें, विशेष रूप से स्टाइल, हमारे द्वारा उपयोग किए जाने की तुलना में थोड़ा अलग तरीके से काम करेंगी।

सभी शैलियों को अनुकूलित करें!

इस लेखन के समय, Shoelace अभी भी बीटा में है और निर्माता कुछ डिफ़ॉल्ट शैलियों को बदलने पर विचार कर रहा है, संभवतः कुछ डिफ़ॉल्ट को पूरी तरह से हटा भी रहा है ताकि वे अब आपके होस्ट एप्लिकेशन की शैलियों को ओवरराइड न करें। जिन अवधारणाओं को हम कवर करेंगे, वे किसी भी तरह से प्रासंगिक हैं, लेकिन अगर आप इसका उपयोग करने के लिए जाते हैं, तो मेरे द्वारा उल्लेखित कुछ शूलेस विशिष्टताओं को अलग होने पर आश्चर्यचकित न हों।

Shoelace की डिफ़ॉल्ट शैलियाँ जितनी अच्छी हैं, हमारे वेब ऐप में हमारे अपने डिज़ाइन हो सकते हैं, और हम चाहते हैं कि हमारे UX घटक मेल खाते हों। आइए देखें कि वेब कंपोनेंट्स की दुनिया में हम इसके बारे में कैसे जाएंगे।

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

शैडो डोम का एक त्वरित दौरा

अपने DevTools में उन टैब हेडर में से किसी एक पर एक नज़र डालें; यह कुछ इस तरह दिखना चाहिए:

हमारे टैब तत्व ने एक बनाया है div ए के साथ कंटेनर .tab और .tab--active कक्षा, और ए tabindex, उस टैब के लिए हमारे द्वारा दर्ज किए गए टेक्स्ट को प्रदर्शित करते समय भी। लेकिन ध्यान दें कि यह अंदर बैठा है a छाया जड़. यह वेब घटक लेखकों को सामग्री के लिए स्थान प्रदान करते हुए वेब घटक में अपना स्वयं का मार्कअप जोड़ने की अनुमति देता है we प्रदान करना। ध्यान दें तत्व? इसका मूल रूप से अर्थ है "उपयोगकर्ता द्वारा प्रदान की गई कोई भी सामग्री डालें" के बीच वेब घटक टैग यहाँ उत्पन्न करें".

ऐसा कंपोनेंट एक शैडो रूट बनाता है, इसमें प्लेसहोल्डर के साथ अच्छी तरह से स्टाइल किए गए टैब हेडर को रेंडर करने के लिए कुछ कंटेंट जोड़ता है () जो हमारी सामग्री को अंदर प्रस्तुत करता है।

इनकैप्सुलेटेड शैलियाँ

वेब विकास में क्लासिक, अधिक निराशाजनक समस्याओं में से एक हमेशा शैली रही है व्यापक उन जगहों पर जहां हम उन्हें नहीं चाहते हैं। आप चिंता कर सकते हैं कि हमारे आवेदन में कोई भी शैली नियम जो कुछ निर्दिष्ट करता है div.tab इन टैब में हस्तक्षेप करेगा। यह पता चला है कि यह कोई समस्या नहीं है; छाया जड़ें शैलियों को समाहित करती हैं। शैडो रूट के बाहर की शैलियाँ शैडो रूट के अंदर क्या प्रभावित करती हैं (कुछ अपवादों के साथ जिनके बारे में हम बात करेंगे), और इसके विपरीत।

इसके अपवाद अंतर्निहित शैलियाँ हैं। बेशक, आपको आवेदन करने की आवश्यकता नहीं है font-family आपके वेब ऐप में प्रत्येक तत्व के लिए शैली। इसके बजाय, आप अपना निर्दिष्ट कर सकते हैं font-family एक बार, पर :root or html और उसके नीचे हर जगह उसका वारिस हो। यह विरासत, वास्तव में, छाया की जड़ को भी छेद देगी।

सीएसएस कस्टम गुण (अक्सर "सीएसएस चर" कहा जाता है) एक संबंधित अपवाद हैं। एक शैडो रूट एक CSS प्रॉपर्टी को पूरी तरह से पढ़ सकता है जिसे शैडो रूट के बाहर परिभाषित किया गया है; यह एक पल में प्रासंगिक हो जाएगा।

RSI ::part चयनकर्ता

शैलियों के बारे में क्या नहीं करते वारिस। क्या होगा अगर हम कुछ इस तरह अनुकूलित करना चाहते हैं cursor, जो शैडो रूट के अंदर किसी चीज़ पर विरासत में नहीं मिलता है। क्या हम भाग्य से बाहर हैं? यह पता चला है कि हम नहीं हैं। ऊपर दिए गए टैब एलिमेंट इमेज और उसके शैडो रूट पर एक और नज़र डालें। ध्यान दें part पर विशेषता div? यह आपको उस तत्व को शैडो रूट के बाहर से लक्षित करने और स्टाइल करने की अनुमति देता है ::part चयनकर्ता. हम एक उदाहरण के माध्यम से चलेंगे थोड़ा सा है।

शूलेस शैलियों को ओवरराइड करना

आइए इनमें से प्रत्येक दृष्टिकोण को क्रिया में देखें। इस समय, बहुत शॉलेस शैलियों, फोंट सहित, सीएसएस कस्टम गुणों से डिफ़ॉल्ट मान प्राप्त करते हैं। उन फ़ॉन्ट्स को अपने एप्लिकेशन की शैलियों के साथ संरेखित करने के लिए, प्रश्न में कस्टम प्रॉप्स को ओवरराइड करें। देखना डॉक्स इस जानकारी के लिए कि Shoelace किस CSS चर का उपयोग कर रहा है, या आप DevTools में किसी भी दिए गए तत्व में शैलियों का निरीक्षण कर सकते हैं।

छाया मूल के माध्यम से शैलियों को विरासत में मिला

ओपन app.css में दायर src की निर्देशिका स्टैकब्लिट्ज परियोजना. में :root नीचे अनुभाग, आपको एक देखना चाहिए letter-spacing: normal; घोषणा। चूंकि letter-spacing संपत्ति विरासत में है, एक नया मान सेट करने का प्रयास करें, जैसे 2px. सेव करने पर, शैडो रूट में परिभाषित टैब हेडर सहित सभी सामग्री, तदनुसार समायोजित हो जाएगी।

शूलेस सीएसएस चरों को ओवरराइट करना

RSI घटक एक पढ़ता है --indicator-color सक्रिय टैब की रेखांकन के लिए CSS कस्टम गुण। हम इसे कुछ बुनियादी सीएसएस के साथ ओवरराइड कर सकते हैं:

sl-tab-group {
  --indicator-color: green;
}

और ठीक उसी तरह, अब हमारे पास एक हरा संकेतक है!

पूछताछ भागों

शूलेस के संस्करण में मैं अभी (2.0.0-बीटा.83) का उपयोग कर रहा हूं, किसी भी गैर-अक्षम टैब में एक है pointer कर्सर. आइए इसे सक्रिय (चयनित) टैब के लिए एक डिफ़ॉल्ट कर्सर में बदलें। हम पहले ही देख चुके हैं कि तत्व जोड़ता है a part="base" टैब हेडर के लिए कंटेनर पर विशेषता। साथ ही, वर्तमान में चयनित टैब को एक प्राप्त होता है active विशेषता। आइए इन तथ्यों का उपयोग सक्रिय टैब को लक्षित करने और कर्सर बदलने के लिए करें:

sl-tab[active]::part(base) {
  cursor: default;
}

और वही जो है!

एनिमेशन अनुकूलित करना

रूपक केक पर कुछ आइसिंग के लिए, आइए देखें कि कैसे Shoelace हमें एनिमेशन को अनुकूलित करने की अनुमति देता है। जूते का फीता का उपयोग करता है वेब एनिमेशन एपीआई, और उजागर करता है a setDefaultAnimation एपीआई यह नियंत्रित करने के लिए कि विभिन्न तत्व अपने विभिन्न इंटरैक्शन को कैसे एनिमेट करते हैं। विशिष्टताओं के लिए डॉक्स देखें, लेकिन एक उदाहरण के रूप में, यहां बताया गया है कि आप शूलेस के डिफ़ॉल्ट डायलॉग एनिमेशन को बाहर की ओर विस्तार करने और अंदर की ओर सिकुड़ने से कैसे बदल सकते हैं, इसके बजाय ऊपर से एनिमेट करें, और छुपाते समय ड्रॉप डाउन करें।

import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";

setDefaultAnimation("dialog.show", {
  keyframes: [
    { opacity: 0, transform: "translate3d(0px, -20px, 0px)" },
    { opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
  ],
  options: { duration: 250, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});
setDefaultAnimation("dialog.hide", {
  keyframes: [
    { opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
    { opacity: 0, transform: "translate3d(0px, 20px, 0px)" },
  ],
  options: { duration: 200, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});

वह कोड में है App.svelte फ़ाइल। मूल, डिफ़ॉल्ट एनीमेशन देखने के लिए इसे टिप्पणी करें।

ऊपर लपेटकर

Shoelace एक अविश्वसनीय रूप से महत्वाकांक्षी घटक पुस्तकालय है जो वेब घटकों के साथ बनाया गया है। चूंकि वेब कंपोनेंट्स फ्रेमवर्क-स्वतंत्र हैं, इसलिए इनका उपयोग किसी भी प्रोजेक्ट में, किसी भी फ्रेमवर्क के साथ किया जा सकता है। अद्भुत प्रदर्शन विशेषताओं और उपयोग में आसानी दोनों के साथ नए ढांचे के आने के साथ, गुणवत्ता वाले उपयोगकर्ता अनुभव विजेट्स का उपयोग करने की क्षमता जो किसी एक ढांचे से बंधे नहीं हैं, कभी भी अधिक आकर्षक नहीं रही हैं।