# @duskmoon-dev/el-chip 中文文档

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

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

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

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

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

- 包体积（解压后）：142 kB，17 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2026-01-13T08:42:28.735Z
- 最新版本发布：2026-11-11T10:50:08.854Z
- 近 30 天下载量：2511（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：51（近 12 个月 51 个）

## 中文简介

一个可用的芯片/tag自定义元素,包含显示,链接,动作,选择和去除模式.

## 安装

```sh
npm install @duskmoon-dev/el-chip
```

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

## README

# @duskmoon-dev/el-chip (日语)

具有显示、链接、动作、选择和删除的可访问芯片/tag自定义元素 模式.

## 安装

```bash
bun add @duskmoon-dev/el-chip
```

## 使用量

### 自动注册

```typescript
import '@duskmoon-dev/el-chip/register';
```

```html
<el-dm-chip>Label</el-dm-chip>
```

### 手工登记

```typescript
import { ElDmChip, register } from '@duskmoon-dev/el-chip';

// Register with default tag name
register();

// Or register with custom tag name
customElements.define('my-chip', ElDmChip);
```

## 模式

| 模式 | 启用方式 | 渲染语义 | 用于 |
| --- | --- | --- | --- |
| 显示 | 无模式属性 | 非重点 `<span>` | 静态标签和标签 |
| 链接 | `href` | 土著 `<a>` | 导航 |
| 可点击 | `clickable` | 土著 `<button type="button">` | 一次性行动 |
| 可选择 | `selectable` | 本地切换按钮 `aria-pressed` | 筛选和选择 |
| 删除 | `deletable` | 非交互容器, 带有本地删除按钮 | 可移动标签 |

当存在多个模式属性时,模式优先 `deletable` → `href` → `selectable` → `clickable` - 显示。 这阻止了嵌入式交互控制. 使用一个模式 每个芯片属性,除非您有意依赖此优先.

## 备选案文

| 备选案文 | 说明 |
| --- | --- |
| `filled` | 已填充的背景( 默认) |
| `outlined` | 外观样式 |
| `soft` | 软/细背景 |

## 大小

| 大小 | 说明 |
| --- | --- |
| `sm` | 小芯片 |
| `md` | 中芯片( 默认) |
| `lg` | 大芯片 |

## 属性

| 属性 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `variant` | `string` | `'filled'` | 样式变体 |
| `color` | `string` | `'primary'` | 颜色变体 |
| `size` | `string` | `'md'` | 大小 : `sm`, (中文(简体) ), `md`, (中文(简体) ), `lg` |
| `href` | `string` | \- 说吧 | 启用链接模式并设定链接目的地 |
| `target` | `string` | \- 说吧 | 链接浏览上下文;仅使用 `href` |
| `rel` | `string` | \- 说吧 | 链接关系; 只与 `href` |
| `clickable` | `boolean` | `false` | 启用动作按钮模式 |
| `selectable` | `boolean` | `false` | 启用切换按钮模式 |
| `deletable` | `boolean` | `false` | 显示删除按钮 |
| `delete-label` | `string` | `'Remove chip'` | 删除按钮的可访问名称( N)`deleteLabel` (财产) |
| `selected` | `boolean` | `false` | 选中状态; 在可选择模式下自动切换 |
| `disabled` | `boolean` | `false` | 状态 |

## 槽数

| 槽 | 说明 |
| --- | --- |
| (默认) | 芯片标签 |
| `icon` | 标签前图标 |

## CSS 组件

| 编 | 说明 |
| --- | --- |
| `chip` | 芯片元素 |
| `icon` | 图标容器 |
| `delete` | 删除按钮 |

## 活动

| 活动 | 细节 | 说明 |
| --- | --- | --- |
| `dm-click` | \- 说吧 | 当链接或可点击芯片被激活时开火 |
| `dm-change` | `{ selected: boolean }` | 在可选择的芯片切换后被解除 |
| `dm-delete` | \- 说吧 | 删除按钮激活时已开火 |
| `delete` | \- 说吧 | 使用 `dm-delete` |

定制事件发泡,跨越阴影边界,可以取消. 正在取消 `dm-click` 防止链接导航。 土著 `click` 显示主机或按钮的事件也 可用.

## 实例

### 基础

```html
<el-dm-chip>Default</el-dm-chip>
```

### 语义模式

```html
<!-- Display -->
<el-dm-chip>Release 1.8</el-dm-chip>

<!-- Link -->
<el-dm-chip href="/releases" target="_blank" rel="noopener">Releases</el-dm-chip>

<!-- Action -->
<el-dm-chip clickable>Refresh</el-dm-chip>

<!-- Selection -->
<el-dm-chip selectable selected>TypeScript</el-dm-chip>

<!-- Removal -->
<el-dm-chip deletable delete-label="Remove TypeScript filter">TypeScript</el-dm-chip>
```

### 备选案文

```html
<el-dm-chip variant="filled">Filled</el-dm-chip>
<el-dm-chip variant="outlined">Outlined</el-dm-chip>
<el-dm-chip variant="soft">Soft</el-dm-chip>
```

### 颜色

```html
<el-dm-chip color="primary">Primary</el-dm-chip>
<el-dm-chip color="success">Success</el-dm-chip>
<el-dm-chip color="warning">Warning</el-dm-chip>
<el-dm-chip color="error">Error</el-dm-chip>
```

### 大小

```html
<el-dm-chip size="sm">Small</el-dm-chip>
<el-dm-chip size="md">Medium</el-dm-chip>
<el-dm-chip size="lg">Large</el-dm-chip>
```

### 删除

```html
<el-dm-chip deletable delete-label="Remove Web Components tag">Web Components</el-dm-chip>
```

### 可选择

```html
<el-dm-chip selectable>Unselected</el-dm-chip> <el-dm-chip selectable selected>Selected</el-dm-chip>
```

### 已禁用

```html
<el-dm-chip href="/releases" disabled>Unavailable link</el-dm-chip>
<el-dm-chip clickable disabled>Unavailable action</el-dm-chip>
<el-dm-chip selectable disabled>Unavailable choice</el-dm-chip>
<el-dm-chip deletable disabled>Protected tag</el-dm-chip>
```

### 带有图标

```html
<el-dm-chip>
  <span slot="icon">⭐</span>
  Featured
</el-dm-chip>
```

### 处理删除

```javascript
const chip = document.querySelector('el-dm-chip');
const filterInput = document.querySelector('#filter-input');
chip.addEventListener('dm-delete', () => {
  chip.remove();
  filterInput?.focus();
});
```

组件会发出删除请求, 但永远不会自行删除 。 如果应用程序删除 焦点芯片,必须移动焦点到下个逻辑芯片,上个芯片,或自有输入.

遗产 `delete` 事件仍可用作贬值的别名。 应使用新的整合 `dm-delete`。 。 。 .

## 无障碍

-   显示芯片是普通的,非焦点的文本容器.
-   链接、可点击和可选择模式使用本地锚和按钮语义,包括其 内置键盘行为.
-   可选择的芯片以 `aria-pressed` 并保持焦点 后旋转.
-   减肥芯片曝光可聚焦本地按钮. 设定 `delete-label` 默认时 `Remove chip` 名称不够具体;删除图标隐藏在辅助技术中.
-   禁用按钮使用本地 `disabled` 状态。 禁用链接作为非交互 间距 `aria-disabled="true"`,而被禁用的可删除芯片则禁用其删除按钮.

## 许可证

麻省理工学院

## 常见问题

### @duskmoon-dev/el-chip 是什么？

一个可用的芯片/tag自定义元素,包含显示,链接,动作,选择和去除模式\.

### 如何安装 @duskmoon-dev/el-chip？

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

### @duskmoon-dev/el-chip 支持 TypeScript 吗？

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

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

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

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

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

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

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

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

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