एक्सएमआर यूआई के लिए रिपल इफेक्ट के साथ एक बटन बनाएं

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

परिचय

एक्सएमआर यूआई मेरी नई ओपन सोर्स परियोजनाओं में से एक है। HTML / CSS और React के लिए UI घटकों का एक सरल पुस्तकालय। भविष्य में मैं Vue का समर्थन करने की योजना बना रहा हूं। अब तक, इसमें केवल एक बटन और आइकन है :)

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

बटन

इंटरफ़ेस में बटन शायद मुख्य तत्व है जिसके साथ उपयोगकर्ता एप्लिकेशन के साथ इंटरैक्ट करता है। इसलिए, यह किसी भी UI फ्रेमवर्क / लाइब्रेरी के पहले घटकों में से एक है।

टेलीग्राम के डिजाइन में, बटन के कई रूप नहीं हैं:

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

लाइब्रेरी उपयोगकर्ता को सीएसएस कक्षाओं का उपयोग करके आरामदायक होना चाहिए। मैं बीईएम जैसे नामकरण प्रणालियों का प्रशंसक नहीं हूं। मुझे बूटस्ट्रैप नाम की कक्षाएं पसंद हैं। लेकिन मैं थोड़ा और सरल करूंगा। इसके बजाय .btn .btn-primary , .btn .primary और प्रतिक्रिया घटक के मामले में, यह इस तरह दिखेगा:

 <Button primary>Hey</Button> 

एक ही बटन लेकिन लहर प्रभाव:

 <Button primary ripple>Hey</Button> 

HTML / सीएसएस

यूआई लाइब्रेरी को किसी भी यूआई ढांचे से नहीं जोड़ा जाना चाहिए। भविष्य में मैं Vue घटकों पर लेआउट को फैलाने की योजना बना रहा हूं। आइए सरल HTML / CSS से शुरुआत करें।

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

Tailwindcss के अलावा, PostCSS का उपयोग मिश्रण, चर, और नेस्टेड शैलियों के लिए किया जाता है।

इस तरह के ढांचे के उपयोग और परियोजना को कैसे कॉन्फ़िगर किया गया है, इसके बारे में अधिक विस्तार से, मैं एक अलग लेख में बताऊंगा। इस स्तर पर, यह पर्याप्त है कि हमारे पास इस तरह के एक शक्तिशाली टूलकिट है और घटकों का उपयोग करने के लिए इसे पूर्ण उपयोग किया जाता है।

<button> में कई डिफ़ॉल्ट शैलियाँ हैं जिन्हें हमें हटाने या फिर से परिभाषित करने की आवश्यकता है।

Tailwindcss के मामले में, बटन टैग में यह शैली है:

डिफ़ॉल्ट रूप से हटाए गए सभी अनावश्यक। आप बिना किसी डर के जो चाहे कर सकते हैं। लेकिन यहाँ एक चेतावनी है, डिफ़ॉल्ट outline अभी भी नामांकित करने की आवश्यकता है:

XMars UI के एक बटन में एक .btn वर्ग है:

 <button class="btn">Button</button> 

हमारी शैली में इस वर्ग को जोड़ें:

 .btn { @apply text-black text-base leading-snug; @apply py-3 px-4 border-none rounded-lg; @apply inline-block cursor-pointer no-underline; &:focus { @apply outline-none; } } 

इस तथ्य के अलावा कि टेलविंडस्केक्स उन कक्षाओं को प्रदान करता है जिन्हें आप उपयोग कर सकते हैं, यह एक प्रकार का मिश्रण प्रदान करता है। @apply या PostCSS के लिए किसी प्रकार का प्लगइन नहीं है। यह स्वयं टेलविंडस्केक्स का वाक्य विन्यास है। लागू होने वाली शैलियाँ आमतौर पर नाम से स्पष्ट रूप से स्पष्ट होती हैं। py-3 और px-4 अकेले सवाल पैदा कर सकते हैं। पहले y के साथ पैडिंग है, अर्थात, लंबवत, यानी padding-top: 0.75rem; padding-bottom: 0.75rem; । नतीजतन, px-4 क्षैतिज रूप से padding-right: 1rem; , padding-left: 1rem; ।

टेलीग्राम को इसे हल्का बनाने के लिए जो डिज़ाइन प्रदान किया गया है, वह बहुत खराब है और border-radius बटन जैसी चीज़ों को छवि से सीधे शासक के साथ लेना पड़ता है। कभी सोचा है कि वास्तव में border-radius में मूल्यों का क्या मतलब है?

यह वस्तुतः कोने में परिणामी चक्र की त्रिज्या है। यदि सामूहिक खेत है, तो आप शासक को बदल सकते हैं जैसा कि ऊपर चित्र में दिखाया गया है। इसलिए मैंने जिम्प में आयताकार चयन का उपयोग किया।

डिज़ाइन में बटनों border-radius 10px है, दुर्भाग्य से टेलविंडस्कॉल्स में बॉक्स से ऐसी कोई कक्षा नहीं है, लेकिन मैंने नेत्रहीन गोल- rounded-lg किया था जो डिफ़ॉल्ट फ़ॉन्ट आकार (रेम) के लिए 8px ।

यहाँ इस समय क्या हुआ है, मैंने बटन को ग्रे रंग में चित्रित किया ताकि किनारों को देखा जा सके:

अगला, हम पर एक प्रभाव बनाने की जरूरत है :hover । तब टेलीग्राम के डिजाइनरों ने कुछ प्रकाश डालने का फैसला किया और #707579 से 0.08% के रूप में रंग का संकेत दिया। मुझे दो विकल्प दिखाई देते हैं, बस आईड्रॉपर के साथ रंग लें या इसे दस्तावेज के रूप में करें। पहला विकल्प सरल है, लेकिन भविष्य में यह सबसे अच्छा नहीं है। तथ्य यह है कि अगर पृष्ठभूमि सफेद से अलग है, तो पर :hover हमें एक विशिष्ट रंग मिलेगा, बटन की "लपट" और पारदर्शिता खो देंगे। इसके लिए प्रलेखन का पालन करना और अल्फा रखना बेहतर है नर चैनल। यह अनगिनत तरीकों से किया जा सकता है, उदाहरण के लिए SCSS रंग फ़ंक्शन का उपयोग करना। लेकिन परियोजना में कोई SCSS नहीं है, और उसी रंग के कारण, मैं किसी प्लग-इन को PostCSS से जोड़ना नहीं चाहता, हम सब कुछ बहुत सरल कर देंगे। क्रोम में, एक कोलोपेकर है जो आपको अलग-अलग प्रणालियों में रंग बदलने की अनुमति देता है, #707579 रंग #707579 , rgba में अनुवाद करें और अल्फा चैनल - 0.08% सेट करें।

देखा! कुछ तेजी से मेरी तस्वीर भड़की:

हमें rgba(112, 117, 121, 0.08) - rgba(112, 117, 121, 0.08) ।

(: हॉवर)

और अधिक उबाऊ और बहुत प्रयास के बिना, मैंने बाकी राज्य जोड़ा:

  &:hover { background-color: var(--grey04); } &.accent { color: var(--blue01); } &.primary { @apply text-white; background-color: var(--blue01); &:hover { background-color: var(--blue02); } } 

प्रतिक्रिया घटक

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

ऐसे घटक जिन्हें किसी प्रकार के तर्क की आवश्यकता होती है, जैसे कि तरंग प्रभाव, को लागू किया जाएगा और केवल रिएक्ट घटकों के रूप में उपलब्ध होगा।

प्रतिक्रिया घटक में बटन को लपेटना मुश्किल नहीं है:

 import React, { FunctionComponent } from 'react'; export interface ButtonProps { } const Button: FunctionComponent<ButtonProps> = (props) => { return ( <button className="btn">props.children</button> ); } export default Button; 

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

उपयोगकर्ता को आवश्यक हर चीज को स्थानांतरित करने में सक्षम होने के लिए, पहले आपको टाइपस्क्रिप्ट को दूर करने की आवश्यकता है, अन्यथा यहां तक ​​कि ऑनक्लिक भी आपको सामान्य रूप से स्थानांतरित करने की अनुमति नहीं देगा। ButtonProps इंटरफ़ेस को थोड़ा संपादित ButtonProps , हम समस्या को हल करते हैं:

 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> 

जिसके बाद हम सुरक्षित रूप से विनाश को props सकते हैं:

 <button className="btn" {...props}>props.children</button> 

बटन का समान उपयोग अपेक्षित रूप से व्यवहार करेगा:

 <Button onClick={() => alert()}>Hey</Button> 

अगला, हम बटन शैलियों और एक कस्टम (अचानक किसी की आवश्यकता होगी) को पंजीकृत करने की क्षमता को जोड़ते हैं। इन उद्देश्यों के लिए npm classnames पैकेज एकदम सही है।

 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { primary?: boolean, accent?: boolean, additionalClass?: string, } ... const classNames = classnames( 'btn', { primary }, { accent }, additionalClass ); ... <button className={classNames} {...props}>props.children</button> 

btn वर्ग हमेशा सेट होता है, लेकिन primary और accent केवल अगर true । क्लासनाम एक वर्ग को जोड़ता है यदि इसका एक तार्किक true मूल्य है, तो ES6 से संक्षिप्त नाम का उपयोग करके हम { primary: true } बजाय एक साधारण प्रविष्टि { primary } प्राप्त करते हैं।

additionalClass एक स्ट्रिंग है, और यदि यह खाली या अपरिभाषित है, तो यह हमारे लिए एक विशेष भूमिका नहीं निभाता है, बस तत्व में कुछ भी नहीं जोड़ा जाएगा।

सबसे पहले, मैंने props को इस प्रकार सौंपा:

 {...omit(props, ['additionalClass', 'primary'])} 

सब कुछ है कि बटन तत्व के props की props पर लागू नहीं होता है स्वीकार करते हैं, लेकिन यह आवश्यक नहीं है क्योंकि प्रतिक्रिया बहुत अधिक प्रस्तुत नहीं करेगा।

तरंग प्रभाव

दरअसल, यह वही है जो दिखता है, लेकिन यह वांछनीय है कि "लहर" क्लिक के स्थान से विचलन करती है।
ऐसे एनीमेशन बनाने के अनगिनत तरीके हैं, यह नीले वर्ग के बारे में एक मजाक की तरह है।

लेकिन google, कोडपेन के उदाहरणों को देखते हुए, यह स्पष्ट हो गया कि ज्यादातर मामलों में, एक "लहर" का एहसास एक बाल तत्व के माध्यम से होता है, जो फैलता है और गायब हो जाता है।

यह क्लिक के निर्देशांक के अनुसार बटन के अंदर स्थित है। एक्सएमआर यूआई में , इस समय मैंने ऑनएप पर इस प्रभाव को लागू नहीं करने का फैसला किया जैसा कि मटेरियल यूआई करता है, लेकिन मैं भविष्य में इसे onPress योजना बना रहा हूं। अभी तक, केवल onClick ।

ऊपर की तस्वीर सभी जादू है। एक क्लिक से चाइल्ड बटन एलिमेंट बनता है, यह क्लिक के केंद्र में होता है और फैलता है। overflow: hidden संपत्ति लहर को बटन से परे जाने से overflow: hidden । एनीमेशन के अंत में आइटम को हटा दिया जाना चाहिए।

सबसे पहले, हम उन शैलियों को परिभाषित करेंगे जहां हम कर सकते हैं, जितना संभव हो सके टेलविंडस्कल्स का उपयोग करना:

 .with-ripple { @apply relative overflow-hidden; @keyframes ripple { to { @apply opacity-0; transform: scale(2.5); } } .ripple { @apply absolute; z-index: 1; border-radius: 50%; background-color: var(--grey04); transform: scale(0); animation: ripple 0.6s linear; } &.primary { .ripple { background-color: var(--black02); } } } 

प्रभाव के लिए जिम्मेदार तत्व को वर्ग .ripple सौंपा जाएगा। border-radius: 50%; एक वृत्त (कोण * 2 पर 50% पट्टिका) के बराबर होता है, बटन में सापेक्ष स्थिति होती है .ripple बटन में पूर्ण स्थिति होती है। एनीमेशन बहुत सरल है, बढ़ती लहर 0.6 सेकंड में पारदर्शी हो जाती है। पृष्ठभूमि का रंग समान है :hover और फोल्डिंग, दो पारदर्शी "तरंग" रंग और बटन हमें वांछित परिणाम देते हैं। नीले .primary बटन पर, यह इतना महत्वपूर्ण नहीं है और वहां आप एक गैर-पारदर्शी रंग का उपयोग कर सकते हैं।

क्लिक करने पर, आपको "तरंग" तत्व बनाने की आवश्यकता है। इसलिए, हम इस व्यवसाय के लिए एक राज्य बनाते हैं और बटन पर उपयुक्त क्लिक हैंडलर जोड़ते हैं, लेकिन इस तरह से कि यह कस्टम ऑनक्लिक के साथ हस्तक्षेप नहीं करता है।

 ... const [rippleElements, setRippleElements] = useState<JSX.Element[]>([]); ... function renderRippleElements() { return rippleElements; } return ( <button className={classNames} {...props} onClick={(event) => { if (props.onClick) { props.onClick(event); } if (ripple) { onRippleClick(event); } }} > {children} {renderRippleElements()} </button> ); 

rippleElements - rippleElements तत्वों की एक सरणी, यहाँ रेंडर फ़ंक्शन निरर्थक लग सकता है, लेकिन यह भविष्य के लिए स्टाइल और निगमन का विषय है।

  function onRippleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) { var rect = event.currentTarget.getBoundingClientRect(); const d = Math.max(event.currentTarget.clientWidth, event.currentTarget.clientHeight); const left = event.clientX - rect.left - d/2 + 'px'; const top = event.clientY - rect.top - d/2 + 'px'; const rippleElement = newRippleElement(d, left, top); setRippleElements([...rippleElements, rippleElement]); } function newRippleElement(d: number, left: string, top: string) { const key = uuid(); return ( <div key={key} className="ripple" style={{width: d, height: d, left, top}} onAnimationEnd={() => onAnimationEnd(key)} > </div> ); } 

onRippleClick हैंडलर जो "तरंगें" बनाता है। बटन पर क्लिक करके, हम उस बटन के आकार का पता newRippleElement जिसका उपयोग सर्कल को सही ढंग से करने के लिए किया जाता है, जिसके बाद आवश्यक सभी newRippleElement को newRippleElement फ़ंक्शन को पास किया newRippleElement है newRippleElement जो बदले में केवल newRippleElement क्लास के साथ एक newRippleElement तत्व बनाता है, स्थिति के लिए आवश्यक शैलियों का निर्माण करता है।

onAnimationEnd हाइलाइट करने लायक मुख्य चीजों में से। पहले से ही उपयोग किए गए तत्वों से डोम को खाली करने के लिए हमें इस घटना की आवश्यकता है।

  function onAnimationEnd(key: string) { setRippleElements(rippleElements => rippleElements.filter(element => element.key !== key)); } 

यह बहुत महत्वपूर्ण है कि भूल न करें, वर्तमान rippleElements को तर्कों में पारित करें, अन्यथा आप पुराने मूल्यों के साथ एक सरणी प्राप्त कर सकते हैं, और सबकुछ इरादा के अनुसार काम नहीं करेगा।

पूर्ण बटन कोड:

 import React, { FunctionComponent, ButtonHTMLAttributes, useState } from 'react'; import uuid from 'uuid/v4'; import classnames from 'classnames'; export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { primary?: boolean, accent?: boolean, circle?: boolean, ripple?: boolean, additionalClass?: string, } const Button: FunctionComponent<ButtonProps> = (props) => { const [rippleElements, setRippleElements] = useState<JSX.Element[]>([]); const {primary, accent, circle, ripple, additionalClass, children} = props; const classNames = classnames( 'btn', { primary }, { 'with-ripple': ripple }, { circle }, { accent }, additionalClass ); function onAnimationEnd(key: string) { setRippleElements(rippleElements => rippleElements.filter(element => element.key !== key)); } function onRippleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) { var rect = event.currentTarget.getBoundingClientRect(); const d = Math.max(event.currentTarget.clientWidth, event.currentTarget.clientHeight); const left = event.clientX - rect.left - d/2 + 'px'; const top = event.clientY - rect.top - d/2 + 'px'; const rippleElement = newRippleElement(d, left, top); setRippleElements([...rippleElements, rippleElement]); } function newRippleElement(d: number, left: string, top: string) { const key = uuid(); return ( <div key={key} className="ripple" style={{width: d, height: d, left, top}} onAnimationEnd={() => onAnimationEnd(key)} > </div> ); } function renderRippleElements() { return rippleElements; } return ( <button className={classNames} {...props} onClick={(event) => { if (props.onClick) { props.onClick(event); } if (ripple) { onRippleClick(event); } }} > {children} {renderRippleElements()} </button> ); } export default Button; 

अंतिम परिणाम यहां बताया जा सकता है।

निष्कर्ष

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

एक्सएमआर यूआई जीथब रिपॉजिटरी