51

0

Shoelace

一组专业设计的、基于 Web 标准的日常 UI 组件。适用于所有框架以及常规 HTML/CSS/JS

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 许可条款提供的。

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

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

👇非常感谢您的支持!👇

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