Vue.js . के लिए फ़्लिपिंग इन्फो कार्ड घटक

ब्लॉग

Vue.js . के लिए फ़्लिपिंग इन्फो कार्ड घटक

Vue.js . के लिए फ़्लिपिंग इन्फो कार्ड घटक



VueJS के लिए एक सुंदर स्पार्क लाइन के साथ सरल और सुंदर कार्ड घटक।

डेमो

घटक का लाइव डेमो पाया जा सकता है यहां।



इंस्टालेशन

npm i -S vue-info-card

प्रयोग

स्थापना के बाद, डेटा और संदेशों को प्रदर्शित करने के लिए उपयुक्त प्रॉप्स पास करके घटक का उपयोग किया जा सकता है। एकल फ़ाइल घटक के भीतर एक नमूना उपयोग इस प्रकार है:



import InfoCard from 'vue-info-card'; export default { components: { InfoCard, }, data() { return { front: { title: 'Daily Conversion Value', graphData: [3, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0], }, back: { title: 'Monthly Summary', message: 'Your average daily conversion value for this month is 50.4$ . It is below the average of the last six months.', }, }; }, };

रंगमंच की सामग्री

कार्ड के प्रत्येक चेहरे के लिए मूल रूप से तीन अलग-अलग प्रोप हैं। चेहरे के लिए एक प्रकार की आवश्यकता होती है, जैसे |_+_| या |_+_|, एक शीर्षक, और कार्ड के मुख्य भाग में प्रदर्शित करने के लिए एक डेटा। सहारा इस प्रकार हैं:

प्रोप प्रकार वैकल्पिक? चूक जाना विवरण
graph text frontType कार्ड के सामने वाले हिस्से का प्रकार। उपलब्ध विकल्प हैं |_+_| या |_+_|.
String 'text' graph कार्ड के सामने वाले हिस्से का शीर्षक.
text |_+_| या |_+_| डेटा जो कार्ड के सामने वाले हिस्से पर प्रदर्शित होगा। अगर |_+_| |_+_| पर सेट है, यह एक सरणी होना चाहिए; अन्यथा, एक स्ट्रिंग।
frontTitle String 'Default Card Title' ग्रेडिएंट जो स्पार्क लाइन पर उपयोग किया जाएगा, स्ट्रिंग के रूप में रंग हेक्सा की एक सरणी होने की उम्मीद है।
frontData String Array कार्ड के पिछले हिस्से का प्रकार। उपलब्ध विकल्प हैं |_+_| या |_+_|.
frontType graph frontTrendGradients कार्ड के पिछले हिस्से का शीर्षक।
Array |_+_| या |_+_| डेटा जो कार्ड के पिछले हिस्से पर प्रदर्शित होगा। अगर |_+_| |_+_| पर सेट है, यह एक सरणी होना चाहिए; अन्यथा, एक स्ट्रिंग।
['#4facfe', '#00f2fe'] backType String ग्रेडिएंट जो स्पार्क लाइन पर उपयोग किया जाएगा, स्ट्रिंग के रूप में रंग हेक्सा की एक सरणी होने की उम्मीद है।

ध्यान दें कि दोनों |_+_| और |_+_| प्रॉप्स HTML को इनपुट के रूप में स्वीकार करते हैं, जिसका अर्थ है कि आप तत्वों को सीधे कार्ड बॉडी में इंजेक्ट कर सकते हैं।

क्रेडिट

घटक दो मुख्य विशेषताओं पर आधारित है: स्पार्क लाइन और फ्लिप प्रभाव। स्पार्क लाइन अद्भुत के साथ बनाई गई है पैर की प्रवृत्ति घटक, जो शांत और अनुकूलन योग्य ग्राफ़ बनाता है। फ़्लिपिंग प्रभाव शुद्ध सीएसएस में लागू किया गया है, और ट्यूटोरियल से प्रभावित है यहां .

ब्राउज़र समर्थन

घटक सभी आधुनिक ब्राउज़रों का समर्थन करता है, कम से कम संस्करणों के साथ: फ़ायरफ़ॉक्स 37, क्रोम 42, सफारी 8, ओपेरा 29, और आईई 10।

विवरण डाउनलोड करें:

लेखक: karakanb

डेमो: https://burakkarakan.com/vue-info-card/

सोर्स कोड: https://github.com/karakanb/vue-info-card

#vuejs #javascript #vue # vue-js