sakana-element 2.0.1 → 2.0.2
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 +79 -0
- package/dist/index.css +1 -1
- package/dist/theme/fonts/zpix.ttf +0 -0
- package/dist/theme/index.css +1 -1
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.css.gz +0 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# Sakana Element
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/sakana-element)
|
|
4
|
+
[](https://github.com/yu859/sakana-element/blob/master/LICENSE)
|
|
5
|
+
|
|
6
|
+
A Vue 3 + TypeScript component library with pixel art design aesthetic.
|
|
7
|
+
|
|
8
|
+
像素风格的 Vue 3 + TypeScript 组件库。
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Install / 安装
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
pnpm add sakana-element
|
|
16
|
+
# or
|
|
17
|
+
npm install sakana-element
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Quick Start / 快速开始
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
// main.ts
|
|
24
|
+
import { createApp } from 'vue'
|
|
25
|
+
import SakanaElement from 'sakana-element'
|
|
26
|
+
import 'sakana-element/dist/index.css'
|
|
27
|
+
import App from './App.vue'
|
|
28
|
+
|
|
29
|
+
createApp(App).use(SakanaElement).mount('#app')
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Components / 组件
|
|
33
|
+
|
|
34
|
+
| Component | Description / 描述 |
|
|
35
|
+
|-----------|-------------------|
|
|
36
|
+
| `PxButton` | Button / 按钮 |
|
|
37
|
+
| `PxInput` | Input / 输入框 |
|
|
38
|
+
| `PxSelect` | Select / 选择器 |
|
|
39
|
+
| `PxSwitch` | Switch / 开关 |
|
|
40
|
+
| `PxIcon` | Icon / 图标 |
|
|
41
|
+
| `PxAlert` | Alert / 警告提示 |
|
|
42
|
+
| `PxCollapse` | Collapse / 折叠面板 |
|
|
43
|
+
| `PxDropdown` | Dropdown / 下拉菜单 |
|
|
44
|
+
| `PxForm` | Form / 表单 |
|
|
45
|
+
| `PxTooltip` | Tooltip / 文字提示 |
|
|
46
|
+
| `PxPopconfirm` | Popconfirm / 气泡确认框 |
|
|
47
|
+
| `PxMessage` | Message / 消息提示 |
|
|
48
|
+
| `PxMessageBox` | MessageBox / 消息弹框 |
|
|
49
|
+
| `PxNotification` | Notification / 通知 |
|
|
50
|
+
| `PxLoading` | Loading / 加载 |
|
|
51
|
+
| `PxOverlay` | Overlay / 遮罩层 |
|
|
52
|
+
| `PxConfigProvider` | ConfigProvider / 全局配置 |
|
|
53
|
+
|
|
54
|
+
## Bundled Font / 内置字体
|
|
55
|
+
|
|
56
|
+
This package includes the [zpix](https://github.com/SolidZORO/zpix-pixel-font) pixel font (~6.9MB `.ttf`), which provides the retro pixel art look. It loads automatically via CSS `@font-face` when you import `sakana-element/dist/index.css` — no extra setup required. The font accounts for most of the package size (~8MB total); actual library code + CSS is ~1MB.
|
|
57
|
+
|
|
58
|
+
本组件库内置了 [zpix 像素字体](https://github.com/SolidZORO/zpix-pixel-font)（~6.9MB `.ttf`），用于实现复古像素风格外观。导入 `sakana-element/dist/index.css` 后字体会通过 CSS `@font-face` 自动加载，无需额外配置。字体文件占包体积大部分（总计约 8MB），组件库本身的代码和样式仅约 1MB。
|
|
59
|
+
|
|
60
|
+
## Dark Mode / 暗色模式
|
|
61
|
+
|
|
62
|
+
Add the `px-dark` or `dark` class to an ancestor element:
|
|
63
|
+
|
|
64
|
+
在祖先元素上添加 `px-dark` 或 `dark` 类名：
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<html class="px-dark">
|
|
68
|
+
<!-- All Sakana Element components will render in dark mode -->
|
|
69
|
+
</html>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Links / 链接
|
|
73
|
+
|
|
74
|
+
- [GitHub](https://github.com/yu859/sakana-element)
|
|
75
|
+
- [npm](https://www.npmjs.com/package/sakana-element)
|
|
76
|
+
|
|
77
|
+
## License / 许可证
|
|
78
|
+
|
|
79
|
+
[ISC](https://github.com/yu859/sakana-element/blob/master/LICENSE)
|