Escrevemos um componente com botões "materiais" para o Svelte

Inspirado nos artigos de SvelteJS: Lançamento da segunda versão , Disappearing frameworks e Re: “Comparação de frameworks JS: React, Vue e Hyperapp” , sobre o framework Svelte “desaparecido” (leia “swelt”, mas você nunca sabe ), eu queria experimentá-lo. E, para começar, decidi escrever um pequeno componente com os botões do Materialize .

Método 1: Clássico

O modelo inicial Svelte é oferecido em duas versões: com Webpack ou Rollup. Eu usei o Webpack, pois é mais familiar para mim. Instalação, lançamento - tudo está como de costume .

Conjunto Materialize e ícones:

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

Em nós conectamos tudo isso em src / main.js:

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

Instale o carregador de arquivos para lidar com fontes (e mais):

 npm install file-loader --save-dev 

E adicione as configurações ao webpack.config.js:

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

Escrevendo um componente

Criamos o arquivo src / components / Buttons.html - na verdade, esse será o componente. Por alguma razão, o Materialize usa a tag <a> para botões, então, para semântica, foi decidido criar dois tipos de botões: <button> - se não houver link e <a> - se houver um link.

Estamos escrevendo dois modelos:

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

Aqui {classes} é a lista de classes, {href}, {título}, {tipo}, {nome}, {desativado} são os atributos correspondentes e {iconAlign} e {icon} são a posição e o nome do ícone. Atributos podem ser adicionados e outros (aí, basicamente, o exótico permaneceu), mas, por exemplo, isso deve ser suficiente.

E adicione: clique para que, em seguida, clique nos botões para capturar. Um exemplo estará abaixo.

Em seguida, na seção <script>, descrevemos os dados padrão e adicionamos classes (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(' '); } } }; 

Na seção data () , descrevemos os dados por padrão e, computados , preenchemos uma matriz de classes com base nas propriedades que passaremos quando o botão for chamado. E quando você altera essas propriedades, tudo é recalculado automaticamente. P é a reatividade.

Na verdade, o componente está pronto. No src / App.html, incluímos:

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

Coletamos / chamamos botões

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

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

Eventos: clique

Usando on: click, você pode capturar cliques em um botão, por exemplo:

 <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 fazer isso, adicione o código para exportar o padrão:

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

E em algum lugar esse contador imprime:

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

Código e demonstração do GitHub .

Método 2: REPL - mais simples e rápido

Existe uma sandbox legal no site da estrutura - REPL, que já possui dezenas de exemplos. E aí você pode bifurcar o código final, adicionar / escrever algo de sua preferência e compartilhar.
Por exemplo, o componente acima aparece assim .