前言
wired 是一个可爱的、手绘风格的 web 组件库，目前它支持很多组件，如按钮、文本框、下拉框等等。而且，如果你喜欢 DIY，wired 也提供了不少可供自定义的选项。
这篇文章主要介绍了如何使用 wired 这个 npm 包，如何安装该包、如何引用该包中的组件库，并详细分析了其中的一些重要的组件。
安装：
$ npm install wired-elements
这里需要注意的是，wired 也可以通过 <script> 标签引入，但是它并不推荐这种方式，因为很可能会引起命名冲突。
引入组件库：
安装完成之后，我们就可以引入 wired 包中的组件库，如：
import { WiredButton } from 'wired-elements';当然，如果你想使用所有的组件，你也可以这么写：
import * as wired from 'wired-elements';
Button 组件
wired 的 Button 组件提供了丰富的自定义选项。下面是一份示例代码：
const btn = new WiredButton();
btn.textContent = "Click Me";
btn.onclick = () => alert('Hello, wired!');在这个例子中我们使用了以下代码：
new WiredButton()：创建一个新的按钮组件。btn.textContent：设置按钮上显示的文本。btn.onclick：设置按钮被点击时的响应函数。
而除此之外，Button 组件还支持的自定义选项有：
disabled：设置按钮是否不可用。elevation：设置按钮的阴影深度。filled：设置按钮是否被填充了颜色。icon：设置按钮上面的图标。padding：设置按钮内边距的大小。size：设置按钮的大小。
如果你想了解更多自定义选项，你可以查看 wired-button 这个 npm 包。
Textarea 组件
Textarea 组件和 Button 组件类似，提供了很多自定义选项。下面是一个使用示例：
const txtarea = document.createElement('wired-textarea');
txtarea.rows = 3;
txtarea.placeholder = 'Input something';
txtarea.value = 'Hello, wired!';
txtarea.oninput = () => console.log(txtarea.value);这里使用了以下代码：
document.createElement('wired-textarea')：创建一个新的输入框组件。txtarea.rows：设置输入框的行数。txtarea.placeholder：设置输入框的占位符。txtarea.value：设置输入框中的文本。txtarea.oninput：设置输入框中文本变化时的事件处理函数。
Textarea 组件还支持以下的自定义选项：
disabled：设置输入框是否禁用。cols：设置输入框的列数。rows：设置输入框的行数。wrap：设置输入框的换行方式。
更多选项可以查看 wired-textarea 这个 npm 包。
Icon 组件
Icon 组件是一种 SVG 图标组件，可以用来代替文本按钮或者其他需要图标装饰的组件。
const icon = new WiredIcon();
icon.icon = 'favorite';
icon.onclick = () => console.log('You clicked the icon.');这里使用了以下代码：
new WiredIcon()： 创建一个 Icon 组件。icon.icon：设置 Icon 的图标名称。icon.onclick：设置 Icon 被点击时的事件处理函数。
除此之外，Icon 组件还支持以下自定义选项：
fill：设置图标的填充色。size：设置图标的大小。
更多选项可以查看 wired-icon 这个 npm 包。
总结
wired 是一个非常好用的 web 组件库，它提供了丰富的自定义选项，适用于很多开发场景。相信你阅读完这篇文章后已经能够快速上手使用 wired 了。
虽然本文只介绍了 Button、Textarea 和 Icon 组件这三个组件，但这三个组件已经足够了解 wired 这个组件库的大部分特性。
如果你想了解更多关于 wired 的细节，你可以访问 wired 的官方网站，或者在 npm 上查看 wired 的所有组件库。
注意：这篇文章中的示例代码仅为演示效果，具体的实现方式需要根据实际项目需求进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671108dd3466f61ffe323