# @duskmoon-dev/elements 中文文档

规范地址：https://npmcn.com/package/%40duskmoon-dev/elements/

版本：1\.10\.3
npm 元数据更新时间：2026-11-11T10:58:42.711Z
中文译文更新时间：2026-11-13T01:19:01.137Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40duskmoon-dev/elements
原文对照：https://npmcn.com/package/%40duskmoon-dev/elements/?lang=original
项目主页：https://github.com/duskmoon-dev/duskmoon-elements#readme
源码仓库：https://github.com/duskmoon-dev/duskmoon-elements

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

- 包体积（解压后）：210 kB，453 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：73 个
- peer 依赖：mermaid \>=10\.0\.0
- 首次发布：2026-01-04T08:14:56.473Z
- 最新版本发布：2026-11-11T10:58:42.378Z
- 近 30 天下载量：2616（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：53（近 12 个月 53 个）

## 中文简介

一个包中所有 DuskMoon 自定义元素

## 安装

```sh
npm install @duskmoon-dev/elements
```

也可以使用：`pnpm add @duskmoon-dev/elements`、`yarn add @duskmoon-dev/elements`、`bun add @duskmoon-dev/elements`

## README

# @duskmoon-dev/要素

所有 DuskMoon 自定义元素在一个包中.

## 安装

```bash
bun add @duskmoon-dev/elements
```

## 使用量

### 通过 CDN (推荐) 自动注册

使用所有元素的最简单方式 - 只要添加脚本标记 :

```html
<!-- Via CDN - registers all elements automatically -->
<script type="module" src="https://esm.sh/@duskmoon-dev/elements/register"></script>

<!-- Now all elements are available -->
<el-dm-button variant="primary">Click me</el-dm-button>
<el-dm-card>
  <h2>Card Title</h2>
  <p>Card content</p>
</el-dm-card>
<el-dm-input label="Name" placeholder="Enter your name"></el-dm-input>
```

### 用 Bundler 自动注册

```ts
// Just import to register all elements
import '@duskmoon-dev/elements/register';
```

### 手工登记

```ts
import { registerAll } from '@duskmoon-dev/elements';

// Register all elements
registerAll();
```

或者登记个人要素:

```ts
import { registerButton, registerCard, registerTable } from '@duskmoon-dev/elements';

registerButton();
registerCard();
registerTable();
```

### 使用元素类

```ts
import { ElDmButton, ElDmTable, ElDmTabs } from '@duskmoon-dev/elements';

// Access element classes directly
const button = document.querySelector('el-dm-button') as ElDmButton;
button.variant = 'primary';
```

## 包含要素

### 基本要素

| 元素 | 标记 | 说明 |
| --- | --- | --- |
| 按钮 | `<el-dm-button>` | 有变体、大小、装入状态的按钮 |
| 纸牌 | `<el-dm-card>` | 装有页眉、车身和页脚槽的集装箱 |

### 窗体元素

| 元素 | 标记 | 说明 |
| --- | --- | --- |
| 投入 | `<el-dm-input>` | 包含验证状态的文本输入 |
| 切换 | `<el-dm-switch>` | 切换切换控制 |
| 幻灯片 | `<el-dm-slider>` | 带有可选范围模式的区域滑动器 |
| 自动完成 | `<el-dm-autocomplete>` | 输入建议下拉 |
| 摘取日期者 | `<el-dm-datepicker>` | 带有日历弹出的日期拾取器 |
| 文件加载 | `<el-dm-file-upload>` | 拖放文件上传 |
| 表单 | `<el-dm-form>` | 带有验证的窗体容器 |

### 反馈显示( D)

| 元素 | 标记 | 说明 |
| --- | --- | --- |
| 警报 | `<el-dm-alert>` | 带有严重程度变量的提醒信息 |
| 对话框 | `<el-dm-dialog>` | 带有背景的模块对话框 |
| 徽标 | `<el-dm-badge>` | 状态徽章和计数器 |
| 芯片 | `<el-dm-chip>` | 可选删除的标记和芯片 |
| 工具提示 | `<el-dm-tooltip>` | 隐藏工具提示 |
| 进展 | `<el-dm-progress>` | 进步栏和不确定的旋转器 |
| 标记 | `<el-dm-markdown>` | 带有语法加亮的下调渲染器 |

### 导航

| 元素 | 标记 | 说明 |
| --- | --- | --- |
| 标签 | `<el-dm-tabs>` | 标签界面 |
| 菜单 | `<el-dm-menu>` | 下放和上下文菜单 |
| 导航 | `<el-dm-navbar>` | 导航栏 |
| 绘图器 | `<el-dm-drawer>` | 滑出抽屉面板 |
| 面包屑 | `<el-dm-breadcrumbs>` | 面包屑导航 |
| 倾斜 | `<el-dm-pagination>` | 页面导航控制 |
| 步进 | `<el-dm-stepper>` | 向导的步数指标 |
| 底部导航 | `<el-dm-bottom-navigation>` | 移动底层导航 |

### 地表和容器

| 元素 | 标记 | 说明 |
| --- | --- | --- |
| 手风琴 | `<el-dm-accordion>` | 可折叠的内容部分 |
| 过量 | `<el-dm-popover>` | 浮出水面内容弹出 |
| 底盘 | `<el-dm-bottom-sheet>` | 移动底页 |

### 数据显示

| 元素 | 标记 | 说明 |
| --- | --- | --- |
| 日期 | `<el-dm-datetime>` | 只显示 ISO 日期和日期 |
| 图表 | `<el-dm-table>` | 带有排序、页码、选择的数据表 |

## 再出口公用事业

该套软件还从下列公司再出口公用事业: `@duskmoon-dev/el-base`数字 :

```ts
import {
  BaseElement,
  css,
  combineStyles,
  cssVars,
  defaultTheme,
  resetStyles,
} from '@duskmoon-dev/elements';
```

## 单个软件包

如果您仅需要特定元素, 请单独安装, 用于较小的捆绑大小 :

| 软件包 | CDN URL (简体中文) |
| --- | --- |
| `@duskmoon-dev/el-button` | `https://esm.sh/@duskmoon-dev/el-button/register` |
| `@duskmoon-dev/el-card` | `https://esm.sh/@duskmoon-dev/el-card/register` |
| `@duskmoon-dev/el-input` | `https://esm.sh/@duskmoon-dev/el-input/register` |
| `@duskmoon-dev/el-datetime` | `https://esm.sh/@duskmoon-dev/el-datetime/register` |
| `@duskmoon-dev/el-table` | `https://esm.sh/@duskmoon-dev/el-table/register` |
| `@duskmoon-dev/el-tabs` | `https://esm.sh/@duskmoon-dev/el-tabs/register` |
| `@duskmoon-dev/el-markdown` | `https://esm.sh/@duskmoon-dev/el-markdown/register` |

使用单个包的例子 :

```html
<!-- Only load the button element -->
<script type="module" src="https://esm.sh/@duskmoon-dev/el-button/register"></script>

<el-dm-button>Click me</el-dm-button>
```

或与一捆子:

```ts
import '@duskmoon-dev/el-button/register';
import '@duskmoon-dev/el-table/register';
```

## 类型脚本支持

所有元素类型和接口均导出 :

```ts
import type {
  // Property types from core
  Size,
  Variant,
  ValidationState,

  // Element-specific types
  TableColumn,
  TableRow,
  AutocompleteOption,
  BreadcrumbItem,
  PopoverPlacement,
  TabsVariant,
} from '@duskmoon-dev/elements';
```

## 许可证

麻省理工学院

## 常见问题

### @duskmoon-dev/elements 是什么？

一个包中所有 DuskMoon 自定义元素

### 如何安装 @duskmoon-dev/elements？

在项目目录运行 npm install @duskmoon-dev/elements，或使用 pnpm add / yarn add / bun add。

### @duskmoon-dev/elements 支持 TypeScript 吗？

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

### @duskmoon-dev/elements 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @duskmoon-dev/elements 可以商用吗？

@duskmoon-dev/elements 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @duskmoon-dev/elements 的下载量有多少？

根据 npm 官方下载统计，@duskmoon-dev/elements 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,616 次，日均约 87 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @duskmoon-dev/elements 还在维护吗？

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