# @altinn/altinn-components 中文文档 规范地址：https://npmcn.com/package/%40altinn/altinn-components/ 版本：0\.79\.2 npm 元数据更新时间：2026-11-03T12:46:11.373Z 中文译文更新时间：2026-11-06T02:10:01.954Z 软件包许可：ISC 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40altinn/altinn-components 原文对照：https://npmcn.com/package/%40altinn/altinn-components/?lang=original 项目主页：https://github.com/Altinn/altinn-components#readme 源码仓库：https://github.com/Altinn/altinn-components ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.7 MB，1012 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：8 个 - peer 依赖：react \>=18\.3\.1 \|\| ^19\.0\.0，react-dom \>=18\.3\.1 \|\| ^19\.0\.0 - 首次发布：2024-10-31T14:16:39.499Z - 最新版本发布：2026-11-03T12:46:10.970Z - 近 30 天下载量：6671（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：406（近 12 个月 189 个） ## 中文简介 可重复使用的反应组件 ## 安装 ```sh npm install @altinn/altinn-components ``` 也可以使用：`pnpm add @altinn/altinn-components`、`yarn add @altinn/altinn-components`、`bun add @altinn/altinn-components` ## README # 备选构件 后一出阿tin. 没有由多个产品小组开发,它们都努力实现为最终用户提供无缝、统一经验的共同目标——确保他们将这种经验视为单一而健全的产品. 这个软件包代表了这些团队中设计师和开发人员之间的协作努力,整合了共同挑战的解决方案. 它提供Altinn特有反应组件,专门满足这些特定团队的共同UI需要. 今天这些团队 [Arbeidslate 团队](https://github.com/digdir/dialogporten-frontend), (中文(简体) ), [团队授权](https://github.com/Altinn/altinn-access-management-frontend)和团队门户. 请注意,该套装是专门为满足上述团队的独特需要而设计的,并非作为通用图书馆. 我们已经有惊人的 [挪威公共部门的设计系统](https://designsystemet.no/)我们的目标是在它有意义的地方纳入它的内容,确保调整和利用其优势,同时适应阿尔廷的具体要求. ## 采用设计系统的战略 从2025年4月10日起 我们决定开始从 [挪威公共部门的设计系统](https://designsystemet.no/) 视需要而定。 这些组件将使用 `DS` 前缀. 消费者 `altinn-components` 能够直接使用这些组件,而不需要 `@digdir/designsystemet` 作为依赖. 这种办法使我们能够: - 在过渡阶段避免同现有组成部分相冲突. - 实验与外观和行为相适应,以适应阿尔丁品牌. - 逐步取代遗留部分:一次 `DS` 已经足够定制和测试, 我们将删除 `DS` 前缀并推广到一等部件. - 发挥设计系统的优势,同时保持对解决方案视觉一致性的全面控制. - 保持一个经过精心整理和整合的从联合国 `@digdir/designsystemet` 与阿尔廷的外观和感觉. 这项战略与我们以前的做法自然而然地发展起来,我们没有使用来自 `@digdir/designsystemet` 直接但依赖其象征结构,并探索深化一体化的机会. 这种方法帮助我们更快地前进并建立了理解——现在我们准备采取下一步. ## 设计符号和 CSS 构建进程 这项一揽子计划以挪威公共部门的设计系统为基础,结合 上游设计标志 有 Altinn 特定的扩展和覆盖 . 为了支持这一点,我们维持一个小型的内部构建脚本: - 从 `@digdir/designsystemet` - 应用 Altinn 品牌特性和上传功能(从 `./lib/css/tokens/altinn-design-tokens`(中文(简体) ) - 构建此库使用的最后 CSS 和令牌 ### 如何使用 1. 转到 [https://them.designsystemet.no/no/ (中文(简体) )](https://theme.designsystemet.no/no/) 2. 选择“ 继续从配置文件” . 3. 粘贴配置从 `./lib/css/tokens/designsystemet.config.json` 并装入主题. 4. 做你的魔术 5. 设置(cog)和"Ta i bruk tema",并将更新的内容替换为 `./lib/css/tokens/designsystemet.config.json` 6. 运行 `pnpm build-tokens` - 这将生成更新的符号和Cs `design-tokens-build` 目录. CSS 已经装入 `./lib/css/global.css`你们可以走了! ### 目录结构 ````txt lib/css/tokens/ base/ # Tokens originating from @digdir/designsystemet extensions/ # Altinn-specific additions and overrides build/ # Generated output (CSS + tokens) ## Feedback and questions Keep in mind that this package is a work in progress and will be updated continuously. If you have any feedback or questions, please reach out to us on Github. ## Installation To install the package, run the following command: ```bash # for npm users npm install @altinn/altinn-components # for yarn users yarn add @altinn/altinn-components # for pnpm users pnpm add @altinn/altinn-components ```` 与Node.js 20.x试验 ## 所需资源 `React` `>=18`作为同伴的依赖关系。 还有 `react-dom` 如果需要的话。 我们强烈建议使用 `React` `>=19`。 。 。 . ## 使用量 在 RootProvider 中环绕您的应用程序, 以便在所有组件中共享上下文 。 以下是基本设置: ```tsx import { RootProvider } from "@altinn/components"; function App() { return {/* Your application here */}; } ``` 要使用应用程序中的组件,需要从软件包中导入要使用的组件。 例如: ```tsx // example: import the Avatar component and type import { Avatar, type AvatarVariant } from "@altinn/components"; ``` 并一次导入应用程序中的 cs 文件, 如您的 cs 文件 : ```ts import "@altinn/altinn-components/lib/css/global.css"; ``` 用于正确和尽量减少全球重置和变量的收集. 确保您有 Inter 字体家族的字体面孔 : ```html ``` ## 文档 有关各组成部分的文件,见本文件附件 [故事书](https://altinn.github.io/altinn-components) 组件由标记来装饰来显示组件的当前状态. 标记为: - `@outdated` - 组件与最新设计不同步. - `@beta` - 构件在β中,更有可能有缺陷或缺失特征. - `@experimental` - 该部分是试验性的,正在进行中。 建议不使用. - `@deprecated` - 该部件已贬值,不应使用. 拥有标签的主要动机是减轻压力,在将标签放出供使用之前必须使一切稳定下来. 它还使我们能够在早期阶段获得关于这些组成部分的反馈. ## 故事书测试跑道( 可访问) 故事书测试选手的配置置于.sorybook/ test-runner.ts 首先,你需要运行的故事书: ``` pnpm storybook ``` 完成此任务后, 在另一个终端中按照命令运行, 测试所有可访问的故事 ``` pnpm test-storybook ``` 要测试特定文件,运行... ``` pnpm test-storybook --watch ``` ...并按“ p” 选择文件名过滤 。 然后开始输入故事本文件f.ex的名称. 恶作剧 帮助者将列出所有匹配您输入的文件 . 点击输入以测试文件 . 如果有更多的文件匹配您的输入, 也会被测试 . - 如果故事书cli 运行所有测试 即使用 -- watch 旗, 或者你可以简单地运行: ``` pnpm test-storybook --watch 'MyComponent.stories.tsx' ``` - 要跳过测试, 在标记数组中添加“ skip- test” 字符串, 用于您想要排除的测试 。 此选项在测试运行器. ts 文件中定义 . 目前,故事/Demo和docs下的所有测试都排除在外,因为那里不需要无障碍测试. ## 屏幕截图测试 屏幕截图测试通过将组件截图与基线图像进行比较来自动捕捉视觉回归. ```bash # Run all screenshot tests pnpm test:screenshots # Test specific component pnpm test:screenshots:filter "Button" # Delete all screenshots and generate new pnpm test:screenshots:regenerate-all # Regenerate only the screenshots that are currently failing pnpm test:screenshots:regenerate-failed ``` ## 跳过屏幕截图测试 有些病例无法进行截图测试. 一个例子是虚拟化的列表,我们在那里生成随机化的内容,每一个渲染。 在这种情况下,在组件/演示文稿中应该添加截图 : {跳过: 真} 参数 . #### 示例:虚拟化Menu.stories.tsx ```bash export const Virtualized = () => { const { items, groups } = useMemo(() => useRandomMenuItems(10000), []); return ; }; Virtualized.parameters = { //can't screenshot tests with useRandomMenuItems screenshot: { skip: true }, }; ``` ## 常见问题 ### @altinn/altinn-components 是什么？ 可重复使用的反应组件 ### 如何安装 @altinn/altinn-components？ 在项目目录运行 npm install @altinn/altinn-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.3\.1 \|\| ^19\.0\.0）、react-dom（\>=18\.3\.1 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @altinn/altinn-components 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @altinn/altinn-components 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @altinn/altinn-components 可以商用吗？ @altinn/altinn-components 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @altinn/altinn-components 的下载量有多少？ 根据 npm 官方下载统计，@altinn/altinn-components 在 2026/10/06 – 2026/11/04 这 30 天内被下载 6,671 次，日均约 222 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @altinn/altinn-components 还在维护吗？ 最新版本 0\.79\.2 发布于 2026/11/03（2 天前）；至今共发布 406 个版本，其中过去 12 个月发布了 189 个；首次发布于 2024/10/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。