开发
使用方法
npm install @anker-in/headless-ui
- 无头项目修改tailwind.config.ts 配置文件
import type { Config } from 'tailwindcss'
+ import headlessUIPreset from '@anker-in/headless-ui/tailwind.config.js'
export default {
+ presets: [
+ headlessUIPreset, // ❗❗❗重要！使用预设
+ ],
content: [
+ './node_modules/@anker-in/headless-ui/dist/**/*.js', // ❗❗❗重要！把这些加入content
],
} satisfies Config
因为headless-ui 使用纯 ESM 模块, 所以有些非标准第三方ESM模块比如gsap可能会在nextjs 中加载失败， 需要修改无头项目的next.config.js ，显式声明需要 transpile 的包
// next.config.js
module.exports = {
transpilePackages: ['@anker-in/headless-ui', 'gsap'],
}
- 添加 design token css 变量文件
在入口文件 app.js 直接引入 design token css
import '@anker-in/headless-ui/tokens/base.css'
import '@anker-in/headless-ui/tokens/{barnd}.css' // brand 可以是 anker, eufy 等等
查看所有Token https://headless-ui-doc.netlify.app?path=/docs/design-token--docs Tokens 支持覆盖
栅格左右边距 Token --grid-margin（px-grid 工具类使用它）定义在 tokens/base.css，必须引入 base.css，否则 px-grid 退回 16px。
默认是阶梯式，与升级前一致：16px、32px（≥768px）、64px（≥1025px），1440px 至 1919px 固定 64px，1920px 起为 calc(50% - 832px)。升级后不做任何改动，页面表现不变。
需要流式间距时主动开启：在页面最外层或 <html> 上声明 data-grid="fluid"（或 class="grid-fluid"），其内库组件的左右边距在 1440px 至 1920px 之间从 64px 线性过渡到 128px，消除 1920px 处的跳变。注意写死阶梯式边距的定制组件和已安装的旧副本不会跟着变，开启范围内它们与库组件的左边缘会在 1441–1919px 错开，需要先迁移到 px-grid。流式范围内的局部区域可以用 data-grid="legacy"（或 class="grid-legacy"）切回阶梯式。开关只覆盖变量，不改组件代码。
// 使用组件
import { Button, Skeleton } from '@anker-in/headless-ui'
import { HeroBanner } from '@anker-in/headless-ui/biz'
// ...
<Button size="lg" variant="primary">
Primary
</Button>
<Button size="sm" variant="secondary">
secondary
</Button>
<Skeleton className="w-[300px] h-[300px] rounded-full" />
<HeroBanner data={nammerConfig}>
❗❗❗异常处理
- 如果出现
import { XXX } from '@anker-in/headless-ui/biz'
typescript 报错的情况，可以把
"@anker-in/headless-ui/biz": [
"./node_modules/@anker-in/headless-ui/dist/esm/biz-components/index"
],
添加到tsconfig 配置文件的"paths" 属性。
这可能是旧版本的moduleResolution 不支持