# @adobe/coral-spectrum 中文文档 规范地址：https://npmcn.com/package/%40adobe/coral-spectrum/ 版本：4\.21\.12 npm 元数据更新时间：2026-10-01T01:33:00.040Z 中文译文更新时间：2026-11-06T16:08:00.331Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40adobe/coral-spectrum 原文对照：https://npmcn.com/package/%40adobe/coral-spectrum/?lang=original 项目主页：https://github.com/adobe/coral-spectrum#readme 源码仓库：https://github.com/adobe/coral-spectrum ## 关键信息（来自 npm 元数据） - 包体积（解压后）：484 MB，1527 个文件 - TypeScript 类型：未声明 - 运行依赖：9 个 - 首次发布：2019-05-06T14:18:22.690Z - 最新版本发布：2026-05-19T09:16:01.714Z - 近 30 天下载量：2780（2026-10-05 至 2026-11-03，npm 官方下载统计） - 已发布版本数：211（近 12 个月 5 个） ## 中文简介 Coral Spectrum是一个遵循Spectrum设计模式的JavaScript Web组件库. ## 安装 ```sh npm install @adobe/coral-spectrum ``` 也可以使用：`pnpm add @adobe/coral-spectrum`、`yarn add @adobe/coral-spectrum`、`bun add @adobe/coral-spectrum` ## README > 离职 [光谱网络组件](https://github.com/adobe/spectrum-web-components) 这是一个面向未来的项目,旨在围绕网络组件开发Adobe Spectrum设计语言,ES-Modules,以及现代浏览器标准. # 珊瑚光谱 ![Build Status](https://github.com/adobe/coral-spectrum/workflows/Unit%20Tests%20and%20Accessibility%20CI/badge.svg) 遵循Spectrum设计模式的JavaScript Web组件库. # 重要 请跟随 [提交信件公约](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)为了便于遵守,建议使用 [(简体中文)](https://github.com/commitizen/cz-cli)。 。 。 . ## 显示大小写 #### [构成部分实例](http://opensource.adobe.com/coral-spectrum/examples) 将所有组成部分都付诸行动。 这些只是例子,并不涵盖所有的情况. #### [API 参考文献](http://opensource.adobe.com/coral-spectrum/documentation/identifiers.html) 覆盖所有组件的 API , 包括属性、 事件等 . #### [游戏场](http://opensource.adobe.com/coral-spectrum/playground) 与最新Coral Spectrum版本的实验和预览代码. 代码可以通过复制粘贴URL来共享. 游乐场被放入沙箱,以防止安全风险. ## 光谱 当前默认主题是执行 [光谱](https://spectrum.adobe.com/) 设计 adobe的设计系统。 Spectrum提供元素和工具 帮助产品团队工作更多 提高Adobe的应用的凝聚力. 珊瑚光谱利用 [光谱 CSS](https://github.com/adobe/spectrum-css) 框架到样式 构成部分,包括 [光谱 SVG 图标](https://spectrum.adobe.com/page/icons)。 。 。 . ## Angular, React, Vue.js 兼容性 我们的愿景是通过提供完整,易于使用的 HTML 组件库来创建一致的 Adobe 体验 兼容 [主要框架](https://custom-elements-everywhere.com/)。 。 。 . 为了实现这一目标,珊瑚光谱来源于 [自定义元素 v1](https://html.spec.whatwg.org/multipage/custom-elements.html) 与 [本地支助](https://caniuse.com/#feat=custom-elementsv1) 感谢浏览器供应商之间的广泛合作. 使用自定义元素使我们有能力向消费者隐瞒许多实施细节,从而允许很多 更自由地改变支持这些要素的基本标记. 这使得暴露的API变小而更清晰,导致更新珊瑚光谱所需的风险降低 引入破解更改. ## 浏览器支持 Coral Spectrum 旨在支持以下浏览器: - 颜色( 最新) - 萨法里(最新) - 火狐( 最新) - 边缘( 最新) - IE 11 请检查URL=值 (帮助) - iOS 7+ (英语) - 安卓4.4+ (中文(简体) ) ## 主题( 浅、 暗、 最浅、 最暗) 默认的珊瑚光谱样式从 `coral--light`, (中文(简体) ), `coral--lightest`, (中文(简体) ), `coral--dark` 财务报告和审定财务报表 `coral--darkest` ,因此该类必须在更高一级指定. ```html
``` ## 大规模支助 对于可移动性,Spectrum具有更大的规模,使得所有控件上都能有更大的自来水目标. 班级为了让它成为可能 `coral--large` 必须在更高一级说明. ```html ``` ## 内建无障碍和键盘支持 若您持有政府合同, 申请无法进入, 可能意味着数千美元的罚款. 这也意味着通过使你的应用完全无法对他们使用来疏远整个社会阶层. 为了帮助你避免这种情况,我们规定每个珊瑚光谱成分都应该可以访问. ## 国际化支助 珊瑚光谱为其弦乐国际化提供了强大的内部系统. 这是通过Adobe内部程序完成的. 支持的语言有: | 语言家庭 | 语言标记 | 语言变体 | | --- | --- | --- | | 联合国 | 页:1 美国 | 美语英语 | | 法语 | 法语 | 标准法语 | | 德语 | 已删除 | 标准德语 | | 意大利语 | 这.. | 标准意大利语 | | 西班牙语 | 欧 -- ES | 卡斯蒂利亚西班牙语 | | 葡萄牙语 | pt-BR (英语) | 巴西葡萄牙语 | | 日本语 | 贾-JP | 标准日语 | | 韩文 | 韩国 | 标准韩文 | | 中文 | 页:1 | 中国大陆,简化字符 | | 中文 | 日东 | 台湾,传统人物 | | 荷兰语Name | 无 - NL | 荷兰 荷兰 | | 丹麦语Name | 达-德克 | 标准丹麦语 | | 芬兰语 | fi- FI 数据 | 标准芬兰语 | | 挪威语 | 无 -无 | 标准挪威语 | | 瑞典语 | sv-SE (英语) | 标准瑞典语 | | 捷克语 | (cs-CZ语) | 标准捷克语 | | 波兰语Name | pL 常规 | 标准波兰语 | | 俄语 | 鲁-鲁 | 标准俄语 | | 土耳其语Name | t- TR 函数 | 标准土耳其语 | ## 使用珊瑚光谱 ### 最容易通过CDN 使用 Coral Spectrum 的最简单方法是使用 CDN, 例如将这些行复制到您的 html 文件 . ```html ``` ### 复制分发文件 您可以下载已包装/已发布版本 `@adobe/coral-spectrum` 从 npm : ``` npm pack @adobe/coral-spectrum ``` 解开下载的软件包后 找找 `dist` 文件夹和 : - 复制文件从 `dist/css`, (中文(简体) ), `dist/js` 财务报告和审定财务报表 `dist/resources` 在你的项目. - 引用页面中的文件, 例如 ```html ``` ### 包括装有包裹的全图书馆 `npm install @adobe/coral-spectrum` 然后在主js中,使用: ``` require("@adobe/coral-spectrum/dist/js/coral.js"); require("@adobe/coral-spectrum/dist/css/coral.css"); ``` ### 只包括您需要的组件 如果您的工程只需要几个组件, 您可以使用模块捆绑器 [网络软件包](https://webpack.js.org/) 只导入所需的组件. 以下是Webpack配置的例子: ```js const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { mode: 'production', devtool: 'source-map', entry: './src/index.js', output: { filename: 'bundle.min.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.svg$/, use: [ { loader: 'file-loader', options: { name: 'icons/[name].[ext]' }, }, ] }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'style.min.css' }), new OptimizeCssAssetsPlugin({ assetNameRegExp: /style\.min\.css$/g, cssProcessor: require('cssnano'), cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true } }], } }) ] }; ``` 在你身边 `index.js` 文件,您可以导入并使用单个组件 : ```js // Import Component import {Button} from '@adobe/coral-spectrum/coral-component-button'; const button = new Button(); ``` 如果不显示图标,请确保设置样式和图标的路径,例如: ```html ``` 如果图标仍未显示, 您可以尝试将它们设置为内线显示 SVG,而不是外部资源. 珊瑚光谱将默认为外部 iE11以外的浏览器上的资源。 使用上一个示例,此选项 可设置为: ```html ``` **说明:** 日历、时钟和取相器组件将起杠杆作用 [一分钟。 js](http://momentjs.com/) 如果有的话. ## 捐款 看看这个 [提供指南](https://github.com/adobe/coral-spectrum/blob/master/.github/CONTRIBUTING.md)。 。 。 . ### 建筑和测试 先运行以下命令 : ``` npm install -g gulp-cli npm install ``` 您可以使用下面的任务开始 : - `gulp` 生成 `dist` 文件夹并运行 dev 服务器 `localhost:9001` 默认. - `gulp build` 生成 `dist` 文件夹. - `gulp dev` 运行 dev 服务器 `localhost:9001` 默认. - `gulp test` 进行测试。 测试报告在 `dist/coverage`。 。 。 . - `gulp docs` 用于构建文档 `dist/documentation`。 。 。 . - `gulp axe` 运行无障碍检查. 每个组件可以独立建设,例如. `cd coral-component-button && gulp`。 。 。 . ### 释放 #### 自动释放 : 将公关合并为主机将触发自动放出Github Action. 紧随其后 [Angular 提交信件常规](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)建议使用 [(简体中文)](https://github.com/commitizen/cz-cli) 以轻易地犯罪. 仅 **修补** 财务报告和审定财务报表 **功绩** 可以触发释放。 如果你想跳过释放 [在承诺消息中添加 \[skip release\] 或 \[release swop\]](https://semantic-release.gitbook.io/semantic-release/support/faq#can-i-exclude-commits-from-the-analysis) #### 手动释放 : 我们目前正在发布这个包 `npm`。 。 。 . 在开始前,用以下命令来清理你的依赖: ``` git checkout master rm -rf node_modules && npm install ``` 然后运行 `gulp release`。将要求您按下该版本(默认情况下的微缩版)。 珊瑚光谱在后方 [语义版本](https://docs.npmjs.com/about-semantic-versioning) (有的补丁,有的是小的,有的是主的). 命令将注意增加、标记版本并发布软件包 `npm`。 。 。 . 如果一切顺利,快跑 `gulp deploy` 将文件公布于 `gh-pages` 其他分支返回版本的凸起. ## 常见问题 ### @adobe/coral-spectrum 是什么？ Coral Spectrum是一个遵循Spectrum设计模式的JavaScript Web组件库\. ### 如何安装 @adobe/coral-spectrum？ 在项目目录运行 npm install @adobe/coral-spectrum，或使用 pnpm add / yarn add / bun add。 ### @adobe/coral-spectrum 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/adobe\_\_coral-spectrum 是否存在。 ### @adobe/coral-spectrum 可以商用吗？ @adobe/coral-spectrum 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @adobe/coral-spectrum 的下载量有多少？ 根据 npm 官方下载统计，@adobe/coral-spectrum 在 2026/10/05 – 2026/11/03 这 30 天内被下载 2,780 次，日均约 93 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @adobe/coral-spectrum 还在维护吗？ 最新版本 4\.21\.12 发布于 2026/05/19（5 个月前）；至今共发布 211 个版本，其中过去 12 个月发布了 5 个；首次发布于 2019/05/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。