Vue गाइड

@reelkit/vue से स्लाइडर बनाना सीखें।

बुनियादी स्लाइडर

<Reel> कंपोनेंट core स्लाइडर कंट्रोलर को लपेटता है। वर्चुअलाइज़ेशन के साथ हर स्लाइड रेंडर करने के लिए #item slot इस्तेमाल करें — सिर्फ़ दिखने वाली स्लाइड mount होती हैं।

ReelIndicator

एक वैकल्पिक कंपोनेंट, जो Instagram जैसे प्रोग्रेस इंडिकेटर दिखाता है कि आप स्लाइडर में अभी किस जगह पर हैं। <Reel> के अंदर रखने पर यह Vue के provide/inject के ज़रिए parent की count और active values से अपने-आप जुड़ जाता है — हाथ से जोड़ने की ज़रूरत नहीं।

Imperative API — टेम्पलेट ref

<Reel> कंपोनेंट template ref के ज़रिए ReelExpose इंटरफ़ेस देता है। reference रखने के लिए ref() इस्तेमाल करें और next(), prev() और goTo() जैसे imperative मेथड कॉल करें।

क्षैतिज दिशा

बाएँ/दाएँ स्वाइप वाले स्लाइडर के लिए direction="horizontal" सेट करें। इंडिकेटर की दिशा भी इससे मेल खानी चाहिए।

अपने-आप साइज़

size prop वैकल्पिक है। इसे छोड़ने पर <Reel> ResizeObserver से अपना कंटेनर खुद नापता है और CSS से तय लेआउट के हिसाब से ढल जाता है। कंटेनर का साइज़ उसके parent से तय होना चाहिए (जैसे flex, grid या तय CSS आकार)।

ट्रांज़िशन

स्लाइड एनिमेशन कस्टमाइज़ करने के लिए transition prop पास करें। ReelKit tree-shake होने वाले पाँच ट्रांज़िशन देता है: slideTransition (डिफ़ॉल्ट), fadeTransition, flipTransition, cubeTransition और zoomTransition।

लूप मोड

loop prop से अनंत गोल नेविगेशन चालू करें। स्लाइडर आख़िरी स्लाइड से पहली पर (और उल्टा) बिना रुकावट लौट आता है।

इवेंट callbacks

<Reel> कंपोनेंट स्लाइडर की स्टेट ट्रैक करने के लिए कई इवेंट emit करता है:

नेविगेशन

नेविगेशन के बिल्ट-इन तरीके:

URL स्टेट

useOverlayUrlState किसी overlay के लिए URL-स्टेट कंट्रोलर बनाकर पूरा लौटाता है, फिर आप उसे <LightboxUrlOverlay> को उसके :controller prop के रूप में देते हैं। खुले होने की स्टेट address bar के पास है, इसलिए जुड़ा हुआ overlay खुद खुलता है और आम तौर पर लिंक ही उसे खोलता है। न मौजूद parameter का पहला write history में एक entry जोड़ता है और उसके बाद हर write उसे बदल देता है, इसलिए पेज बदलना back बटन को कभी दबाता नहीं। value/position पढ़ने और set(null) से प्रोग्राम से बंद करने के लिए कंट्रोलर रखें — यह वही निचले स्तर का write है जो overlay स्लाइड बदलने पर अंदर से करता है।

विकल्पों का object param, codec और locator (तीनों ज़रूरी) लेता है, साथ में वैकल्पिक adapter। codec और locator एक ही Id साझा करने वाली मेल खाती जोड़ी हैं, इसलिए साधारण ?photo=3 गैलरी के लिए ...urlIndexKey(() => props.images.length) spread करें, जो दोनों हिस्से एक साथ लौटाता है। urlIndexKey parameter को स्लाइड index से जोड़ता है और उसे getter की लौटाई मौजूदा गिनती तक सीमित रखता है, इसलिए पुराना या सीमा से बाहर का ?photo=99 ठुकराया जाता है और कभी नाम न ली गई स्लाइड खोलने के बजाय URL से अपने-आप हट जाता है। संख्या नहीं, getter पास करें: Vue का setup एक ही बार चलता है, इसलिए पकड़ी गई लंबाई पेज वाली फ़ीड बढ़ने पर पुरानी पड़ जाएगी। यह createIndexLocator (locator वाला हिस्सा) को लपेटकर indexCodec के साथ जोड़ता है। पेज वाली फ़ीड या पहचान से key होने वाली गैलरी इसकी जगह अपनी मेल खाती codec + locator जोड़ी देती है। विकल्पों की पूरी तालिका Vue API रेफ़रेंस में है।

#item स्लॉट पैटर्न

React के render prop की जगह Vue #item scoped slot इस्तेमाल करता है। इससे वर्चुअलाइज़ेशन संभव होता है — सिर्फ़ दिखने वाली स्लाइड mount होती हैं। Slot scope तीन प्रॉपर्टी देता है:

Composables

@reelkit/vue overlay के आम मामलों के लिए composables देता है:

मुख्य बातें

• Composition API

  Reel, ReelIndicator और composables को सीधे अपने <script setup> में import करें — किसी plugin को register करने की ज़रूरत नहीं

• #item scoped slot

  React के itemBuilder prop का Vue वाला रूप — जाने-पहचाने template syntax के साथ वर्चुअलाइज़ेशन

• Template ref

  imperative नेविगेशन के लिए ref<ReelExpose>() इस्तेमाल करें — इवेंट callbacks की ज़रूरत नहीं

• @after-change

  (index, rangeIndex) emit करता है — UI अपडेट के लिए मौजूदा index पर नज़र रखें

• provide/inject context

  ReelIndicator Vue के provide/inject से parent Reel से अपने-आप जुड़ता है — हाथ से props नीचे भेजने की ज़रूरत नहीं

परफ़ॉर्मेंस टिप्स

• स्लाइड templates को हल्का रखें

  #item slot हर दिखने वाली स्लाइड के लिए चलता है (आम तौर पर एक बार में 3)। इसके अंदर भारी गणना या बहुत गहरी nested संरचना से बचें।

• किनारे के पास डेटा लोड करें

  @after-change से पहचानें कि यूज़र आख़िर के पास पहुँच रहा है, और स्लाइड ख़त्म होने से पहले अगला बैच fetch करें — इससे अनंत स्क्रॉल वाली फ़ीड बनती है।

• imperative स्टेट के लिए refs इस्तेमाल करें

  बेवजह दोबारा रेंडर के बिना बारीक reactivity के लिए ReelExpose reference और मौजूदा index को Vue के ref() में रखें।

• स्क्रॉल होने वाले पेज में व्हील बंद करें

  जब स्लाइडर स्क्रॉल होने वाले लेआउट के अंदर हो, तो पेज का स्क्रॉल पकड़ने से बचने के लिए :enable-wheel="false" सेट करें।