@fxshelf/button-kit 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ Part of the [fxshelf](https://github.com/Luzhaotian/fxshelf) effect shelf — in
|
|
|
9
9
|
| | |
|
|
10
10
|
|--|--|
|
|
11
11
|
| **Docs / Demo** | [luzhaotian.github.io/fxshelf](https://luzhaotian.github.io/fxshelf/docs/effects/button-kit) |
|
|
12
|
-
| **npm** | [`@fxshelf/button-kit@0.1.
|
|
12
|
+
| **npm** | [`@fxshelf/button-kit@0.1.1`](https://www.npmjs.com/package/@fxshelf/button-kit) |
|
|
13
13
|
| **CDN** | [unpkg](https://unpkg.com/@fxshelf/button-kit/) · [jsDelivr](https://cdn.jsdelivr.net/npm/@fxshelf/button-kit/) |
|
|
14
14
|
|
|
15
15
|
Supports **npm**, **CDN `<script>`**, and **copy-as-source**. Details: site docs or [docs/使用说明.md](./docs/使用说明.md).
|
|
@@ -93,7 +93,7 @@ Self-contained build `dist/button-kit.iife.js`, global `ButtonKit`. Full example
|
|
|
93
93
|
</script>
|
|
94
94
|
```
|
|
95
95
|
|
|
96
|
-
Pin the version in production, e.g. `@fxshelf/button-kit@0.1.
|
|
96
|
+
Pin the version in production, e.g. `@fxshelf/button-kit@0.1.1/...`.
|
|
97
97
|
Do not use jsDelivr GitHub `gh/.../dist` links (`dist/` is not committed).
|
|
98
98
|
|
|
99
99
|
## Copy as source
|
package/README.zh-CN.md
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
| | |
|
|
10
10
|
|--|--|
|
|
11
11
|
| **文档 / Demo** | [luzhaotian.github.io/fxshelf](https://luzhaotian.github.io/fxshelf/docs/effects/button-kit) |
|
|
12
|
-
| **npm** | [`@fxshelf/button-kit@0.1.
|
|
12
|
+
| **npm** | [`@fxshelf/button-kit@0.1.1`](https://www.npmjs.com/package/@fxshelf/button-kit) |
|
|
13
13
|
| **CDN** | [unpkg](https://unpkg.com/@fxshelf/button-kit/) · [jsDelivr](https://cdn.jsdelivr.net/npm/@fxshelf/button-kit/) |
|
|
14
14
|
|
|
15
15
|
支持 **npm**、**CDN `<script>`**、**复制源码**。详细用法见站点文档或 [docs/使用说明.md](./docs/使用说明.md)。
|
|
@@ -93,7 +93,7 @@ import '@fxshelf/button-kit/styles.css'
|
|
|
93
93
|
</script>
|
|
94
94
|
```
|
|
95
95
|
|
|
96
|
-
生产环境建议锁定版本，如 `@fxshelf/button-kit@0.1.
|
|
96
|
+
生产环境建议锁定版本，如 `@fxshelf/button-kit@0.1.1/...`。
|
|
97
97
|
不要用 jsDelivr GitHub `gh/.../dist` 直链（`dist/` 不进 Git）。
|
|
98
98
|
|
|
99
99
|
## 复制源码
|
|
@@ -1,14 +1,22 @@
|
|
|
1
1
|
# 动效说明（专业）
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
- `
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
3
|
+
> 大白话版见 [动效说明-大白话.md](./动效说明-大白话.md)
|
|
4
|
+
|
|
5
|
+
Button Kit 是一组 **纯 CSS** 按钮变体：共享 `.fx-btn` 基类，按 `variant` 字符串挂载 `.fx-btn--*` 修饰符。React / Vue 封装只负责把 `variant` 映射到 class，不跑 JS 动画循环（除 CSS `@keyframes`）。
|
|
6
|
+
|
|
7
|
+
实现：`src/core/styles.css` · `src/core/variants.ts` · `src/react/Button.tsx` · `src/vue/Button.vue`
|
|
8
|
+
|
|
9
|
+
## 变体一览
|
|
10
|
+
|
|
11
|
+
| variant | 手法 |
|
|
12
|
+
|---------|------|
|
|
13
|
+
| `solid` / `outline` / `soft` | 静态填充 / 描边 / 浅底 |
|
|
14
|
+
| `chroma` | 默认渐变流光；hover 时 `::before`（`inset: -4px`）轻微 blur 贴边发光 |
|
|
15
|
+
| `liquid` | `::before` 自下升起，hover 后轻微波浪形变 |
|
|
16
|
+
| `wipe` | 斜向层从左擦入 |
|
|
17
|
+
| `glass` | 半透明 + `backdrop-filter` |
|
|
18
|
+
| `glow` | 无限 `box-shadow` 脉冲 |
|
|
19
|
+
| `shimmer` | `::before` 斜向高光平移 |
|
|
20
|
+
| `neon` | 描边 + 外发光 + 文字阴影 |
|
|
21
|
+
|
|
22
|
+
未知 `variant` 时回退到默认样式。无 Framer Motion / GSAP。
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fxshelf/button-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Animated button shelf for React and Vue — switch styles by variant string. Zero animation-lib deps. Copy-as-source friendly.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Lu Zhaotian",
|