https://github.com/aerowang/web-components

有趣的 web-components
https://github.com/aerowang/web-components

web-components

Last synced: 29 days ago
JSON representation

有趣的 web-components

• Host: GitHub
• URL: https://github.com/aerowang/web-components
• Owner: AeroWang
• License: gpl-3.0
• Created: 2023-11-30T10:27:59.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-01T13:21:26.000Z (over 2 years ago)
• Last Synced: 2025-01-24T07:11:40.065Z (over 1 year ago)
• Topics: web-components
• Language: JavaScript
• Homepage: https://web-components-60a.pages.dev/
• Size: 1.58 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## 有趣的 web-components 组件

- 对前端熟悉一丁点或者更多的，可**自行构建**。`pnpm build`

- 

### Sparkles 火花✨组件

- 可直接在浏览器中使用 [dist/components/sparkles.iife.js](/./dist/components/a_sparkles.iife.js)

1. 文章中可直接使用 `a-sparkles` 标签，可使用的属性值如下：

    - `colors` 定义火花✨随机颜色，可单个，可多个。

      - 形式如 `colors="#fbbf24, #4ade80, #60a5fa, #8b5cf6, #f43f5e"` 或者 `colors="#fbbf24`

    - `min-delay` 与 `max-delay` 共同使用。调节火花随机生成的最小与最大间隔，明显表现为火花✨数量，`min-delay` 越小且与 `max-delay` 相差较小时，火花✨出现越快越多；

      - 形式如 `min-delay="300" max-delay="800"`，属性值为数值类型。

    - `max-delay` 介绍同上，并补充：此属性值最小为 `500`ms，受限于单个火花✨的动画时长`600ms`

    - `left-offset-range` 定义火花✨出现的范围边界；（从左向右边界）

      - 形式如 `left-offset-range="-10,60"`，属性值为数值类型，映射样式单位为百分比

    - `top-offset-range` （从上至下边界）

    - `slot-type`，默认为 `slot-type="text"`，此时层级可随机出现在 slot 层级意义上的上下层；否则火花✨仅出现在 slot 上层

    - etc...

2. 引入方式：

   - 在 `body` 标签末尾插入 ``

   - 或者在 `head` 标签中即插入 ``

[React 版预览](https://next.aerowang.cn/p/a87c8524-664b-46a5-826d-b029b67d3022/mdx-zi-ding-yi-zu-jian)