介绍

shoelace是一个与任何Web框架无关的组件库，比如目前流行的Vue、React和Angular，使用shoelace就像使用原生HTML组件库一样，是针对原生HTML组件封装的一套Web组件！

Github

https://github.com/shoelace-style/shoelace

特性

• 适用于所有框架
• 适用于CDN
• 完全可自定义CSS
• 包括官方的深色主题
• 考虑到可靠性而构建♿️
• 开源

组件

以下介绍一些常见的组件，部分代码较多，不在此展示

• Alert

  
  This is a standard alert. You can customize its content and even the icon.

• 头像

• 徽章

Primary
Success
Info
Warning
Danger

• 按钮

Default
Primary
Success
Info
Warning
Danger

• 卡片

• 颜色选择器

• 对话框

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Close


Open Dialog

• Dropdown

• 抽屉

• 表单

• 进度条(环)

• 评分

• 骨架屏

• Tab

  General
  Custom
  Advanced
  Disabled

  This is the general tab panel.
  This is the custom tab panel.
  This is the advanced tab panel.
  This is a disabled tab panel.

• 标签

Primary
Success
Info
Warning
Danger

• tooltip

  Hover Me

总结

shoelace完全补足了原生HTML组件的短板，从功能，组件丰富程度以及样式上完胜却又能和原生组件兼容，像用原生组件一样使用它！