Escribimos un componente con botones de "material" para Svelte

Inspirado en los artículos de SvelteJS: Lanzamiento de la segunda versión , Disappearing frameworks y Re: "Comparación de JS frameworks: React, Vue e Hyperapp" , sobre el marco de Svelte "desapareciendo" (lea "swelt", pero nunca se sabe ), quería probarlo. Y para empezar, decidí escribir un pequeño componente con botones de Materialise .

Método uno: clásico

La plantilla de inicio Svelte se ofrece en dos versiones: con Webpack o con Rollup. Usé Webpack, ya que me es más familiar. Instalación, lanzamiento: todo es como siempre .

Establecer materializar e íconos:

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

En conectamos todo esto en src / main.js:

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

Instale el cargador de archivos para manejar las fuentes (y más):

 npm install file-loader --save-dev 

Y agregue la configuración a webpack.config.js:

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

Escribir un componente

Creamos el archivo src / components / Buttons.html; de hecho, este será el componente. Por alguna razón, Materialise usa la etiqueta <a> para botones, por lo que para la semántica, se decidió hacer dos tipos de botones: <button> - si no hay un enlace, y <a> - si hay un enlace.

Estamos escribiendo dos plantillas:

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

Aquí {classes} es la lista de clases, {href}, {title}, {type}, {name}, {disabled} son los atributos correspondientes, y {iconAlign} e {icon} son la posición y el nombre del icono. Se pueden agregar atributos y otros (allí, básicamente, lo exótico permaneció), pero por ejemplo, esto debería ser suficiente.

Y agregue: haga clic para que luego haga clic en los botones para capturar. Un ejemplo estará debajo.

A continuación, en la sección <script>, describimos los datos predeterminados y agregamos clases (calculadas):

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

En la sección de datos () , describimos los datos de manera predeterminada, y en el cálculo , completamos una matriz de clases basadas en las propiedades que pasaremos cuando se llame al botón. Y cuando cambia estas propiedades, todo se recalcula automáticamente. P es la reactividad.

En realidad, el componente está listo. En src / App.html lo incluimos:

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

Recopilamos / llamamos botones

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

O enlaces:

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

Eventos: haz clic

Usando on: click puede capturar clics en un botón, por ejemplo así:

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

Para hacer esto, agregue el código para exportar predeterminado:

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

Y en algún lugar esta impresión de contador:

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

Código y demostración de GitHub .

Método dos: REPL - más simple y rápido

Hay una caja de arena en el sitio web del marco: REPL, que ya tiene docenas de ejemplos. Y allí puede bifurcar el código terminado, agregar / escribir algo propio y compartir.
Por ejemplo, el componente anterior allí se ve así .