开发

CONTRIBUTING.md

使用方法

1npm install @anker-in/headless-ui
2

1. 无头项目修改tailwind.config.ts 配置文件

1import type { Config } from 'tailwindcss'
2+ import headlessUIPreset from '@anker-in/headless-ui/tailwind.config.js'
3
4
5export default {
6  + presets: [
7  +  headlessUIPreset, // ❗❗❗重要！使用预设
8  + ],
9  content: [
10   + './node_modules/@anker-in/headless-ui/dist/**/*.js', // ❗❗❗重要！把这些加入content
11  ],
12} satisfies Config
13

因为headless-ui 使用纯 ESM 模块, 所以有些非标准第三方ESM模块比如gsap可能会在nextjs 中加载失败， 需要修改无头项目的next.config.js ，显式声明需要 transpile 的包

// next.config.js
module.exports = {
  transpilePackages: ['@anker-in/headless-ui', 'gsap'],
}

2. 添加 design token css 变量文件
   在入口文件 app.js 直接引入 design token css

1import '@anker-in/headless-ui/tokens/base.css'
2import '@anker-in/headless-ui/tokens/{barnd}.css' // brand 可以是 anker, eufy 等等
3

查看所有Token https://headless-ui-doc.netlify.app?path=/docs/design-token--docs Tokens 支持覆盖

1
2// 使用组件
3import { Button, Skeleton } from '@anker-in/headless-ui'
4import { HeroBanner } from '@anker-in/headless-ui/biz'
5
6// ...
7
8<Button size="lg" variant="primary">
9    Primary
10</Button>
11<Button size="sm" variant="secondary">
12    secondary
13</Button>
14
15<Skeleton className="w-[300px] h-[300px] rounded-full" />
16
17<HeroBanner data={nammerConfig}>

❗❗❗异常处理

1. 如果出现 import { XXX } from '@anker-in/headless-ui/biz'
   typescript 报错的情况，可以把

1"@anker-in/headless-ui/biz": [
2        "./node_modules/@anker-in/headless-ui/dist/esm/biz-components/index"
3      ],

添加到tsconfig 配置文件的"paths" 属性。 这可能是旧版本的moduleResolution 不支持