Shoelace

具有前瞻性的 Web 组件库。

• 适用于所有框架🧩
• 与 CDN 一起使用🚛
• 使用 CSS 完全可定制🎨
• 包括一个官方的黑暗主题🌛
• 考虑到可访问性而构建♿️
• 开源😸

由Cory LaViska在新罕布什尔州设计。

文档：shoelace.style

来源：github.com/shoelace-style/shoelace

推特：@shoelace_style

Shoemakers🥾

Shoemakers或“Shoemakers开发人员”可以使用此文档来学习如何从源代码构建鞋带。您将需要 Node >= 14.17 在本地构建和运行项目。

你不需要做任何这些来使用Shoelace！ 此页面适用于希望为项目做出贡献、修改源代码或创建 Shoelace 的自定义构建的人。

如果这不是您想要做的，那么文档网站就是您想要的地方。

你用什么来做Shoelace？

组件使用LitElement构建，这是一个自定义元素基类，提供直观的 API 和反应式数据绑定。该构建是一个自定义脚本，由esbuild提供支持。

分叉回购

首先在 GitHub 上 fork 存储库，然后在本地克隆它并安装依赖项。

git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
cd shoelace
npm install

发展

克隆存储库后，运行以下命令。

npm start

这将启动 Shoelace 开发服务器。初始构建后，浏览器将自动打开。目前没有热模块重新加载（HMR），因为浏览器不提供重新注册自定义元素的方法，但是对源代码的大多数更改都会自动重新加载浏览器。

该文档由 Docsify 提供支持，它使用原始降价文件生成页面。因此，没有为文档构建静态文件。

建造

要生成生产版本，请运行以下命令。

npm run build

创建新组件

要构建新组件，请运行以下命令，替换 sl-tag-name为所需的标签名称。

npm run create sl-tag-name

这将为您生成一个源文件、一个样式表和一个文档页面。当您启动开发服务器时，您会在侧边栏的“组件”部分找到新组件。

贡献

Shoelace 是一个开源项目，鼓励贡献！如果您对贡献感兴趣，请先查看贡献指南。

执照

鞋带由Cory LaViska在新罕布什尔州设计。它是根据 MIT 许可条款提供的。

设计、开发和支持这个库需要大量的时间、精力和技能。我想让它保持开源，这样每个人都可以使用它，但这并没有给我带来任何收入。

因此，如果您使用我的软件来获利， 我恭敬地请求您通过成为赞助商来帮助资助它的开发。有多个级别可供选择，每个级别都有好处，包括优先支持、错误修复、功能请求和广告。

👇非常感谢您的支持！👇

• 成为赞助商
• 在 GitHub 上加星
• 在推特上关注

无论您是在制作鞋带还是用鞋带制作东西 - 尽情享受创作吧！🥾