@anker-in/headless-ui 0.0.27-alpha.45 → 0.0.27-alpha.46
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 +27 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ npm install @anker-in/headless-ui
|
|
|
9
9
|
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
-
无头项目修改tailwind.config.ts 配置文件
|
|
12
|
+
1. 无头项目修改tailwind.config.ts 配置文件
|
|
13
13
|
```js
|
|
14
14
|
import type { Config } from 'tailwindcss'
|
|
15
15
|
+ import headlessUIConfig from '@anker-in/headless-ui/tailwind.config.js'
|
|
@@ -17,41 +17,32 @@ import type { Config } from 'tailwindcss'
|
|
|
17
17
|
|
|
18
18
|
export default {
|
|
19
19
|
+ presets: [
|
|
20
|
-
+ headlessUIConfig,
|
|
20
|
+
+ headlessUIConfig, // ❗❗❗重要！使用预设
|
|
21
21
|
+ ],
|
|
22
22
|
content: [
|
|
23
|
-
+ './node_modules/@anker-in/headless-ui/dist/**/*.js',
|
|
23
|
+
+ './node_modules/@anker-in/headless-ui/dist/**/*.js', // ❗❗❗重要！把这些加入content
|
|
24
24
|
],
|
|
25
25
|
} satisfies Config
|
|
26
26
|
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
```css
|
|
33
|
-
:root {
|
|
34
|
-
--btn-bg-color: #00a7e1;
|
|
35
|
-
--btn-text-color: #ffffff;
|
|
36
|
-
--btn-bg-active-color: #00a7e1;
|
|
37
|
-
--btn-bg-disabled-color: #ccdfe850;
|
|
38
|
-
// and more
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
或者直接引入 design token css
|
|
29
|
+
2. 添加 design token css 变量文件
|
|
30
|
+
在入口文件 app.js 直接引入 design token css
|
|
44
31
|
```js
|
|
45
32
|
import '@anker-in/headless-ui/tokens/base.css'
|
|
46
33
|
import '@anker-in/headless-ui/tokens/{barnd}.css' // brand 可以是 anker, eufy 等等
|
|
47
34
|
|
|
48
35
|
```
|
|
49
36
|
|
|
37
|
+
查看所有Token https://headless-ui-doc.netlify.app?path=/docs/design-token--docs
|
|
38
|
+
Tokens 支持覆盖
|
|
39
|
+
|
|
50
40
|
|
|
51
41
|
```jsx
|
|
52
42
|
|
|
53
43
|
// 使用组件
|
|
54
44
|
import { Button, Skeleton } from '@anker-in/headless-ui'
|
|
45
|
+
import { HeroBanner } from '@anker-in/headless-ui/biz'
|
|
55
46
|
|
|
56
47
|
// ...
|
|
57
48
|
|
|
@@ -63,4 +54,22 @@ import { Button, Skeleton } from '@anker-in/headless-ui'
|
|
|
63
54
|
</Button>
|
|
64
55
|
|
|
65
56
|
<Skeleton className="w-[300px] h-[300px] rounded-full" />
|
|
57
|
+
|
|
58
|
+
<HeroBanner data={nammerConfig}>
|
|
66
59
|
```
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
❗❗❗异常处理
|
|
63
|
+
|
|
64
|
+
如果出现 `import { XXX } from '@anker-in/headless-ui/biz'`
|
|
65
|
+
typescript 报错的情况，可以把
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
```json
|
|
69
|
+
"@anker-in/headless-ui/biz": [
|
|
70
|
+
"./node_modules/@anker-in/headless-ui/dist/esm/biz-components/index"
|
|
71
|
+
],
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
添加到tsconfig 配置文件的"paths" 属性。
|
|
75
|
+
这可能是旧版本的`moduleResolution` 不支持
|