इसको देखेF
अवयवों
अवयव आपको आसानी से UI के एक टुकड़े या शैलियों का लगातार पुन: उपयोग करने देते हैं। उदाहरणों में एक लिंक कार्ड या YouTube embed शामिल हो सकता है। Starlight MDX फ़ाइलों में अवयवों के उपयोग का समर्थन करता है और आपके उपयोग के लिए कुछ सामान्य अवयव प्रदान करता है।
Astro दस्तावेज़ीकरण के माध्यम से अवयवों के निर्माण के बारे में और जानें।
जाने कैसे एक अवयव का उपयोग करें
आप किसी अवयव को अपने MDX फ़ाइल में आयात करके और फिर उसे JSX टैग के रूप में प्रस्तुत करके उपयोग कर सकते हैं।
ये HTML टैग्स की तरह दिखते हैं लेकिन आपके import
कथन में नाम से मेल खाने वाले बड़े अक्षर से शुरू होते हैं:
क्योंकि Starlight Astro द्वारा संचालित है, आप अपने MDX फ़ाइलों में किसी भी समर्थित UI फ्रेमवर्क (React, Preact, Svelte, Vue, Solid, Lit और Alpine) के साथ निर्मित अवयवों के लिए समर्थन जोड़ सकते हैं। Astro दस्तावेज़ीकरण में MDX में अवयवों का उपयोग करने के बारे में और जानें।
Starlight की शैलियों के साथ संगतता
Starlight आपके Markdown कंटेंट पर डिफ़ॉल्ट शैलि लागू करता है, उदाहरण के लिए तत्वों के बीच margin जोड़ना। यदि ये शैलियाँ आपके अवयव की उपस्थिति के साथ संघर्ष करती हैं, तो उन्हें अक्षम करने के लिए अपने अवयव पर ‘not-content’ वर्ग सेट करें।
अंतर्निर्मित अवयव
Starlight सामान्य दस्तावेज़ीकरण उपयोग मामलों के लिए कुछ अंतर्निहित अवयव प्रदान करता है।
ये अवयव @astrojs/starlight/components
पैकेज से उपलब्ध हैं।
Tabs
आप <Tabs>
और <TabItem>
अवयवों का उपयोग करके एक टैब्ड इंटरफ़ेस प्रदर्शित कर सकते हैं।
प्रत्येक <TabItem>
में उपयोगकर्ताओं को प्रदर्शित करने के लिए एक label
होना चाहिए।
उपरोक्त कोड पेज पर निम्नलिखित टैब उत्पन्न करता है:
Cards
आप <Card>
अवयव का उपयोग करके Starlight की शैलियों से मेल खाने वाले बक्से में कंटेंट प्रदर्शित कर सकते हैं।
पर्याप्त जगह होने पर कार्डों को एक साथ प्रदर्शित करने के लिए <CardGrid>
अवयव में एकाधिक कार्ड लपेटें।
एक <Card>
के लिए एक title
की आवश्यकता होती है और इसमें वैकल्पिक रूप से Starlight के अंतर्निहित आइकनों में से एक के नाम पर सेट एक icon
विशेषता शामिल हो सकती है।
उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:
सितारे
Sirius, Vega, Betelgeuse
चन्द्रमा
Io, Europa, Ganymede
लिंक कार्ड
विभिन्न पेजों को प्रमुखता से लिंक करने के लिए <LinkCard>
अवयव का उपयोग करें।
<LinkCard>
के लिए एक शीर्षक और एक href
विशेषता की आवश्यकता होती है। आप वैकल्पिक रूप से एक संक्षिप्त description
या target
जैसी अन्य लिंक विशेषताएँ शामिल कर सकते हैं।
पर्याप्त जगह होने पर कार्डों को एक साथ प्रदर्शित करने के लिए <CardGrid>
में कई <LinkCard>
अवयवों को समूहित करें।
उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:
Icon
Starlight सामान्य आइकन का एक संग्रह प्रदान करता है जिसे आप <Icon>
अवयव का उपयोग करके अपने कंटेंट में प्रदर्शित कर सकते हैं।
प्रत्येक <Icon>
को एक name
की आवश्यकता होती है और इसमें वैकल्पिक रूप से एक label
, size
, और color
विशेषता शामिल हो सकती है।
उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:
All icons
सभी उपलब्ध आइकनों की एक सूची उनके संबंधित नामों के साथ नीचे दिखाई गई है। इसके अवयव कोड की प्रतिलिपि बनाने के लिए किसी आइकन पर क्लिक करें।