# @lo-tek/interfaces 中文文档

规范地址：https://npmcn.com/package/%40lo-tek/interfaces/

版本：0\.39\.0
npm 元数据更新时间：2026-11-01T17:09:58.619Z
中文译文更新时间：2026-11-01T18:13:41.236Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40lo-tek/interfaces
原文对照：https://npmcn.com/package/%40lo-tek/interfaces/?lang=original
项目主页：https://lo-tek.sobernetics.no/
源码仓库：https://github.com/MarkusAugust/lo-tek

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3.7 MB，456 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^20\.16\.0 \|\| \>=22\.3\.0
- 运行依赖：0 个
- 首次发布：2026-10-25T18:28:27.817Z
- 最新版本发布：2026-11-01T17:09:58.308Z
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

框架无关的设计系统：令牌、CSS组件和web组件。

## 安装

```sh
npm install @lo-tek/interfaces
```

也可以使用：`pnpm add @lo-tek/interfaces`、`yarn add @lo-tek/interfaces`、`bun add @lo-tek/interfaces`

## README

# @lo-tek /接口

一个与框架无关的web设计系统：令牌、CSS组件和web组件。一切都建立在浏览器已经理解的东西之上，所以相同的组件可以在纯HTML、React、Astro和 [Datastar](https://data-star.dev/).

> LO-TEK是1.0之前。次要版本可能包含破坏性更改，它们列在“破坏性”（在0.36.0之前的版本中，“Brytende”）下 [更新日志](https://github.com/MarkusAugust/lo-tek/blob/master/interfaces/CHANGELOG.md).

完整的文档，包括四种环境的组件页面、标记、模式和示例，请参见 **[lo-tek.sobernetics.no](https://lo-tek.sobernetics.no/)**.

**编码代理** 有关规则，请浏览 [lo-tek.sobernetics.no / llms.txt](https://lo-tek.sobernetics.no/llms.txt)，每个环境有一个规则手册，如下所述 [编码代理](https://lo-tek.sobernetics.no/coding-agents/)． 同样的规则手册也在包里，在 `node_modules/@lo-tek/interfaces/agent/`.

## 安装

```bash
npm install @lo-tek/interfaces
```

包没有依赖项。web组件很简单 `HTMLElement` 类，并且没有任何东西单独在导入时注册，因此您只需为实际调用的内容付费。

## CSS组件

一个班和几个班 `data-*` 属性，没有JavaScript。 `tokens.css` 定义了其他一切构建所依赖的变量，因此必须加载它。它首先是出于习惯；顺序没有区别。

通过构建步骤，你只导入你使用的样式表，所以只有按钮的页面不会为对话框加载CSS：

```js
import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/button.css"
```

如果没有构建步骤，您可以链接组合文件，其中包含所有内容：

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces/dist/lotek.css" />
```

无论你选择哪一种，加价都是一样的：

```html
<button class="lt-button">Submit application</button>
<button class="lt-button" data-variant="secondary">Save draft</button>
```

## 作为函数的属性

`lt` 在编辑器中提供具有补全和类型检查功能的相同类和属性。每个组件接受一个options对象并返回属性：

```js
import { lt } from "@lo-tek/interfaces"

lt.button({ variant: "secondary" })
// { class: "lt-button", "data-variant": "secondary" }
```

在React中，从 `@lo-tek/interfaces/react`，即 `className` 和 `htmlFor` 而不是HTML名称：

```jsx
import { lt } from "@lo-tek/interfaces/react"

<button {...lt.button({ variant: "secondary" })}>Save draft</button>
```

## Web组件

没有任何东西单独在进口上注册。你叫 `defineLt*` 你自己，所以你决定元素何时存在：

```js
import { defineLtToast } from "@lo-tek/interfaces/toast"
import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/toast.css"

defineLtToast()
```

```html
<lt-toast class="lt-toast" role="status" aria-live="polite" aria-atomic="false"
          aria-label="Notifications" data-ignore-morph></lt-toast>
```

每一个 `defineLt*` 还接受您选择的标记名，例如 `defineLtToast("app-toast")`，而反复的呼唤是无害的，也在旁边 `defineLt()`． 样式表仍然是为 `lt-*` 名称: `<lt-field>` 注册为 `<my-field>` 仍然将标签连接到字段，但是 `display` 元素名称的规则没有遵循， `<lt-tabs>` 和 `<lt-suggestion>` 在注册之前不要隐藏他们的内容，并且 `<lt-dialog>` 不再将打开的对话框定位为模态对话框。这四个人自己设立了阶级， `<lt-toast>`， `<lt-session-timeout>`， `<lt-connection-status>` 和 `<lt-error-summary>`，换一个名字看起来都一样。

## 服务器编写标记

LO-TEK是为HTML来自服务器的应用而构建的，无论是TanStack Start， React server Components还是Datastar。没有web组件在服务器发送的标记中创建节点，因为周围的框架会在下一次更新时再次将它们删除。

构建器在 `lt` 给出标记，组件给出行为，两者不重叠：

```js
import { lt } from "@lo-tek/interfaces"

lt.errorSummary({ count: 2, id: "errors" })
// { host:  { class: "lt-error-summary", role: "alert", tabindex: "-1", id: "errors",
//            "aria-labelledby": "errors-title" },
//   title: { class: "lt-error-summary__title", id: "errors-title" } }
```

`id` 是必需的 `lt.field()`， `lt.suggestion()`， `lt.tabs()` 和 `lt.popover()`, `titleId` 在 `lt.dialog()`. `lt.tabs()` 和 `lt.suggestion()` 也 `keys`，每个选项卡或选项从数据中选择一个键，以及 `lt.tabs()` 需要 `label`， TAB列表的名称。原因是水合作用：如果函数自己创建了id，服务器和浏览器就会各自创建自己的id，这部分之间的连接就会中断，直到React纠正它。在React中，它来自 `useId()`． 在 `lt.errorSummary()` 两者都是可选的： `id` 命名这个框以便其他东西可以指向它，和 `titleId`，为框命名的标题id，默认为 `id` 与 `-title`． 如果没有这两者，则标题没有id，框没有名称，并且web组件在控制台中这样说。

完整的推理和背后的测试正在进行中 [标记和行为](https://lo-tek.sobernetics.no/markup-and-behaviour/).

## 你自己的色彩主题

CLI根据您的品牌颜色创建一个完整的主题，并在OKLCH中计算对比度要求：

```bash
npx @lo-tek/interfaces theme --accent=#7c3aed --danger=#b3261e \
  --success=#2b6940 --warning=#8a5a00 --neutral=#1a1a1a --out=theme.css
```

如果通过CSS定制还不够， `takeover` 将一个组件的源代码复制到您的项目中，并重写导入：

```bash
npx @lo-tek/interfaces takeover button --out=src/ui
```

`npx @lo-tek/interfaces --help` 显示其余部分。

## 定制

组件在里面 `@layer lotek`，所以你自己的规则获胜没有 `!important`． 如果在不受控制的页面中嵌入组件， `data-lt-boundary` 在根元素上把LO-TEK的样式放回宿主的非分层CSS中；请参阅文档中的自定义。形状和大小是从 `--lt-*` 以令牌值作为回退的变量：

```css
.lt-button {
  --lt-button-padding: var(--lt-spacing-3) var(--lt-spacing-6);
}
```

顺风是可选的。主题是一个普通的CSS文件， `@lo-tek/interfaces/tailwind.css`，因此软件包不依赖于Tailwind，也不会与您的版本冲突。

## 执照

麻省理工学院

## 常见问题

### @lo-tek/interfaces 是什么？

框架无关的设计系统：令牌、CSS组件和web组件。

### 如何安装 @lo-tek/interfaces？

在项目目录运行 npm install @lo-tek/interfaces，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 lotek，可以用 npx lotek 直接运行。

### @lo-tek/interfaces 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @lo-tek/interfaces 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @lo-tek/interfaces 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^20\.16\.0 \|\| \>=22\.3\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @lo-tek/interfaces 可以商用吗？

@lo-tek/interfaces 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @lo-tek/interfaces 还在维护吗？

最新版本 0\.39\.0 发布于 2026/11/02（1 天前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2026/10/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。