हम Svelte के लिए "सामग्री" बटन के साथ एक घटक लिखते हैं

SvelteJS के लेखों से प्रेरित: दूसरे संस्करण का विमोचन, रूपरेखाओं को छोड़ना और पुन: "जेएस फ्रेमवर्क: रिएक्ट, वीयू और हाइपरएप की तुलना" , "गायब" सेवेल्टे फ्रेमवर्क ("स्विफ्ट", आप कभी नहीं जानते ) के बारे में, मैं यह कोशिश करना चाहता था। और एक शुरुआत के लिए मैंने Materialize के बटन के साथ एक छोटा घटक लिखने का फैसला किया।

विधि एक: क्लासिक

Svelte स्टार्टर टेम्पलेट दो संस्करणों में पेश किया गया है: वेबपैक के साथ या रोलअप के साथ। मैंने वेबपैक का उपयोग किया, क्योंकि यह मेरे लिए अधिक परिचित है। स्थापना, लॉन्च - सब कुछ हमेशा की तरह है ।

सामग्री और चिह्न सेट करें:

npm install materialize-css@next npm install material-design-icons 

हम इस सब को src / main.js में जोड़ते हैं:

 import 'material-design-icons/iconfont/material-icons.css'; import 'materialize-css/dist/css/materialize.min.css'; 

फोंट (और अधिक) को संभालने के लिए फ़ाइल-लोडर स्थापित करें:

 npm install file-loader --save-dev 

और सेटिंग्स को webpack.config.js में जोड़ें:

 { test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: [{ loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'fonts/' } }] } 

एक घटक लेखन

हम src / Components / Buttons.html फ़ाइल बनाते हैं - वास्तव में, यह घटक होगा। किसी कारण से, Materialize बटन के लिए <a> टैग का उपयोग करता है, इसलिए शब्दार्थ के लिए, दो प्रकार के बटन बनाने का निर्णय लिया गया: <बटन> - यदि कोई लिंक नहीं है, और <a> - यदि कोई लिंक है।

हम दो टेम्पलेट लिख रहे हैं:

 {#if href} //     <a on:click class="{classes}" {href} {title} > {#if icon} //     <i class="material-icons {iconAlign}">{icon}</i> {/if} <slot>button</slot> </a> {:else} <button on:click class="{classes}" {type} {name} {disabled} > {#if icon} <i class="material-icons {iconAlign}">{icon}</i> {/if} <slot>button</slot> </button> {/if} 

यहाँ {classes} वर्गों की सूची है, {href}, {title}, {type}, {name}, {विकलांग} इसके संबंधित गुण हैं, और {iconAlign} और {icon} आइकन की स्थिति और नाम हैं। विशेषताओं को जोड़ा जा सकता है और अन्य (वहां, मूल रूप से, विदेशी बने हुए हैं), लेकिन एक उदाहरण के लिए यह पर्याप्त होना चाहिए।

और जोड़ें: क्लिक करें ताकि फिर बटन पर क्लिक करें पकड़ने के लिए। एक उदाहरण नीचे होगा।

अगला, <script> अनुभाग में, हम डिफ़ॉल्ट डेटा और क्लासेस (गणना) को जोड़ते हुए वर्णन करते हैं:

  export default { data() { return { color: '', size: '', iconAlign: 'left', floating: false, flat: false, waves: false, wavesColor: 'light', icon: '', //   type: '',//    href: '', name: '', disabled: false, title: '' }; }, computed: { //     classes: ({ //  ,      color, size, floating, flat, disabled, waves, wavesColor }) => { const classes = []; flat ? classes.push(`btn-flat`) : classes.push(`btn`); floating && classes.push(`btn-floating`); disabled && classes.push(`disabled`); waves && classes.push(`waves-effect`); wavesColor && classes.push(`waves-${wavesColor}`); size && classes.push(`btn-${size}`); color && classes.push(`${color}`); return classes.join(' '); } } }; 

डेटा () अनुभाग में, हम डिफ़ॉल्ट रूप से डेटा का वर्णन करते हैं, और गणना में , हम गुणों के आधार पर वर्गों की एक सरणी को भरते हैं जो हम बटन को कॉल करने पर पारित करेंगे। और जब आप इन गुणों को बदलते हैं, तो सब कुछ स्वचालित रूप से पुनर्गणना हो जाता है। P प्रतिक्रियात्मकता है।

दरअसल, घटक तैयार है। Src / App.html में हम इसे शामिल करते हैं:

 <script> import Button from './components/Buttons.html'; export default { components: { Button } }; </script> 

हम एकत्रित / कॉल बटन

  <Button waves></Button> <Button waves icon="cloud" iconAlign="left"></Button> <Button floating waves size="large" color="red" icon="add"></Button> 

या लिंक:

  <Button href="#foo" waves> Link_0 </Button> <Button href="#bar" waves icon="cloud"> Link_1 </Button> <Button href="#qux" waves flat> Link_2 </Button> <Button href="#baz" waves icon="cloud" iconAlign="right"> Link_3 </Button> <Button href="#foo" waves floating size="large" color="red" icon="add" /> 

इवेंट: एक क्लिक पर पकड़

उपयोग करना: क्लिक करना आप एक बटन पर क्लिक पकड़ सकते हैं, उदाहरण के लिए इस तरह:

 <Button on:click="set({ count: count + 1 })" waves>Button++</Button> <Button on:click="set({ count: count - 1 })" waves icon="cloud" iconAlign="left">Button--</Button> 

ऐसा करने के लिए, डिफ़ॉल्ट निर्यात करने के लिए कोड जोड़ें:

 data() { return { count: 3 }; }, 

और कहीं यह काउंटर प्रिंट:

 <p>Count: {count}</p> 

GitHub कोड और डेमो ।

विधि दो: REPL - सरल और तेज

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