نكتب مكونًا بأزرار "المواد" لـ Svelte

مستوحاة من المقالات التي كتبها SvelteJS: إصدار الإصدار الثاني ، الأطر المختفية وإعادة: "مقارنة أطر JS: React ، Vue و Hyperapp" ، حول إطار Svelte "المختفي" (اقرأ "swelt" ، لا تعرف أبدًا) ، أردت تجربته. وبداية قررت كتابة مكون صغير بأزرار من Materialize .

الطريقة الأولى: كلاسيكية

يتم تقديم قالب Svelte للمبتدئين في نسختين: مع Webpack أو مع مجموعة التحديثات. لقد استخدمت Webpack ، لأنها مألوفة لي أكثر. التثبيت ، التشغيل - كل شيء على النحو المعتاد .

تعيين التحجيم والرموز:

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> للأزرار ، لذلك بالنسبة للدلالات ، تقرر إنشاء نوعين من الأزرار: <button> - إذا لم يكن هناك رابط ، و <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} و {رمز} هي موضع الرمز واسمه. يمكن إضافة السمات وغيرها (هناك ، بشكل أساسي ، بقيت الغريبة) ، ولكن على سبيل المثال ، يجب أن يكون هذا كافيًا.

وأضف: اضغط حتى تضغط على الأزرار لتلتقط. سيكون مثال أدناه.

بعد ذلك ، في قسم <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 - أبسط وأسرع

هناك وضع حماية رائع على موقع الويب الخاص بالإطار - REPL ، والذي يحتوي بالفعل على عشرات الأمثلة. وهناك يمكنك شوكة الرمز النهائي ، إضافة / كتابة شيء خاص بك ومشاركته.
على سبيل المثال ، يبدو المكون أعلاه هناك مثل هذا .