Wir schreiben eine Komponente mit "Material" -Schaltflächen für Svelte

Inspiriert von den Artikeln von SvelteJS: Veröffentlichung der zweiten Version , Disappearing Frameworks und Re: „Vergleich von JS-Frameworks: React, Vue und Hyperapp“ , über das „verschwindende“ Svelte-Framework (lesen Sie „swelt“, aber Sie wissen es nie), wollte ich es versuchen. Zunächst entschied ich mich, eine kleine Komponente mit Schaltflächen von Materialise zu schreiben.

Methode Eins: Klassisch

Die Svelte-Starter-Vorlage wird in zwei Versionen angeboten: mit Webpack oder mit Rollup. Ich habe Webpack verwendet, da es mir vertrauter ist. Installation, Start - alles ist wie gewohnt .

Set Materialise und Symbole:

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

In verbinden wir all dies in src / main.js:

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

Installieren Sie den File-Loader, um Schriftarten (und mehr) zu verarbeiten:

 npm install file-loader --save-dev 

Und fügen Sie die Einstellungen zu webpack.config.js hinzu:

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

Eine Komponente schreiben

Wir erstellen die Datei src / components / Buttons.html - tatsächlich ist dies die Komponente. Aus irgendeinem Grund verwendet Materialise das <a> -Tag für Schaltflächen. Aus semantischen Gründen wurde beschlossen, zwei Arten von Schaltflächen zu erstellen: <Button> - wenn kein Link vorhanden ist, und <a> - wenn ein Link vorhanden ist.

Wir schreiben zwei Vorlagen:

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

Hier ist {classes} die Liste der Klassen, {href}, {title}, {type}, {name}, {disabled} sind die entsprechenden Attribute und {iconAlign} und {icon} sind die Position und der Name des Symbols. Attribute können hinzugefügt werden und andere (dort ist im Grunde das Exotische geblieben), aber für ein Beispiel sollte dies ausreichen.

Und hinzufügen: Klicken Sie so, dass Sie dann auf die Schaltflächen klicken, um zu fangen. Ein Beispiel wird unten sein.

Als nächstes beschreiben wir im Abschnitt <script> die Standarddaten und fügen Klassen hinzu (berechnet):

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

Im Abschnitt data () beschreiben wir die Daten standardmäßig und füllen beim Berechnen ein Array von Klassen aus, die auf den Eigenschaften basieren, die wir beim Aufrufen der Schaltfläche übergeben. Und wenn Sie diese Eigenschaften ändern, wird alles automatisch neu berechnet. P ist die Reaktivität.

Eigentlich ist die Komponente fertig. In src / App.html enthalten wir es:

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

Wir sammeln / rufen Tasten an

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

Oder Links:

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

Ereignisse: Klicken Sie

Mit on: click können Sie Klicks auf eine Schaltfläche abfangen, zum Beispiel wie folgt:

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

Fügen Sie dazu den Code hinzu, der standardmäßig exportiert werden soll:

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

Und irgendwo dieser Gegendruck:

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

GitHub Code und Demo .

Methode zwei: REPL - einfacher und schneller

Auf der Website des Frameworks befindet sich eine coole Sandbox - REPL, die bereits Dutzende von Beispielen enthält. Und dort können Sie den fertigen Code teilen, etwas Eigenes hinzufügen / schreiben und teilen.
Zum Beispiel sieht die obige Komponente dort so aus .