# @digdir/designsystemet-web 中文文档

规范地址：https://npmcn.com/package/%40digdir/designsystemet-web/

版本：1\.24\.0
npm 元数据更新时间：2026-11-09T12:20:55.885Z
中文译文更新时间：2026-11-12T07:56:52.778Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40digdir/designsystemet-web
原文对照：https://npmcn.com/package/%40digdir/designsystemet-web/?lang=original
项目主页：https://github.com/digdir/designsystemet/tree/main/packages/web
源码仓库：https://github.com/digdir/designsystemet

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

- 包体积（解压后）：1 MB，90 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2026-01-21T13:08:10.682Z
- 最新版本发布：2026-11-09T12:20:55.495Z
- 近 30 天下载量：65756（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：97（近 12 个月 97 个）

## 中文简介

Designsystemet 的 Javascript

## 安装

```sh
npm install @digdir/designsystemet-web
```

也可以使用：`pnpm add @digdir/designsystemet-web`、`yarn add @digdir/designsystemet-web`、`bun add @digdir/designsystemet-web`

## README

## `@digdir/designsystemet-web`

### 目录

-   [`@digdir/designsystemet-web`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-digdirdesignsystemet-web)
    -   [目录](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-table-of-contents)
-   [开始吧](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-get-started)
    -   [选择你需要的部分](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-pick-the-parts-you-need)
    -   [个人进口](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-individual-imports)
    -   [类型](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-types)
    -   [警告:](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-warnings)
-   [`<ds-breadcrumbs>`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-ds-breadcrumbs)
-   [`data-clickdelegatefor`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-data-clickdelegatefor)
-   [`details` 财务报告和审定财务报表 `summary` (无障碍多填充)](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-details-and-summary-accessibility-polyfill)
-   [`<dialog>` (单位:千美元)`closedby` 混合填充)](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-dialog-closedby-polyfill)
-   [`<ds-error-summary>`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-ds-error-summary)
-   [`<ds-field>`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-ds-field)
    -   [计数器](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-counter)
-   [`fieldset`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-fieldset)
-   [援引者`command` 混合填充)](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-invokers-command-polyfill)
-   [`<ds-pagination>`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-ds-pagination)
-   [`popover`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-popover)
-   [`readonly`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-readonly)
-   [`<ds-suggestion>`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-ds-suggestion)
-   [`<ds-tabs>`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-ds-tabs)
-   [`focusgroup` (充电)](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-focusgroup-polyfill)
-   [`data-tooltip`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-data-tooltip)

## 开始吧

`@digdir/designsystemet-web` 为Designsystemet组件提供框架独立行为. 与 `@digdir/designsystemet-css`,带有自己的CSS,或者作为现有设置中更小的增强层.

我们建议在您需要全球所有网络组件、观察器和多填充器时,导入整个软件包. 这将在全球注册所有网络组件和观察者, 所以你只需要做一次.

```ts
import '@digdir/designsystemet-web';
```

看我们的 [文档](https://designsystemet.no/en/fundamentals/code/setup) 财务报告和审定财务报表 [模式](https://designsystemet.no/en/patterns) 以更多的引导。 页面也可以通过附件作为 Markdown 提供 `.md` 到 URL 或请求 `Accept: text/markdown`。 。 。 .

### 选择你需要的部分

设计系统包的用意是像工具箱一样. 您可以使用完整的软件包, 或只使用加速您的工程的部件 .

例如,你可以:

-   使用情况 `@digdir/designsystemet-web` 无 `@digdir/designsystemet-css` 如果你已经有自己的造型
-   使用情况 `@digdir/designsystemet-css` 无 `@digdir/designsystemet-web` 如果您只需要样式和处理互动
-   将一些设计系统组件与您自己的组件合并
-   在软件包上添加帮助, 并跳过不符合您的设置的部件

### 个人进口

软件包支持子路径导出, 这意味着如果需要, 您可以导入软件包的单个部件 .

```
import '@digdir/designsystemet-web/ds-breadcrumbs';
import '@digdir/designsystemet-web/clickdelegatefor';
import '@digdir/designsystemet-web/details';
import '@digdir/designsystemet-web/dialog';
import '@digdir/designsystemet-web/ds-error-summary';
import '@digdir/designsystemet-web/ds-field';
import '@digdir/designsystemet-web/fieldset';
import '@digdir/designsystemet-web/focusgroup';
import '@digdir/designsystemet-web/invokers';
import '@digdir/designsystemet-web/ds-pagination';
import '@digdir/designsystemet-web/popover';
import '@digdir/designsystemet-web/readonly';
import '@digdir/designsystemet-web/ds-suggestion';
import '@digdir/designsystemet-web/ds-tabs';
import '@digdir/designsystemet-web/toggle-group';
import '@digdir/designsystemet-web/tooltip';
```

### 类型

将软件包添加到您的 `types` 类型:

```json
{
  "compilerOptions": {
    "types": ["@digdir/designsystemet-web"]
  }
}
```

### 警告:

`@digdir/designsystemet-web` 警告你们堕落和缺失的属性. 这在开发时可以有用,但也很容易被隐藏起来,例如在生产中:

```ts
import '@digdir/designsystemet-web';
if (typeof window !== 'undefined' && isProduction()) window.dsWarnings = false;
```

## `<ds-breadcrumbs>`

自动隐藏/显示 `aria-label` 桌面/移动和 `aria-current="page"` 在列表中最后一个链接中。 没有API.

```html
<ds-breadcrumbs class="ds-breadcrumbs" aria-label="You are here:">
  <a href="#none" aria-label="Back to level 3">
    Level 3
  </a>
  <ol>
    <li><a href="#none">Level 1</a></li>
    <li><a href="#none">Level 2</a></li>
    <li><a href="#none">Level 3</a></li>
  </ol>
</ds-breadcrumbs>
```

## `data-clickdelegatefor`

用于授权点击事件 。 例如,您可以使用它来授权从父元素到动态添加的孩子元素的点击事件.

```html
<div class="ds-card" data-clickdelegatefor="target">
  <a id="target" href="https://example.com" rel="noopener">Go to example</a>
  <span>Clicking this card will open example in a new tab</span>
</div>
```

## `details` 财务报告和审定财务报表 `summary` (无障碍多填充)

使用本地元素 。 和Android Talkback屏幕读取器合并后, 我们在 Firefox 中填充一个错误, 以正确宣布状态和角色 .

```html
<details class="ds-details">
  <summary>More info</summary>
  <div>Lorem ipsum dolor sit amet.</div>
</details>
```

## `<dialog>` (单位:千美元)`closedby` 混合填充)

使用本地语言 `<dialog>` 键。 我们多填充支持 [`closedby="any"`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy#any)。 。 。 .

```html
<dialog class="ds-dialog" closedby="any" id="my-dialog">
my dialog
</dialog>
```

### 打开和关闭

使用引用器 `command` 财务报告和审定财务报表 `commandfor`,打开并关闭对话框.

```html
<button class="ds-button" type="button" command="show-modal" commandfor="my-dialog">
  Open dialog
</button>
<dialog id="my-dialog" class="ds-dialog">
  <button class="ds-button" command="close" commandfor="my-dialog">Close</button>
</dialog>
```

## `<ds-error-summary>`

可见并设定时自动获取焦点 `aria-labelledby` 给第一个孩子 没有API.

```html
<ds-error-summary class="ds-error-summary">
  <h2>Summary</h2>
  <ul>
    <li><a href="#none">Error 1</a></li>
    <li><a href="#none">Error 2</a></li>
    <li><a href="#none">Error 3</a></li>
  </ul>
</ds-error-summary>
```

## `<ds-field>`

连接输入、标签和错误消息.

```html
<ds-field class="ds-field">
  <label>Label</label>
  <input type="text" placeholder="Placeholder" class="ds-input" />
  <div class="ds-validation-message" data-field="validation">
    This is a validation message.
  </div>
</ds-field>
```

### 计数器

您可以通过添加 `data-field="counter"` 属性为 a `<p>` a 内的元素 `ds-field`。 。 。 .

```html
<ds-field class="ds-field">
  <label>Label</label>
  <textarea class="ds-input"></textarea>
  <p data-field="counter" data-limit="20" data-over="%d tegn for mye" data-under="%d tegn igjen"></p>
</ds-field>
```

| 属性 | 类型 | 默认 | 所需经费 |
| --- | --- | --- | --- |
| 数据限制 | 编号 | 未定义 | 真实 |
| 数据结束 | 字符串 | %d 特克恩给我的 | 虚假 |
| 数据不足 | 字符串 | %d tegn igjen (英语) | 虚假 |

## `fieldset`

一个观察者会看着 `fieldset` 元素,添加一个id,将儿童元素与 `data-field="description"` 财务报告和审定财务报表 `legend` 输入 `aria-labelledby` 打开 `fieldset`。 。 。 .

```html
<fieldset>
    <legend>Delivery method</legend>
    <p data-field="description">Choose one option</p>
</fieldset>
```

## 援引者`command` 混合填充)

我们自动附加 [引用者-填充](https://www.npmjs.com/package/invokers-polyfill),这意味着你得到支持 `command` 财务报告和审定财务报表 `commandfor`。 。 。 .

## `<ds-pagination>`

执行 pagination,以文本填充按钮. 你可以用两个 `<a>` 财务报告和审定财务报表 `<button>` 标记中的元素.

如果不通过任何属性,您可以对当前页面和总页面执行自己的逻辑.

```html
<ds-pagination class="ds-pagination" aria-label="Bla i sider:" data-href="?page=%d" data-current="2" data-total="100">
  <ol>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
  </ol>
</ds-pagination>
```

## `popover`

我们使用原生的弹出器功能,但我们附加了一个事件听器,可以固定设计系统组件的位置.

```html
<button class="ds-button" popovertarget="popover">Open popover</button>
<div class="ds-popover" popover id="popover" data-placement="left">
  This is some popover content. It can be very long, but it will wrap and
  stay within the viewport.
</div>
```

| 属性 | 类型 | 默认 | 所需经费 |
| --- | --- | --- | --- |
| 数据位置 | 字符串 | 顶端 | 虚假 |
| 数据重叠 | 'cain' 未定义 | 未定义 | 虚假 |
| 数据自动化 | 布尔 | 真实 | 虚假 |

**如果你不用课 `ds-popover` 您需要添加 CSS 属性 `--_ds-floating` 到弹出式元素.** 这可能是 `top`, (中文(简体) ), `bottom`, (中文(简体) ), `left` 或者说 `right`。 。 。 .

## `readonly`

用于修复 `readonly` 支持时间 `select` 财务报告和审定财务报表 `input` 要素。 添加 `aria-readonly="true"` 使元素行为为只读,这意味着它不会被用户编辑或调用任何更改事件.

```html
<select aria-readonly="true">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
```

## `<ds-suggestion>`

扩展 `u-combobox` 从u元素。 见文档 [组合框](https://u-elements.github.io/u-elements/elements/u-combobox)。 。 。 .

```html
<ds-field class="ds-field">
  <label>Label</label>
  <ds-suggestion class="ds-suggestion">
    <input type="search" class="ds-input" />
    <del aria-label="Fjern innhold"></del>
    <u-datalist>
      <u-option value="option-1">Option 1</u-option>
      <u-option value="option-2">Option 2</u-option>
      <u-option value="option-3">Option 3</u-option>
    </u-datalist>
  </ds-suggestion>
</ds-field>
```

## `<ds-tabs>`

扩展 `u-tabs` 从u元素。 见文档 [乌塔布](https://u-elements.github.io/u-elements/elements/u-tabs)。 。 。 .

```html
<ds-tabs class="ds-tabs">
  <ds-tablist>
    <ds-tab>Tab 1</ds-tab>
    <ds-tab>Tab 2</ds-tab>
    <ds-tab>Tab 3</ds-tab>
  </ds-tablist>
  <ds-tabpanel>Panel 1</ds-tabpanel>
  <ds-tabpanel>Panel 2</ds-tabpanel>
  <ds-tabpanel>Panel 3</ds-tabpanel>
</ds-tabs>
```

## `focusgroup` (充电)

`focusgroup` 已多填充 [根据即将到来的规格](https://open-ui.org/components/scoped-focusgroup.explainer/)。 。 。 .

```html
<fieldset class="ds-toggle-group" focusgroup="radiogroup" aria-label="Tekstjustering" data-variant="secondary">
  <label class="ds-button">
    <input type="radio" name="alignment" value="left" checked />
    Left
  </label>
  <label class="ds-button">
    <input type="radio" name="alignment" value="center" />
    Center
  </label>
  <label class="ds-button">
    <input type="radio" name="alignment" value="right" />
    Right
  </label>
</fieldset>
```

无线电输入a `focusgroup="radiogroup"`和上面的切换组一样,由 `toggle-group`:箭头键不选择而移动焦点,然后输入选择。 也会迁移被堕落的人 `data-toggle-group` 属性为 `focusgroup="radiogroup"`警告你一声.

## `data-tooltip`

使用单个元素在元素旁边渲染 `data-tooltip` 属性. 自动设定 `aria-label` 或者说 `aria-description` 视需要而定. 使用本地流行功能与我们 [`popover`](https://npmcn.com/package/%40digdir/designsystemet-web/#readme-popover) 混合填充剂.

```html
<button data-placement="left" data-tooltip="left" class="ds-button">left</button>
```

## 常见问题

### @digdir/designsystemet-web 是什么？

Designsystemet 的 Javascript

### 如何安装 @digdir/designsystemet-web？

在项目目录运行 npm install @digdir/designsystemet-web，或使用 pnpm add / yarn add / bun add。

### @digdir/designsystemet-web 支持 TypeScript 吗？

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

### @digdir/designsystemet-web 支持 ESM 还是 CommonJS？

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

### @digdir/designsystemet-web 可以商用吗？

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

### @digdir/designsystemet-web 的下载量有多少？

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

### @digdir/designsystemet-web 还在维护吗？

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