@fxshelf/button-kit/docs/使用说明.md

Animated button shelf for React and Vue — switch styles by variant string. Zero animation-lib deps. Copy-as-source friendly.

# 使用说明

## 安装

```bash
npm install @fxshelf/button-kit
```

记得引入样式：

```ts
import '@fxshelf/button-kit/styles.css'
```

## React

```tsx
import { Button } from '@fxshelf/button-kit'
import '@fxshelf/button-kit/styles.css'

<Button variant="glow">继续</Button>
```

## Vue

```vue
<script setup lang="ts">
import { Button } from '@fxshelf/button-kit/vue'
import '@fxshelf/button-kit/styles.css'
</script>

<template>
  <Button variant="neon">继续</Button>
</template>
```

## CDN（React 18 UMD）

需先加载 React 18 UMD，再加载 IIFE，并引入 CSS。完整页面见 [CDN示例.html](./CDN示例.html)。

```html
<link rel="stylesheet" href="https://unpkg.com/@fxshelf/button-kit/dist/index.css" />
<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@fxshelf/button-kit/dist/button-kit.iife.js"></script>
<script>
  ReactDOM.createRoot(document.getElementById('app')).render(
    React.createElement(ButtonKit.Button, { variant: 'glow' }, '继续'),
  )
</script>
```

## 复制源码

拷贝 `src/core`（含 `styles.css`）与 `src/react` 或 `src/vue`，保持同级目录即可。

## variant

| 值 | 效果 |
|----|------|
| `solid` | 实心深色 |
| `outline` | 描边，悬停填实 |
| `soft` | 浅色软按钮 |
| `glow` | 呼吸光晕 |
| `neon` | 霓虹描边 |
| `shimmer` | 悬停扫光 |
| `chroma` | 炫彩流光（默认动画）；hover 贴边高斯光晕 |
| `liquid` | 底部液体升起填充 |
| `wipe` | 斜向擦除填充 |
| `glass` | 毛玻璃半透明 |

未知字符串会回退到 `solid`。