@anker-in/headless-ui 0.0.5 → 0.0.6
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 +8 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,12 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
[CONTRIBUTING.md](CONTRIBUTING.md)
|
|
4
4
|
|
|
5
|
-
#### 初始化
|
|
6
|
-
|
|
7
|
-
### 相关资料
|
|
8
|
-
|
|
9
|
-
[web 端设计稿]()
|
|
10
|
-
|
|
11
5
|
# 使用方法
|
|
12
6
|
|
|
13
7
|
```shell
|
|
@@ -15,21 +9,24 @@ npm install @anker-in/headless-ui
|
|
|
15
9
|
|
|
16
10
|
```
|
|
17
11
|
|
|
18
|
-
手动在html
|
|
12
|
+
手动在html 标签添加主题名（anker, eufy, soundCore等）, 不同的主题名对应不同的css 变量，如果需要更新
|
|
19
13
|
|
|
20
14
|
```html
|
|
21
15
|
<html data-brand-theme="soundCore"></html>
|
|
22
16
|
```
|
|
23
17
|
|
|
18
|
+
如果是nextjs 项目，在`_document.tsx`文件的html标签添加主题名
|
|
19
|
+
|
|
24
20
|
然后就可以项目内引入需要的组件
|
|
25
21
|
|
|
26
22
|
```jsx
|
|
27
|
-
//
|
|
23
|
+
// 在项目入口添加样式文件，比如_app.js
|
|
28
24
|
import '@anker-in/headless-ui/style.css'
|
|
29
25
|
|
|
30
|
-
|
|
26
|
+
// 使用组件
|
|
27
|
+
import { Button, Skeleton } from '@anker-in/headless-ui'
|
|
31
28
|
|
|
32
|
-
//
|
|
29
|
+
// ...
|
|
33
30
|
|
|
34
31
|
<Button size="lg" variant="primary">
|
|
35
32
|
Primary
|
|
@@ -38,4 +35,5 @@ import { Button } from '@anker-in/headless-ui'
|
|
|
38
35
|
secondary
|
|
39
36
|
</Button>
|
|
40
37
|
|
|
38
|
+
<Skeleton className="w-[300px] h-[300px] rounded-full" />
|
|
41
39
|
```
|