# @financial-times/o-labels 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-labels/ 版本：8\.0\.2 npm 元数据更新时间：2026-10-06T13:39:49.053Z 中文译文更新时间：2026-11-14T18:35:36.826Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-labels 原文对照：https://npmcn.com/package/%40financial-times/o-labels/?lang=original 项目主页：https://registry.origami.ft.com/components/o-labels ## 关键信息（来自 npm 元数据） - 包体积（解压后）：73 kB，28 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：0 个 - peer 依赖：@financial-times/o-brand ^4\.1\.0，@financial-times/o-private-foundation ^1\.0\.0 - 首次发布：2019-02-12T17:10:20.199Z - 最新版本发布：2026-04-02T09:03:33.063Z - 近 30 天下载量：6336（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：56（近 12 个月 3 个） ## 中文简介 标签用于内容分类或强调一个值. 以 FT 色彩调色板提供自定义选项. ## 安装 ```sh npm install @financial-times/o-labels ``` 也可以使用：`pnpm add @financial-times/o-labels`、`yarn add @financial-times/o-labels`、`bun add @financial-times/o-labels` ## README # o-标签 标签用于内容分类,以强调一个值,或突出一个状态. - [使用量](https://npmcn.com/package/%40financial-times/o-labels/#readme-usage) - [标签类型](https://npmcn.com/package/%40financial-times/o-labels/#readme-label-types) - [标记](https://npmcn.com/package/%40financial-times/o-labels/#readme-markup) - [萨斯](https://npmcn.com/package/%40financial-times/o-labels/#readme-sass) - [移徙指南](https://npmcn.com/package/%40financial-times/o-labels/#readme-migration-guide) - [联系人](https://npmcn.com/package/%40financial-times/o-labels/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-labels/#readme-licence) ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/docs/components/#including-origami-components-in-your-project) 开始 `o-labels`。 。 。 . ## 标签类型 标签有三种类型: - [标准标签](https://npmcn.com/package/%40financial-times/o-labels/#readme-standard-label),默认值. - [指标标签](https://npmcn.com/package/%40financial-times/o-labels/#readme-indicator-label)。 。 。 . - [时间戳标签](https://npmcn.com/package/%40financial-times/o-labels/#readme-timestamp-label)。 。 。 . ### 标准标签 标准标签用于内容分类或强调一个值. 例如,突出核心品牌的商业或溢价内容,或突出内部产品的服务层次。 可创建自定义标签 . #### 标准标签大小 本表概述了可能的标准标签大小. | 大小 | 说明 | 品牌支持 | | :-: | :-: | :-: | | 大块 | 带有增加字体大小并加贴的标签 . | 核心、内部、白色标签 | | 小数 | 字体大小缩小并贴有标签 . | 核心、内部、白色标签 | #### 标准标签国 本表概述了可能的标准标签状态. 也可以创建自定义状态 . | 状态 | 说明 | 品牌支持 | | :-: | :-: | :-: | | 内容-商业 | 用于识别有薪职位或晋升内容. | 核心项目 | | 内容- premium | 用于识别溢价内容. | 核心项目 | | 生命周期β | 用来识别一个在β中的特征. | 核心项目 | | 支持活动 | 曾表示某部分被积极维护. | 内部 | | 支持维护 | 用于表示维持一个组件. | 内部 | | 支助-实验 | 曾经表示一个组件是一个实验特征. | 内部 | | 支持折旧 | 用于表示某一组件已贬值. | 内部 | | 支持 - dead | 曾表示一个组件不再使用. | 内部 | | 分层铂 | 曾表示有白金服务等级的服务. | 内部 | | 分级 | 曾指有黄金服务等级的服务. | 内部 | | 分级银色 | 曾指有银质服务等级的服务. | 内部 | | 分级铜 | 用来表示有青铜质服务等级的服务. | 内部 | | 奥克福德 | 一个没有指定具体含义的以颜色为基础的标签. | 内部 | | 泰尔 | 一个没有指定具体含义的以颜色为基础的标签. | 内部 | | 柠檬 | 一个没有指定具体含义的以颜色为基础的标签. | 内部 | | 列表 | 一个没有指定具体含义的以颜色为基础的标签. | 内部 | | 玉坛 | 一个没有指定具体含义的以颜色为基础的标签. | 内部 | | 曲线 | 一个没有指定具体含义的以颜色为基础的标签. | 内部 | | 普通话 | 一个没有指定具体含义的以颜色为基础的标签. | 内部 | ### 指标标签 指标标签用于以新的,更新的和活的变体显示故事状态. 指标标签只支持核心品牌,但 [内部品牌支持正在考虑中](https://github.com/Financial-Times/o-labels/issues/58)。 。 。 . #### 标志标签状态 本表概述了可能的指标标签状态: | 指标 | 说明 | 品牌支持 | | :-: | :-: | :-: | | 现场直播 | 说明一个故事是直播. | 核心项目 | | 关闭 | 说明一个活的故事不再是活的. | 核心项目 | | 新设 | 说明一个故事是新的. | 核心项目 | | 更新 | 说明一个故事已经更新. | 核心项目 | 例如,一个活的标签: ```html live ``` 现场和封闭的标签也支持更突出的徽章变体: ```html live ``` ### 时间戳标签 时间戳标签用于在文章不是新的,更新的,或者活的时,显示一个指标标签所取代的文章状态. 时间戳标签只支持核心品牌. ## 标记 ### 标准标签标记 标准标签的最低标记如下: ```html Label ``` 标准标签以内衬显示,因此,将上述标记列入一款,例如,将使其与文本并列. 有几个大小修饰类,可用于改变标准标签的一般外观: ```html Big Label Small Label ``` 标签也可以有多个州之一. 可用的状态取决于您使用的品牌( 白标签品牌组件没有状态) : 以下核心品牌状态用于对内容进行分类,多见于FT.com上: ```html Paid Post (used for paid post and promoted content) Premium (used for premium-only content) ``` 以下状态用于表示一个特征处于β状态: ```html Beta ``` 以下内部品牌状态用于代表Origami组件的不同支持级别: to ```html Active Maintained Experimental Deprecated Dead ``` 以下内部品牌状态用于代表FT的服务级别: 1 ```html Platinum Gold Silver Bronze ``` 内部品牌也可能使用以颜色调色板为基础的状态,这些状态没有指定用于灵活性的特定用途: ```html oxford teal lemon slate jade crimson mandarin ``` ### 标志标志 指标标签有三个状态之一: - `live` - `closed` - `updated` - `new` 使用下列标记进行活标签 : ```html live ``` 使用修改类 `o-labels-indicator--closed` 用于关闭标签 : ```html closed ``` 对于更新或新建的标签,使用相联的修饰类,例如. `o-labels-indicator--updated`,并添加一个儿童元素 `o-labels-indicator__timestamp` 显示新的/更新的时间。 我们建议使用 [日期](https://o2-core.origami.ft.com/?path=/docs/maintained-o-date-readme--docs&globals=backgrounds:!undefined) 以格式化时间戳元素. ```html new ``` 指标标签还支持一个反向主题,用于黑暗背景. 要使用反向主题,请添加 `o-labels-indicator--inverse` 班级的标记. ```diff - + live ``` ### 时间戳标记 要加入时间戳标签,请使用以下标记. 注意时间戳标签还支持一个带有阴暗背景的可选反向变体 `o-labels-timestamp--inverse` 类 : ```html ``` 同指标标签一样,我们建议使用 [日期](https://o2-core.origami.ft.com/?path=/docs/maintained-o-date-readme--docs&globals=backgrounds:!undefined) 以格式化时间戳元素. ## 萨斯 输出所有标签样式 `oLabels` 组合 : ```scss @include oLabels(); ``` 或通过选项映射 `$opts` 参数来输出所需的标签样式。 选项包括: - 大小: 要输出的标准标签大小列表( 见 [可用大小](https://npmcn.com/package/%40financial-times/o-labels/#readme-standard-label-sizes)(中文(简体) ) - 状态:要输出的标准标签列表(参见 [可用状态](https://npmcn.com/package/%40financial-times/o-labels/#readme-standard-label-states)页:1 - 指标 - 状态:要输出的指标标签状态列表(参见 [可用状态](https://npmcn.com/package/%40financial-times/o-labels/#readme-indicator-label-status)(中文(简体) ) - 反转 - 时间戳 - 反转 ```scss @include oLabels( $opts: ( // standard label sizes to output // e.g. .o-labels--big 'sizes': ('big'), // standard label states to output // e.g. .o-labels--content-commercial 'states': ('content-commercial', 'content-premium'), // indicator label labels to output // .o-labels-indicator 'indicators': ( // indicator label statuses to output // .o-labels-indicator--live 'status': ('live'), // whether to output the indicator label inverse style // .o-labels-indicator--inverse 'inverse': true ), // output the timestamp label label // .o-labels-timestamp 'timestamp': ( // whether to output the timestamp label inverse style // .o-labels-timestamp--inverse 'inverse': true ), ) ); ``` ### 自定义标准标签状态 使用 `oLabelsAddState` 混合以添加标准标签的自定义标签状态。 见 [`oLabelsAddState` 萨斯道克](https://o2-core.origami.ft.com/?path=/docs/maintained-o-labels-sassdoc--docs&globals=backgrounds:!undefined#olabelsaddstate) 更多细节. ```scss // outputs a class .o-labels--citrus-fruit @include oLabelsAddState( 'citrus-fruit', ( background-color: oColorsByName('lemon'), ) ); ``` ### 自定义标记 当无法使用时 `o-labels` CSS类,例如在另一个折射组件中,使用: - `oLabelsContent` 以自定义类输出标准标签. - `oLabelsIndicatorContent` 输出带有自定义类的指标标签. - `oLabelsTimestampContent` 输出带有自定义类的时间戳标签. 如果可以使用的话 `o-labels` 我们推荐的班级 [标签](https://npmcn.com/package/%40financial-times/o-labels/#readme-sass) 财务报告和审定财务报表 [标签Add国](https://npmcn.com/package/%40financial-times/o-labels/#readme-custom-standard-label-state) 换句话说 在使用多个标签的地方, 使用这些标签将有助于缩小您的 CSS 捆绑的大小 . ### 标签关联 `oLabelsContent` 接受一个 `$opts` 参数是选项的映射。 用于所有标签设置"碱"到"真"所要求的输出样式. 然后设置标签 "[大小](https://npmcn.com/package/%40financial-times/o-labels/#readme-size)" 及其 "[状态](https://npmcn.com/package/%40financial-times/o-labels/#readme-states)" .. 这些选项中的任何一种都可以独立输出. 要输出现有的标签 : ```scss .o-example-my-label { @include oLabelsContent( $opts: ( 'base': true, 'size': 'big', 'state': 'tier-gold', ) ); } ``` 输出自定义标签 : ```scss .o-example-my-custom-label { @include oLabelsContent( $opts: ( 'base': true, 'size': 'big', 'state': ( 'background-color': oColorsByName('lemon'), ), ) ); } ``` ### 标签指示器 由于指标标签的样式适用于多个html元素 `oLabelsIndicatorContent` 接受一个 `$opts` 参数到每个元素的输出样式. ```scss // equivalent to .o-labels-indicator .my-indicator-label { @include oLabelsIndicatorContent( $opts: ( 'block': true, ) ); } // equivalent to .o-labels-indicator--live .my-indicator-label--live { @include oLabelsIndicatorContent( $opts: ( 'block': true, 'modifier': 'live', ) ); } // equivalent to .o-labels-indicator__status .my-indicator-label__status { @include oLabelsIndicatorContent( $opts: ( 'element': 'status', ) ); } // equivalent to .o-labels-indicator__timestamp .my-indicator-label__timestamp { @include oLabelsIndicatorContent( $opts: ( 'element': 'timestamp', ) ); } ``` ## 移徙指南 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 维护 | 第7条 | 不详 | [迁移到 v7](https://npmcn.com/package/%40financial-times/o-labels/MIGRATION.md#migrating-from-v6-to-v7) | | 已贬值 | 6个 | 6.5 (中文(简体) ) | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-labels/MIGRATION.md#migrating-from-v5-to-v6) | | 已贬值 | 页:1 | 5.2 国家 | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-labels/MIGRATION.md#migrating-from-v4-to-v5) | | 已贬值 | 页:1 | 不详 | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-labels/MIGRATION.md#migrating-from-v3-to-v4) | | 已贬值 | 3个 | 3.1.1 国家 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-labels/MIGRATION.md#migrating-from-v2-to-v3) | | 已贬值 | 2个 | 2.1.0 国家 | 不详 | | 已贬值 | 1个 | 1.0.6 (中文(简体) ) | 不详 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-labels/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . ## 常见问题 ### @financial-times/o-labels 是什么？ 标签用于内容分类或强调一个值\. 以 FT 色彩调色板提供自定义选项\. ### 如何安装 @financial-times/o-labels？ 在项目目录运行 npm install @financial-times/o-labels，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/o-brand（^4\.1\.0）、@financial-times/o-private-foundation（^1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @financial-times/o-labels 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-labels 是否存在。 ### @financial-times/o-labels 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-labels 可以商用吗？ @financial-times/o-labels 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-labels 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-labels 在 2026/10/15 – 2026/11/13 这 30 天内被下载 6,336 次，日均约 211 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-labels 还在维护吗？ 最新版本 8\.0\.2 发布于 2026/04/02（7 个月前）；至今共发布 56 个版本，其中过去 12 个月发布了 3 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。