我们为Svelte用“ material”按钮编写一个组件

受SvelteJS文章的启发：第二版发行 ， 消失的框架和Re：“ JS框架的比较：React，Vue和Hyperapp” ，关于“消失的” Svelte框架（读“ swelt”， 您永远不会知道 ），我想尝试一下。 首先，我决定编写一个带有Materialize按钮的小组件 。

方法一：经典

Svelte入门模板有两个版本：Webpack或汇总。 我使用了Webpack，因为它对我来说比较熟悉。 安装，启动- 一切正常 。

设置实体化和图标：

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

我们在src / main.js中连接所有这些：

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

安装文件加载器以处理字体（以及更多）：

 npm install file-loader --save-dev 

并将设置添加到webpack.config.js：

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

编写组件

我们创建src / components / Buttons.html文件-实际上，这将是组件。 由于某种原因，Materialize对按钮使用<a>标记，因此对于语义，决定制作两种类型的按钮：<button>-如果没有链接，而<a>-如果有链接。

我们正在编写两个模板：

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

这里的{classes}是类的列表，{href}，{title}，{type}，{name}，{disabled}是相应的属性，{iconAlign}和{icon}是图标的位置和名称。 可以添加属性和其他属性（基本上，仍然保留了外来属性），但是例如，这应该足够了。

并添加：单击，然后单击按钮进行捕捉。 下面是一个示例。

接下来，在<script>部分，我们描述默认数据并添加类（计算的）：

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

在data（）部分中，我们默认情况下描述数据，而在compute中 ，我们根据调用按钮时将传递的属性来填充类的数组。 当您更改这些属性时，所有内容都会自动重新计算。 P是反应性。

实际上，组件已准备就绪。 在src / App.html中，我们包括了它：

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

我们收集/呼叫按钮

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

或链接：

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

活动：点击

使用：单击可以捕获按钮的点击，例如：

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

为此，添加代码以导出默认值：

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

在此计数器打印的某处：

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

GitHub代码和演示 。

方法二：REPL-更简单，更快

该框架的网站REPL上有一个很酷的沙箱，其中已经有很多示例。 在这里您可以分叉完成的代码，添加/编写自己的东西并共享。
例如，上面的组件看起来像这样 。