स्वेल्टस्ट्रैप के साथ शुरुआत करना

यूजर इंटरफेस बनाने के लिए स्वेल्ट एक उत्कृष्ट विकल्प है और, जबकि कस्टम शैलियाँ लिखना छोटी परियोजनाओं के लिए पर्याप्त हो सकता है, एक घटक लाइब्रेरी अक्सर बड़े पैमाने की परियोजनाओं के लिए बेहतर होती है।

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

स्वेल्ट और बूटस्ट्रैप क्या हैं?

स्वेल्ट एक जावास्क्रिप्ट फ्रेमवर्क है, जो रिएक्ट जैसे फ्रेमवर्क द्वारा अपनाए गए पारंपरिक दृष्टिकोण से अलग है। रन-टाइम पर अपने अधिकांश ऑपरेशन चलाने के बजाय, स्वेल्ट बिल्ड प्रक्रिया के दौरान आपके एप्लिकेशन को जावास्क्रिप्ट में संकलित करता है।

यह अनोखा दृष्टिकोण वर्चुअल की आवश्यकता को समाप्त कर देता है दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) और बॉयलरप्लेट कोड को काफी कम कर देता है।

बूटस्ट्रैप एक CSS फ्रेमवर्क है, ट्विटर (अब ब्रांडेड एक्स) द्वारा बनाया गया, जिसने "मोबाइल-फर्स्ट" डिज़ाइन दर्शन का बीड़ा उठाया। यह पूर्व-डिज़ाइन किए गए घटकों का खजाना प्रदान करता है।

अपने प्रोजेक्ट में स्वेल्टस्ट्रैप स्थापित करना

इससे पहले कि आप अपने प्रोजेक्ट में Sveltestrap इंस्टॉल कर सकें, आपको यह सुनिश्चित करना होगा कि आपका Svelte प्रोजेक्ट ठीक से सेट अप है। सुनिश्चित करें कि आपके पास Node.js और है नोड पैकेज मैनेजर (एनपीएम) या यार्न आपकी मशीन पर चल रहा है। आप इस कमांड के साथ एक नया Svelte प्रोजेक्ट तैयार कर सकते हैं:

npm create vite
# or
yarn create vite

अपने Svelte प्रोजेक्ट को नाम दें और जब एक फ्रेमवर्क और एक वैरिएंट चुनने के लिए कहा जाए, तो क्रमशः Svelte और JavaScript चुनें। ऐसा करने के बाद, सीडी प्रोजेक्ट निर्देशिका में डालें और चलाएँ:

npm install
# or
yarn

यह कमांड एक विशिष्ट Svelte प्रोजेक्ट के लिए आवश्यक निर्भरताएँ स्थापित करेगा।

आपका Svelte प्रोजेक्ट तैयार होने पर, अब आप Sveltestrap लाइब्रेरी चलाकर इंस्टॉल कर सकते हैं:

npm i sveltestrap
# or
yarn add sveltestrap

npm config set legacy-peer-deps true
npm cache clean --force

हटाएँ संपत्ति और यह उदारीकरण फ़ोल्डर, फिर की सामग्री साफ़ करें App.svelte फ़ाइल और ऐप.सीएसएस फ़ाइल। बाद में, आप निम्न चलाकर विकास सर्वर प्रारंभ कर सकते हैं:

npm run dev
# or
yarn dev

अपने प्रोजेक्ट में स्वेल्टस्ट्रैप का उपयोग करना

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

खोलें Index.html फ़ाइल, और निम्नलिखित को इसमें जोड़ें सिर तत्व:

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>

यदि आप चाहें, तो आप आयात या जोड़ सकते हैं जोड़ना सीधे टैग करें पतला: सिर इस प्रकार विशेष तत्व:

<svelte: head>
<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
 />
svelte: head>

वैकल्पिक रूप से, आप इसका उपयोग कर सकते हैं @आयात में शासन करें शैली किसी भी घटक का टैग इस प्रकार है:

<style>
 @import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
style>

स्वेल्टस्ट्रैप में बटन घटक

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

स्वेल्टस्ट्रैप में, प्रत्येक बटन घटक में आसानी से एक रंग प्रोप की सुविधा होती है जो बूटस्ट्रैप के डिफ़ॉल्ट स्टाइलिंग विकल्पों के साथ संरेखित होता है। यह अनुकूलन प्रक्रिया को सरल बनाने में मदद करता है। बटन जैसे किसी घटक को आयात करने के लिए, किसी में निम्नलिखित जोड़ें .svelte घटक फ़ाइल, जैसे src/App.svelte: