# @financial-times/o-buttons 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-buttons/ 版本：7\.11\.1 npm 元数据更新时间：2026-10-06T13:39:35.692Z 中文译文更新时间：2026-11-14T18:31:01.159Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-buttons 原文对照：https://npmcn.com/package/%40financial-times/o-buttons/?lang=original 项目主页：https://registry.origami.ft.com/components/o-buttons ## 关键信息（来自 npm 元数据） - 包体积（解压后）：150 kB，35 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：0 个 - peer 依赖：@financial-times/o-brand ^4\.1\.0，@financial-times/o-icons ^7\.8\.0，@financial-times/o-colors ^6\.7\.0，@financial-times/o-normalise ^3\.3\.2，@financial-times/o-typography ^7\.6\.2 - 首次发布：2019-02-12T16:21:42.080Z - 最新版本发布：2026-02-26T10:54:57.002Z - 近 30 天下载量：13628（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：71（近 12 个月 1 个） ## 中文简介 FT按钮样式. 以 FT 色彩调色板提供自定义选项. ## 安装 ```sh npm install @financial-times/o-buttons ``` 也可以使用：`pnpm add @financial-times/o-buttons`、`yarn add @financial-times/o-buttons`、`bun add @financial-times/o-buttons` ## README > ⚠️ **注:** 已替换为 [o3- 按钮](https://npmcn.com/package/%40financial-times/o3-button/README.md)请参看 [移徙指南](https://npmcn.com/package/%40financial-times/o-buttons/MIGRATION.md#migrating-from-v7-to-o3-button@3) 用于升级的步骤. # ○-按钮 o-按钮提供Sass混音和变量来创建按钮. - [使用量](https://npmcn.com/package/%40financial-times/o-buttons/#readme-usage) - [标记](https://npmcn.com/package/%40financial-times/o-buttons/#readme-markup) - [萨斯](https://npmcn.com/package/%40financial-times/o-buttons/#readme-sass) - [参考资料](https://npmcn.com/package/%40financial-times/o-buttons/#readme-references) - [移徙](https://npmcn.com/package/%40financial-times/o-buttons/#readme-migration) - [联系人](https://npmcn.com/package/%40financial-times/o-buttons/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-buttons/#readme-licence) ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始 `o-buttons`。 。 。 . 按钮允许用户与页面或产品互动. 每个页面或产品区(一种形式,模式,一篇文章内)不应有超过1个主按钮,所剩任何CTA应被显示为次要或鬼按钮. 按钮传达用户可以采取的行动. 它们通常被放置在你的UI中,比如: - 对话框 - 模块窗口 - 表单 - 纸牌 - 工具栏 ### 不使用时 如果用户采取的行动是导航的,例如返回,则不应使用按钮. ### 无障碍 - **最好采用实施时提供的颜色组合.** 保证这些组合符合WCAG AA要求. 定制颜色时,参考 [颜色指南](https://www.w3.org/TR/WCAG21/#non-text-contrast) 确保无障碍. - 在大多数情况下,偏好使用默认大小按钮而不是小按钮. 默认大小的按钮便于用户注意并按下. ## 标记 扣子有三种类型,一是一是一是一是二是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一. | 类型 | 选择器 | 品牌支持 | 目的 | | :-: | :-: | :-: | :-: | | 小学 | .o-按钮-主 | 核心、内部、白色标签 | 校长呼吁在网页上采取行动。 主按钮只应在每个产品区出现一次(不包括应用程序头,模式对话框,现场消息或侧面板). | | 中学 | .o-按钮-中学 | 核心、内部、白色标签 | 用于每一页的次要动作或与主按钮结合使用。 作为一对的一部分,次要按钮的功能是执行集的负动作,例如"取消"或"回". | | 幽灵 | .o-按钮-鬼 | 核心、内部、白色标签 | 对于最不显著的动作;经常与主按钮并用. 在进展流等情况下,可以将"鬼"按钮与"主"和"副"按钮相配,其中"主"按钮为"拯救并延续""鬼"按钮为"Skip". | ```html ``` o-按钮 CSS将工作 ` ``` Sass 用户可能创建 [自定义主题](https://npmcn.com/package/%40financial-times/o-buttons/#readme-custom-themes)。 。 。 . ### 大小 任何按钮都可以使用 `o-buttons--big` 修饰品类. ```html ``` ### 图标 要在按钮上添加图标, 添加类 `o-buttons-icon` 财务报告和审定财务报表 `o-buttons-icon--{icon-name}` 转到你的按钮. [萨斯](https://npmcn.com/package/%40financial-times/o-buttons/#readme-sass) 用户可以从 [语句](https://registry.origami.ft.com/components/fticons/) 设置。 不过如果你在使用 [构建服务](https://www.ft.com/__origami/service/build/) 可用的按钮图标数量有限。 限制图标数量会让CSS捆绑得更小,但是如果你需要我们目前不支持的图标按钮,那么请联系Origami团队: - 左箭头 - 右箭头 - 上传 - 勾选 - 加号 - 警告 - 向下箭头 - 向上箭头 - 网格 - 列表 - 编辑 - 下载 - 搜索 - 刷新 - 横 ```html ``` 如果您希望按钮只显示图标, 请添加类 `o-buttons-icon--icon-only` ,并为屏幕阅读器用户提供可视化隐藏标签 `o-buttons-icon__label`。 。 。 . ```html ``` ### 组 环绕按钮 `.o-buttons-group` 将它们组合在一起: ```html
``` ### 倾斜 将按钮包入页盖样式 `.o-buttons-pagination`。大多数页标使用套装 `a` 类似按钮而非按钮的链接标记 `button` 标签。 在 pagination 中使用锚标记时, 不使用 `aria-selected` 数据属性。 改为使用 `aria-current="page"` 要显示当前页面,这将突出显示当前页面的按钮并显示阅读器. 以下的标记示例显示了20页的页码,其中第14页为当前页码. 紧接着 [标记规则](https://npmcn.com/package/%40financial-times/o-buttons/#readme-pagination-rules) 我们建议显示不超过7页,并使用椭圆元素来显示隐藏的结果. ```html
Previous results 1 ... 13 14 15 ... 20 Next results
``` #### 接地规则 要显示的页数不是由 Origami 执行 。 然而,我们建议如下: - 一次显示不超过7页. 当有超过7页时,以以下方式将多页隐藏在页形椭圆后. 鉴于: - 所选的页面在3下显示椭圆,两边各有3页. - 所选的页面是最后2页之一,其中一面显示有3页的椭圆. - 第3页选取出4页,椭圆,再取出2页. - 上页的第3回选取了2页,椭圆,再选取4页. - 所选页面从第一页和最后一页分出3个以上,显示第一页,椭圆,三页,椭圆和最后一页. 举例来说 [在 Origami 注册中进行页码演示](https://registry.origami.ft.com/components/o-buttons@6.0.19#demo-pagination-layout)。 。 。 . #### 倾斜 主题 主题修改符, 如 `o-buttons--inverse` 可在页形块内的按钮上添加. #### 缓冲大小 大按钮也可能被用在平面图样式中. 添加 `o-buttons--big` 每个按钮的修改符和 `o-buttons-pagination__ellipsis--big` 到椭圆元素. ```html
Previous results 1 2 3 ... 18 19 20 Next results
``` ### 已禁用 避免禁用按钮, 除非用户研究显示它们改进了您的界面 。 已禁用按钮有 [对比差,使他们难以阅读](https://npmcn.com/package/%40financial-times/o-buttons/#readme-references)。它们也 [不反馈给用户为什么被禁用](https://npmcn.com/package/%40financial-times/o-buttons/#readme-references)。 。 。 . 要禁用按钮,请添加 `disabled` 属性。 将已禁用按钮隐藏到正在激活时添加类 `o-buttons--hide-disabled`。 。 。 . ```html ``` ## 萨斯 输出默认的 o- 按钮 CSS 给主混音器发出单调 `oButtons`。建议您通过一个选项映射,作为仅包含需要的按钮样式的第一个参数。 没有选项映射,所有o-按钮样式都包括在内. ```scss @include oButtons($opts: ( 'sizes': ('big'), // e.g .o-buttons--big 'types': ('primary', 'secondary', 'ghost'), // e.g .o-buttons--primary 'themes': ('mono', 'inverse', 'b2c', 'professional', 'professional-inverse', 'ft-live'), // e.g .o-buttons--inverse 'icons': ('arrow-left', 'arrow-right', 'search'), // any fticons, e.g .o-buttons-icons.o-buttons-icons--search 'pagination': true, // .o-buttons-pagination 'groups': true // .o-buttons-group )); ``` ### 自定义主题 创建新按钮主题调用 `oButtonsAddTheme` 带有主题的颜色以及您想要与主题一起使用的按钮和图标类型。如果有的话. - 名称:您的主题名称。 用于 Modifer 类输出 `o-buttons--{name}`。 。 。 . - 选择:用于主题的选项地图。 键包括 `color` 财务报告和审定财务报表 `context`。 。 。 . - 颜色:按钮的主要颜色。 任何 o-colors 调色板颜色名称 . - 上下文( 可选) : 设置了您的按钮背景颜色 。 默认页面颜色(核心品牌的纸张,否则为白色). 这用于确认无障碍,并在某些情况下改变按钮的颜色. - 类型:用于主题的按钮类型列表. - 图标:您使用的主题图标列表。 任意 [语句](https://registry.origami.ft.com/components/fticons/) 图标名称. ```scss /// .o-buttons--my-special-button @include oButtonsAddTheme( $name: 'my-special-button', $opts: ('color': 'claret-80'), $types: ('primary', 'secondary'), $icons: ('arrow-up', 'arrow-down') ); ``` ### 自定义标记 我们建议使用 `o-buttons` 标记,因为这鼓励CSS再利用和较小的捆绑尺寸。 如果您无法更新标记以使用 `o-buttons` 分类,包括由 `oButtonsAddTheme`,使用时 `oButtonsContent`数字 : ```scss .my-button { @include oButtonsContent($opts: ('type': 'primary')); } ``` ```scss .my-icon-button { @include oButtonsContent($opts: ( 'type': 'primary', 'icon': 'arrow-right' )); } ``` ```scss .my-lemon-button { @include oButtonsContent($opts: ( 'type': 'primary', 'theme': ('color': 'lemon') )); } ``` `oButtonsContent` 拥有重新创建所有按钮的选项,包括大小不同的按钮和仅用于图标的按钮。 见 [o- 按钮 SassDoc](https://registry.origami.ft.com/components/o-buttons/sassdoc) 更多细节和实例. ## 参考资料 - 汉普斯·塞斯福斯更详细地解释了与被禁用按钮有关的问题 [轴slab.com 文章](https://axesslab.com/disabled-buttons-suck/)在文章中,Hampus建议采用其他设计方法,用于常见的残疾按钮. ## 移徙 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 活动 | 单位3 | 不详 | [迁移到 o3](https://npmcn.com/package/%40financial-times/o-buttons/MIGRATION.md#migrating-from-v7-to-o3-button@3) | | 维护 | 第7条 | 不详 | [迁移到 v7](https://npmcn.com/package/%40financial-times/o-buttons/MIGRATION.md#migrating-from-v6-to-v7) | | 已贬值 | 6个 | 6.2 请检查date=中的日期值 (帮助) | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-buttons/MIGRATION.md#migrating-from-v5-to-v6) | | 已贬值 | 页:1 | 5.16 联合国 | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-buttons/MIGRATION.md#migrating-from-v4-to-v5) | | 已贬值 | 页:1 | 4.5 国家 | \- 说吧 | | 已贬值 | 3个 | 3.1 国家 | \- 说吧 | | 已贬值 | 2个 | 2.0 数据 | \- 说吧 | | 已贬值 | 1个 | 1.8 (中文(简体) ) | \- 说吧 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-buttons/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . * * * ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . ## 常见问题 ### @financial-times/o-buttons 是什么？ FT按钮样式\. 以 FT 色彩调色板提供自定义选项\. ### 如何安装 @financial-times/o-buttons？ 在项目目录运行 npm install @financial-times/o-buttons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/o-brand（^4\.1\.0）、@financial-times/o-icons（^7\.8\.0）、@financial-times/o-colors（^6\.7\.0）、@financial-times/o-normalise（^3\.3\.2）、@financial-times/o-typography（^7\.6\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @financial-times/o-buttons 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-buttons 是否存在。 ### @financial-times/o-buttons 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-buttons 可以商用吗？ @financial-times/o-buttons 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-buttons 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-buttons 在 2026/10/15 – 2026/11/13 这 30 天内被下载 13,628 次，日均约 454 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-buttons 还在维护吗？ 最新版本 7\.11\.1 发布于 2026/02/26（8 个月前）；至今共发布 71 个版本，其中过去 12 个月发布了 1 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。