Kami menulis komponen dengan tombol "material" untuk Svelte

Terinspirasi oleh artikel oleh SvelteJS: Rilis versi kedua , Kerangka Penghilangan dan Re: "Perbandingan kerangka JS: Bereaksi, Vue dan Hyperapp" , tentang kerangka kerja Svelte yang "menghilang" (baca "bengkak", tetapi Anda tidak pernah tahu ), saya ingin mencobanya. Dan untuk awalnya, saya memutuskan untuk menulis komponen kecil dengan tombol dari Materialize .

Metode Satu: Klasik

Template starter Svelte ditawarkan dalam dua versi: dengan Webpack atau dengan Rollup. Saya menggunakan Webpack, karena lebih akrab bagi saya. Instalasi, luncurkan - semuanya seperti biasa .

Set Wujud dan ikon:

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

Dalam kita hubungkan semua ini di src / main.js:

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

Instal file-loader untuk menangani font (dan banyak lagi):

 npm install file-loader --save-dev 

Dan tambahkan pengaturan ke webpack.config.js:

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

Menulis sebuah komponen

Kami membuat file src / components / Buttons.html - sebenarnya, ini akan menjadi komponen. Untuk beberapa alasan, Materialize menggunakan tag <a> untuk tombol, jadi untuk semantik, diputuskan untuk membuat dua jenis tombol: <tombol> - jika tidak ada tautan, dan <a> - jika ada tautan.

Kami sedang menulis dua templat:

 {#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} 

Di sini {class} adalah daftar kelas, {href}, {title}, {type}, {name}, {dinonaktifkan} adalah atribut yang sesuai, dan {iconAlign} dan {icon} adalah posisi dan nama ikon. Atribut dapat ditambahkan dan lainnya (di sana, pada dasarnya, eksotis tetap ada), tetapi untuk contoh ini sudah cukup.

Dan tambahkan: klik sehingga kemudian klik pada tombol untuk menangkap. Contohnya akan di bawah.

Berikutnya, di bagian <script>, kami menjelaskan data default dan menambahkan kelas (dihitung):

  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(' '); } } }; 

Di bagian data () , kami menggambarkan data secara default, dan dalam perhitungan , kami mengisi array kelas berdasarkan properti yang akan kami lewati ketika tombol dipanggil. Dan ketika Anda mengubah properti ini, semuanya secara otomatis dihitung ulang. P adalah reaktivitas.

Sebenarnya komponen sudah siap. Dalam src / App.html kami memasukkannya:

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

Kami mengumpulkan / memanggil tombol

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

Atau tautan:

  <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" /> 

Acara: menangkap satu klik

Dengan menggunakan pada: klik Anda dapat menangkap klik pada tombol, misalnya seperti ini:

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

Untuk melakukan ini, tambahkan kode untuk mengekspor default:

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

Dan di suatu tempat cetak counter ini:

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

Kode dan demo GitHub .

Metode dua: REPL - lebih sederhana dan lebih cepat

Ada kotak pasir keren di situs web kerangka kerja - REPL, yang sudah memiliki banyak contoh. Dan di sana Anda dapat melakukan fork kode yang sudah selesai, tambahkan / tulis sesuatu milik Anda dan bagikan.
Sebagai contoh, komponen di atas terlihat seperti ini .