Nous écrivons un composant avec des boutons «matériel» pour Svelte

Inspiré par les articles de SvelteJS: Sortie de la deuxième version , Disappearing frameworks et Re: «Comparison of JS frameworks: React, Vue et Hyperapp» , sur le «disparition» du framework Svelte (lire «swelt», mais on ne sait jamais), j'ai voulu l'essayer. Et pour commencer, j'ai décidé d'écrire un petit composant avec des boutons de Materialise .

Première méthode: classique

Le modèle de démarrage Svelte est proposé en deux versions: avec Webpack ou avec Rollup. J'ai utilisé Webpack, car il m'est plus familier. Installation, lancement - tout est comme d'habitude .

Définissez Materialise et icônes:

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

Dans nous connectons tout cela dans src / main.js:

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

Installez le chargeur de fichiers pour gérer les polices (et plus):

 npm install file-loader --save-dev 

Et ajoutez les paramètres à webpack.config.js:

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

Écrire un composant

Nous créons le fichier src / components / Buttons.html - en fait, ce sera le composant. Pour une raison quelconque, Materialise utilise la balise <a> pour les boutons, donc pour la sémantique, il a été décidé de créer deux types de boutons: <button> - s'il n'y a pas de lien, et <a> - s'il y a un lien.

Nous écrivons deux modèles:

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

Ici, {classes} est la liste des classes, {href}, {title}, {type}, {nom}, {désactivé} sont les attributs correspondants, et {iconAlign} et {icon} sont la position et le nom de l'icône. Des attributs peuvent être ajoutés et d'autres (là, fondamentalement, l'exotisme est resté), mais pour un exemple cela devrait suffire.

Et ajoutez: cliquez pour que puis clique sur les boutons pour attraper. Un exemple sera ci-dessous.

Ensuite, dans la section <script>, nous décrivons les données par défaut et ajoutons des classes (calculées):

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

Dans la section data () , nous décrivons les données par défaut, et en calcul , nous remplissons un tableau de classes en fonction des propriétés que nous transmettrons lors de l'appel du bouton. Et lorsque vous modifiez ces propriétés, tout est automatiquement recalculé. P est la réactivité.

En fait, le composant est prêt. Dans src / App.html, nous l'incluons:

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

Nous collectons / appelons des boutons

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

Ou des liens:

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

Événements: attrapez un clic

En utilisant on: click, vous pouvez attraper des clics sur un bouton, par exemple comme ceci:

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

Pour ce faire, ajoutez le code à exporter par défaut:

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

Et quelque part cette impression de compteur:

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

Code GitHub et démo .

Méthode 2: REPL - plus simple et plus rapide

Il y a un bac à sable sympa sur le site Web du framework - REPL, qui a déjà des dizaines d'exemples. Et là, vous pouvez bifurquer le code fini, ajouter / écrire quelque chose et partager.
Par exemple, le composant ci-dessus ressemble à ceci .