# @brightspace-ui/core 中文文档 规范地址：https://npmcn.com/package/%40brightspace-ui/core/ 版本：3\.340\.0 npm 元数据更新时间：2026-11-05T16:13:38.658Z 中文译文更新时间：2026-11-08T15:24:30.893Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40brightspace-ui/core 原文对照：https://npmcn.com/package/%40brightspace-ui/core/?lang=original 项目主页：https://github.com/BrightspaceUI/core#readme 源码仓库：https://github.com/BrightspaceUI/core ## 关键信息（来自 npm 元数据） - 包体积（解压后）：6.2 MB，1511 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：7 个 - 首次发布：2019-07-09T20:30:16.354Z - 最新版本发布：2026-11-05T16:13:38.484Z - 近 30 天下载量：20113（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：2137（近 12 个月 375 个） ## 中文简介 用于构建 BlightSpace 应用程序的可访问、自由、开源网络组件集 ## 安装 ```sh npm install @brightspace-ui/core ``` 也可以使用：`pnpm add @brightspace-ui/core`、`yarn add @brightspace-ui/core`、`bun add @brightspace-ui/core` ## README > 你是D2L员工吗? 用我们的.. [日光设计系统站点](https://daylight.d2l.dev/)来啊! # @ brightspace- ui/ 核心 [![NPM version](https://img.shields.io/npm/v/@brightspace-ui/core.svg)](https://www.npmjs.org/package/@brightspace-ui/core) [![NPM downloads](https://img.shields.io/npm/dt/@brightspace-ui/core.svg)](https://www.npmjs.com/package/@brightspace-ui/core) 用于构建Brightspace应用程序的可访问,免费,开源的网络组件和工具集. ## 安装 ```shell npm install @brightspace-ui/core ``` ## README 索引 - 构成部分 - [警报](https://npmcn.com/package/%40brightspace-ui/core/components/alert/): 显示重要信息的提醒组件 - [面包屑](https://npmcn.com/package/%40brightspace-ui/core/components/breadcrumbs/): 帮助用户了解应用程序内位置的组件 - [后投弃](https://npmcn.com/package/%40brightspace-ui/core/components/backdrop/): 显示目标要素背景的组件 - [按钮](https://npmcn.com/package/%40brightspace-ui/core/components/button/): 普通、 初级、 图标、 微妙和切换按钮 - [日历](https://npmcn.com/package/%40brightspace-ui/core/components/calendar/): 日历组件 - [纸牌](https://npmcn.com/package/%40brightspace-ui/core/components/card/): 卡片组件 - [颜色](https://npmcn.com/package/%40brightspace-ui/core/components/colors/): 调色板 - [对话框](https://npmcn.com/package/%40brightspace-ui/core/components/dialog/): 通用和确认对话框 - [降级](https://npmcn.com/package/%40brightspace-ui/core/components/dropdown/): 放下打开器和内容容器 - [展开折叠](https://npmcn.com/package/%40brightspace-ui/core/components/expand-collapse): 创建可扩展和可折叠内容的组件 - [过滤器](https://npmcn.com/package/%40brightspace-ui/core/components/filter/): 单一或多维过滤组件 - [焦点陷阱](https://npmcn.com/package/%40brightspace-ui/core/components/focus-trap/): 限制焦点的通用容器 - [表单](https://npmcn.com/package/%40brightspace-ui/core/components/form/): 提交和审定的汇总数据 - [等级视图](https://npmcn.com/package/%40brightspace-ui/core/components/hierarchical-view/): 显示有效容器的嵌入式容器组件 - [HTML 块](https://npmcn.com/package/%40brightspace-ui/core/components/html-block/): 用于渲染用户授权的 HTML 组件 - [图标](https://npmcn.com/package/%40brightspace-ui/core/components/icons/): 图标 SVG 和网络组件 - [投入](https://npmcn.com/package/%40brightspace-ui/core/components/inputs/)数字 : - [复选框](https://npmcn.com/package/%40brightspace-ui/core/components/inputs/docs/input-checkbox.md): 复选框组件和样式 - [日期和时间](https://npmcn.com/package/%40brightspace-ui/core/components/inputs/docs/input-date-time.md): 日期和时间拾取器组件,包括范围 - [数目](https://npmcn.com/package/%40brightspace-ui/core/components/inputs/docs/input-numeric.md): 数字输入组件 - [无线电](https://npmcn.com/package/%40brightspace-ui/core/components/inputs/docs/input-radio.md): 无线电输入样式 - [搜索](https://npmcn.com/package/%40brightspace-ui/core/components/inputs/docs/input-search.md): 搜索输入组件 - [选择样式](https://npmcn.com/package/%40brightspace-ui/core/components/inputs/docs/input-select-styles.md): 选择输入样式 - [文本](https://npmcn.com/package/%40brightspace-ui/core/components/inputs/docs/input-text.md): 文本输入组件和样式 - [链接](https://npmcn.com/package/%40brightspace-ui/core/components/link/): 链接组件和样式 - [列表](https://npmcn.com/package/%40brightspace-ui/core/components/list/): 清单和清单项目组成部分 - [正在装入自旋器](https://npmcn.com/package/%40brightspace-ui/core/components/loading-spinner/): 加载-平板组件 - [菜单](https://npmcn.com/package/%40brightspace-ui/core/components/menu/): 菜单和菜单项组件 - [计量](https://npmcn.com/package/%40brightspace-ui/core/components/meter/):线性、光圈、圆度网组件 - [增加/ 减少](https://npmcn.com/package/%40brightspace-ui/core/components/more-less/): 限制长位内容 - [屏幕关闭](https://npmcn.com/package/%40brightspace-ui/core/components/offscreen/): 屏幕外定位内容的组件和样式 - [选择](https://npmcn.com/package/%40brightspace-ui/core/components/selection/):用于选择和批量行动的组件 - [滚动打包](https://npmcn.com/package/%40brightspace-ui/core/components/scroll-wrapper/): 水平滚动内容的箭头 - [斯凯莱通](https://npmcn.com/package/%40brightspace-ui/core/components/skeleton/): 在您的应用程序装入时, 应用低性能骨架 - [跳过导航](https://npmcn.com/package/%40brightspace-ui/core/components/skip-nav/): 用于跳过过导航面板的组件 - [排序](https://npmcn.com/package/%40brightspace-ui/core/components/sorting/): 调整列表中数据排序的菜单 - [状况指标](https://npmcn.com/package/%40brightspace-ui/core/components/status-indicator/): 状态指标组件 - [切换](https://npmcn.com/package/%40brightspace-ui/core/components/switch/): 开/关闭语义的切换组件 - [图表](https://npmcn.com/package/%40brightspace-ui/core/components/table/): 表格样式、列排序和溢出处理 - [标签](https://npmcn.com/package/%40brightspace-ui/core/components/tabs/): 标签和标签面板组件 - [标签列表](https://npmcn.com/package/%40brightspace-ui/core/components/tag-list/): 标签列表和标签列表项目组件 - [工具提示](https://npmcn.com/package/%40brightspace-ui/core/components/tooltip/): 工具提示组件 - [类型](https://npmcn.com/package/%40brightspace-ui/core/components/typography/): 打印样式和组件 - [验证](https://npmcn.com/package/%40brightspace-ui/core/components/validation/): 插件自定义验证逻辑到本地和自定义的形式元素 - 主计长 - [订阅者](https://npmcn.com/package/%40brightspace-ui/core/controllers/subscriber/):在多种关系中管理用户登记册 - 指令 - [动画](https://npmcn.com/package/%40brightspace-ui/core/directives/animate/): 动画显示、隐藏和去除元素 - 帮助者 - [帮助者](https://npmcn.com/package/%40brightspace-ui/core/helpers/):帮助由编成的DOM,独有的ID等. - 混合 - [箭头KeysMixin](https://npmcn.com/package/%40brightspace-ui/core/mixins/arrow-keys/): 用箭头键管理焦点 - [AsyncContiner 密克辛语Name](https://npmcn.com/package/%40brightspace-ui/core/mixins/async-container/): 管理集体合成状态 - [焦点混合](https://npmcn.com/package/%40brightspace-ui/core/mixins/focus/): 将焦点下放到嵌入式元素中 `focus()` 名为 - [窗体元素混合剂](https://npmcn.com/package/%40brightspace-ui/core/components/form/docs/form-element-mixin.md):允许组件参与形式和验证 - [交互式混合](https://npmcn.com/package/%40brightspace-ui/core/mixins/interactive/): 允许在嵌入网格内移动交互元素 - [摇篮混音](https://npmcn.com/package/%40brightspace-ui/core/mixins/labelled/): 标签自定义元素, 在整个 DOM 范围引用元素 - [本地化Mixin](https://npmcn.com/package/%40brightspace-ui/core/mixins/localize/): 在组件中将文本本地化 - [提供商Mixin](https://npmcn.com/package/%40brightspace-ui/core/mixins/provider/): 以类似DI的方式提供和消耗不同要素的数据 - [斯凯勒通密克辛](https://npmcn.com/package/%40brightspace-ui/core/components/skeleton/): 使组件骨架意识 - [可见于古代Mixin](https://npmcn.com/package/%40brightspace-ui/core/mixins/visible-on-ancestor/): 在祖先上方显示元素 - 模板 - [初等二级模板](https://npmcn.com/package/%40brightspace-ui/core/templates/primary-secondary): 有页眉和可选页脚的两个面板(初级和二级)页面模板 ## 发展中国家 复制后, 运行 `npm install` 以安装依赖. 运行 `npm run build` 一次,或任何时间图标文件被更改. ### 运行演示 开始 a [@ web/ dev- server( 网络服务器)](https://modern-web.dev/docs/dev-server/overview/) 显示演示页的主机: ```shell npm start ``` D2L员工还可以查看最新的主分支演示 [https://live.d2l.dev/BrightspaceUI/core/ (中文(简体) )](https://live.d2l.dev/BrightspaceUI/core/)。 。 。 . ### 线性 ```shell # eslint and stylelint npm run lint # eslint only npm run lint:eslint # stylelint only npm run lint:style ``` ### 测试 进行全套测试: ```shell npm test ``` 或者,可以有选择地进行测试: ```shell # unit tests npm run test:unit # aXe accessibility tests npm run test:axe # translations tests npm run test:translations ``` 注:轴测试需要 `prefers-reduced-motion` 如果在本地浏览器中调试, 模拟将在 dev 控制台中打开 . 此还原使用 [@ brightspace- ui/ 测试](https://github.com/BrightspaceUI/testing)执行视觉回归测试的 vdiff 命令 : ```shell # vdiff npm run test:vdiff # re-generate goldens npm run test:vdiff -- --golden ``` ### 版本和发布 此 repo 配置为使用 `semantic-release`输入前缀 `fix:` 财务报告和审定财务报表 `feat:` 合并到 `main`。 。 。 . 为了学习如何从维护分支中产生主要释放和释放,请参见: [语义- 释放 GitHub 动作](https://github.com/BrightspaceUI/actions/tree/main/semantic-release) 文档. ## 未来的加强 寻找新的组件还是此处未列出的增强功能? 创建 GitHub 问题 ! ## 常见问题 ### @brightspace-ui/core 是什么？ 用于构建 BlightSpace 应用程序的可访问、自由、开源网络组件集 ### 如何安装 @brightspace-ui/core？ 在项目目录运行 npm install @brightspace-ui/core，或使用 pnpm add / yarn add / bun add。 ### @brightspace-ui/core 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/brightspace-ui\_\_core 是否存在。 ### @brightspace-ui/core 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @brightspace-ui/core 可以商用吗？ @brightspace-ui/core 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @brightspace-ui/core 的下载量有多少？ 根据 npm 官方下载统计，@brightspace-ui/core 在 2026/10/09 – 2026/11/07 这 30 天内被下载 20,113 次，日均约 670 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @brightspace-ui/core 还在维护吗？ 最新版本 3\.340\.0 发布于 2026/11/06（3 天前）；至今共发布 2137 个版本，其中过去 12 个月发布了 375 个；首次发布于 2019/07/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。