Skip to content

AeroWang/web-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b4c1d79 · Dec 1, 2023

History

12 Commits
Nov 30, 2023
Nov 30, 2023
Nov 30, 2023
Nov 30, 2023
Nov 30, 2023
Nov 30, 2023
Nov 30, 2023
Nov 30, 2023
Nov 30, 2023
Dec 1, 2023
Nov 30, 2023
Nov 30, 2023
Nov 30, 2023
Nov 30, 2023

Repository files navigation

有趣的 web-components 组件

  • 对前端熟悉一丁点或者更多的,可自行构建pnpm build

Sparkles 火花✨组件

  1. 文章中可直接使用 a-sparkles 标签,可使用的属性值如下:
    • colors 定义火花✨随机颜色,可单个,可多个。
      • 形式如 colors="#fbbf24, #4ade80, #60a5fa, #8b5cf6, #f43f5e" 或者 colors="#fbbf24
    • min-delaymax-delay 共同使用。调节火花随机生成的最小与最大间隔,明显表现为火花✨数量,min-delay 越小且与 max-delay 相差较小时,火花✨出现越快越多;
      • 形式如 min-delay="300" max-delay="800",属性值为数值类型。
    • max-delay 介绍同上,并补充:此属性值最小为 500ms,受限于单个火花✨的动画时长600ms
    • left-offset-range 定义火花✨出现的范围边界;(从左向右边界)
      • 形式如 left-offset-range="-10,60",属性值为数值类型,映射样式单位为百分比
    • top-offset-range (从上至下边界)
    • slot-type,默认为 slot-type="text",此时层级可随机出现在 slot 层级意义上的上下层;否则火花✨仅出现在 slot 上层
    • etc...
  2. 引入方式:
    • body 标签末尾插入 <script src="a_sparkles.iife.js"></script>
    • 或者在 head 标签中即插入 <script defer src="a_sparkles.iife.js"></script>

React 版预览

Releases

No releases published

Packages

No packages published