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

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

安装

bun add @duskmoon-dev/el-chip

使用量

自动注册

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

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

手工登记

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);

模式

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

备选案文

大小

属性

槽数

CSS 组件

活动

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

实例

基础

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

语义模式

<!-- 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>

备选案文

<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>

颜色

<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>

大小

<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>

删除

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

可选择

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

已禁用

<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>

带有图标

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

处理删除

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",而被禁用的可删除芯片则禁用其删除按钮.

许可证

麻省理工学院