# @designsystem-se/af 中文文档

规范地址：https://npmcn.com/package/%40designsystem-se/af/

版本：41\.0\.0
npm 元数据更新时间：2026-11-11T09:52:01.153Z
中文译文更新时间：2026-11-12T05:05:28.747Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40designsystem-se/af
原文对照：https://npmcn.com/package/%40designsystem-se/af/?lang=original
项目主页：https://designsystem.arbetsformedlingen.se/
源码仓库：https://gitlab.com/arbetsformedlingen/designsystem/digi

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

- 包体积（解压后）：27.9 MB，2900 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：d3 ^7\.8\.2，@types/d3 ^7\.4\.0，@stencil/core ^4\.7\.2，@stencil/sass ^3\.0\.7
- 首次发布：2025-09-04T07:55:27.536Z
- 最新版本发布：2026-11-11T09:52:00.927Z
- 近 30 天下载量：2860（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：127（近 12 个月 98 个）

## 中文简介

数字设计系统的Web组件

## 安装

```sh
npm install @designsystem-se/af
```

也可以使用：`pnpm add @designsystem-se/af`、`yarn add @designsystem-se/af`、`bun add @designsystem-se/af`

## README

![En byggkloss av ospecificerat märke. Illustration av typsnitt, färgstickor, datorer och mobiler. Skärmarna innehåller ikoner och inmatningsfält.](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/raw/main/assets/readme-banner.png)

Arbetsförmedlingens 设计系统 finns för att utvecklare, 设计师 och produktledre 为tersammans ska kunna skapa bättre tjänster för svenska arbetsmarknaden. 中国植物物种信息数据库.

(原始内容存档于2018-12-03). Utvecklas som öppen källkod tersammans med andra Myndigheter, utbildningsanordnare och kommersiella aktörer. 中国植物物种信息数据库.

Stöd för React, Angular, Web 组件 och Figma. 中国植物物种信息数据库.

[Dokumation 语句](https://designsystem.arbetsformedlingen.se/)

## 科姆·伊冈

安装设计系统et genom att köra en av följande rader

```sh
# React
npm install @designsystem-se/af-react @designsystem-se/af

# Angular
npm install @designsystem-se/af-angular @designsystem-se/af

# Inget ramverk
npm install @designsystem-se/af
```

Lägg 直至 följande rader i projektets 环球 css-fil

```css
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css';
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css';
```

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}别这样

## 输出

### 反应

```jsx
// App.tsx
import { DigiButton } from '@designsystem-se/af-react';
import { ButtonVariation } from '@designsystem-se/af';

export function App() {
  const handleClick = () => console.log('👋 Hallå Världen');
  return (
    <DigiButton afVariation={ButtonVariation.PRIMARY} onAfOnClick={handleClick}>
      Hälsa
    </DigiButton>
  );
}
```

### 角质

```ts
// app.component.ts
import { Component } from '@angular/core';
import { DigiArbetsformedlingenAngularModule } from '@designsystem-se/af-angular';
import { ButtonVariation } from '@designsystem-se/af';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DigiArbetsformedlingenAngularModule],
  templateUrl: './app.component.html'
})
export class AppComponent {
  buttonVariation = ButtonVariation.PRIMARY;
  handleClick() {
    console.log('👋 Hallå Världen');
  }
}
```

```html
<!--app.component.html-->
<digi-button afVariation="buttonVariation" (afOnClick)="handleClick"
  >Hälsa</digi-button
>
```

### 老学校

```html
<!--index.html-->
<!doctype html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css" />
    <link
      rel="stylesheet"
      href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css" />
    <script
      type="module"
      src="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js"></script>
  </head>
  <body>
    <digi-button af-variation="primary">Hälsa</digi-button>
    <script>
      let btn = document.querySelector('digi-button');
      btn.addEventListener('afOnClick', () => {
        console.log('👋 Hallå Världen');
      });
    </script>
  </body>
</html>
```

## Bidra 到 设计系统

尼菲肯på att hjälpa 一直到医疗 bygga ett av sveriges mest torgängliga och flexibla 设计系统? 别再说了

(原始内容存档于2012-10-12). Vi Behöver hjälp med allt ifrån kod, designänglighethetsarbete, 抄写 och marknadsföring.

-   法语 [贡献准则](https://npmcn.com/CONTRIBUTING.md)
-   科拉伊吉诺姆 [问题跟踪器](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues)尼伯贾提斯, [filltrera eftter "明德上扬" (中文(简体) )](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/?sort=created_date&state=opened&label_name%5B%5D=Mindre%20uppgift)

## 免疫论坛( F)

观察者:Dela inte känslig信息 eller personupgifter. (原始内容存档于2017-09-29). Allting i GitLab är turgängligt för alla besökare. (原始内容存档于2018-09-29) (英语). Vid övriga ärenden var. god använd kontaktuppgifter som fins torgängliga på [圆顶网本](https://designsystem.arbetsformedlingen.se/)。 。 。 .

-   医疗系统的问题? [斯卡帕问题](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=bug)
    
-   我设计系统? [斯克克卡(英语:Skicka in önskemål)](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=feature)
    
-   吃快活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活? [法兰西岛](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=question)
    

## Om 设计系统

设计系统 är välbeprövat i myndighetsvärlden sen frera år torbaka. 中国植物物种信息数据库. Komponenterna 签证 miljoner gånger per månad 直到 olika avändare.

* * *

团队设计系统@ Arbetsförmedlingen 2026

## 常见问题

### @designsystem-se/af 是什么？

数字设计系统的Web组件

### 如何安装 @designsystem-se/af？

在项目目录运行 npm install @designsystem-se/af，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：d3（^7\.8\.2）、@types/d3（^7\.4\.0）、@stencil/core（^4\.7\.2）、@stencil/sass（^3\.0\.7）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @designsystem-se/af 支持 TypeScript 吗？

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

### @designsystem-se/af 支持 ESM 还是 CommonJS？

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

### @designsystem-se/af 可以商用吗？

@designsystem-se/af 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @designsystem-se/af 的下载量有多少？

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

### @designsystem-se/af 还在维护吗？

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