# @financial-times/o-header 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-header/ 版本：15\.5\.2 npm 元数据更新时间：2026-10-06T13:39:45.263Z 中文译文更新时间：2026-11-14T18:56:25.328Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-header 原文对照：https://npmcn.com/package/%40financial-times/o-header/?lang=original 项目主页：https://registry.origami.ft.com/components/o-header ## 关键信息（来自 npm 元数据） - 包体积（解压后）：155 kB，44 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：0 个 - peer 依赖：@financial-times/math ^1\.0\.0，@financial-times/o-brand ^4\.1\.0，@financial-times/o-forms ^10\.0\.0，@financial-times/o-utils ^2\.0\.0，@financial-times/o-toggle ^3\.2\.6，@financial-times/o-viewport ^5\.1\.2，@financial-times/o-private-foundation ^1\.0\.4 - 首次发布：2019-02-12T16:47:38.010Z - 最新版本发布：2026-07-14T14:26:35.589Z - 近 30 天下载量：3476（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：91（近 12 个月 6 个） ## 中文简介 财政反应 带有初级和二级导航、降下特大菜单和可折叠抽屉的时代页头 ## 安装 ```sh npm install @financial-times/o-header ``` 也可以使用：`pnpm add @financial-times/o-header`、`yarn add @financial-times/o-header`、`bun add @financial-times/o-header` ## README # 头部 FT品牌网站响应头. 见 [折纸导航服务](https://www.ft.com/__origami/service/navigation) 要填充 `o-header` 以真实导航数据标记. - [使用量](https://npmcn.com/package/%40financial-times/o-header/#readme-usage) - [标记](https://npmcn.com/package/%40financial-times/o-header/#readme-markup) - [Java 脚本](https://npmcn.com/package/%40financial-times/o-header/#readme-javascript) - [萨斯](https://npmcn.com/package/%40financial-times/o-header/#readme-sass) - [浏览器支持](https://npmcn.com/package/%40financial-times/o-header/#readme-browser-support) - [移徙指南](https://npmcn.com/package/%40financial-times/o-header/#readme-migration-guide) - [联系人](https://npmcn.com/package/%40financial-times/o-header/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-header/#readme-licence) ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://npmcn.com/package/docs/legacy-o2-docs/technical-guide.md) 开始 `o-header`。 。 。 . ## 标记 由于标题有不同之处,而且每个标题的加分都具体和比较广泛,我们建议访问 [组件页](https://o2-core.origami.ft.com/?path=/story/components-o-header--header-primary&globals=backgrounds:!undefined) 在故事书中找到最适合你的产品的标记。 组件页面上的演示不会使用真实的导航数据,因为它可能会过时. 见 [折纸导航服务](https://www.ft.com/__origami/service/navigation) 要填充 `o-header` 以真实导航数据标记。 Origami导航服务是一个JSON API,它提供导航结构,供跨FT网站使用. _我们无意在客户端这么做 故意在输入和输出之间不设课 这个留给产品处理._ 信头内部的一些元素需要特定的数据属性,所以JavaScript可以正确添加一些行为. 它们是: - data-o-header-no-js:应用于根元素. 当 JavaScript 通知时此数据属性被删除 - 数据-o-header-sticky:应用于标题的粘性变异 - 数据-o-header-mega:应用于根 `
` 大菜单 - 数据-o-header-搜索:应用于根 `
` 会 议 日 程 和 议 程 _增强_ 搜索行。 有两个搜索行,一个用于增强,另一个用于核心 - 数据-o-header-绘图器:应用于根 `
` 抽屉 - data-o-header-subnav: 应用到根上 `div` 子导航菜单 - 数据-o-header-subnav-wrapper: 应用到内包装器 `div` 让JS能处理滚动 - data-o-header-search-state:可选,可以是"打开"或"关闭"来表示搜索栏的默认能见度. 子导航头可以使用modifer类 `o-header__subnav--primary` 实现符合主导航的样式,其中项目链接为粗体并大写,背景颜色为 `paper`。 。 。 . ## Java 脚本 必须为每个 `
` 您的页面中含有使用此组件的内容. ```js import oHeader from '@financial-times/o-header'; const headerEl = document.querySelector('.o-header'); const header = new oHeader(headerEl); ``` O-header 构建器接受一个可选选项对象,用于控制某些行为: - `searchState`:可能是"打开"或"关闭",以确定信头的搜索栏是否立即可见. 默认情况下,搜索栏会被隐藏. ```js import oHeader from '@financial-times/o-header'; const headerEl = document.querySelector('.o-header'); const header = new oHeader(headerEl, {searchBarOpen: true}); ``` 或者,a `o.DOMContentLoaded` 事件可以在文档中发出,为每个元素自动构造一个 o-header 对象,并带有 `data-o-component="o-header"` 属性 : ```js import '@financial-times/o-header'; document.addEventListener('DOMContentLoaded', function () { document.dispatchEvent(new CustomEvent('o.DOMContentLoaded')); }); ``` ### 活动 o-header发射以下事件: - `oHeader.MegaMenuShow`: 当显示一个巨型菜单时。 事件的目标是菜单本身. - `oHeader.MegaMenuClose`:当一个特大菜单被关闭时. 事件的目标是菜单本身. - `oHeader.Sticky`:当信头更改为或从粘相. 活动细节将包括: `isActive` 布尔表示粘不粘。 事件的目标是菜单本身. ## 萨斯 标题由各种特征组成(如. `nav`, (中文(简体) ), `search`,以及 `drawer`) (中文(简体) ). 为了得到一切,使用 `oHeader()` 无参数混合。 要得到所需的东西,你可以通过一个选项列表作为第一个参数. 备选方案清单如下: - `top`: 第一行头的样式,包括抽屉菜单和搜索栏的标志和按钮. - `nav`:主导航,是直接坐落在头部上部的导航. - `search`:当用户按下搜索图标时出现的搜索栏. - `anon`: 当用户未登录时出现的行样式. - `sticky`:向下滚动时使页眉粘住页顶的样式. - `simple`: 文章页所减少的更瘦头的样式. - `transparent`: 无背景颜色和白色文字及标志的"反向"标题的样式. 仅供黑暗背景使用。 目前不支持导航抽屉( 如果您想要使用此变体的抽屉, 请向 Origami 报告 ). - `megamenu`: 当用户在导航项目上徘徊时出现的特大菜单的样式. - `drawer`: 用作小屏幕上主导航的抽屉菜单样式. 仅用于特性的输出样式,不包括所有特性所需的基准标题样式,通过 `false` 作为第二个论点. 举个例子 为了获得FT主页所需的所有CSS,你会打电话: ```scss @include oHeader(('sticky', 'simple', 'anon', 'search', 'nav', 'megamenu')); ``` ## 浏览器支持 用于 `o-header` 设置一个 [核心和增强的经验](https://npmcn.com/package/docs/o3-specification.md) 在你的项目. `o-header` 取决于 `o--if-js` 财务报告和审定财务报表 `o--if-no-js` 课程. ## 移徙指南 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 维护 | 页:1 | 不详 | [迁移到 v14](https://npmcn.com/package/%40financial-times/o-header/MIGRATION.md#migrating-from-v13-to-v14) | | 已贬值 | 第13条 | 13.1 国家 | [迁移到 v13](https://npmcn.com/package/%40financial-times/o-header/MIGRATION.md#migrating-from-v12-to-v13) | | 已贬值 | 第12条 | 不详 | [迁移到 v12](https://npmcn.com/package/%40financial-times/o-header/MIGRATION.md#migrating-from-v11-to-v12) | | 已贬值 | 第11个 | 不详 | [迁移到 v11](https://npmcn.com/package/%40financial-times/o-header/MIGRATION.md#migrating-from-v10-to-v11) | | 已贬值 | 10个 | 不详 | [迁移到 v10](https://npmcn.com/package/%40financial-times/o-header/MIGRATION.md#migrating-from-v9-to-v10) | | 已贬值 | 第9条 | 不详 | [迁移到 v9](https://npmcn.com/package/%40financial-times/o-header/MIGRATION.md#migrating-from-v8-to-v9) | | 已贬值 | 第8条 | 8.6 请检查date=中的日期值 (帮助) | [迁移到 v8](https://npmcn.com/package/%40financial-times/o-header/MIGRATION.md#migrating-from-v7-to-v8) | | 已贬值 | 第7条 | 7.8 请检查date=中的日期值 (帮助) | [迁移到 v7](https://npmcn.com/package/%40financial-times/o-header/MIGRATION.md#migrating-from-v6-to-v7) | | 已贬值 | 6个 | 6.14 联合国 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-header/MIGRATION.md#migrating-from-v5-to-v6) | | 已贬值 | 页:1 | 5.0 (中文(简体) ) | \- 说吧 | | 已贬值 | 页:1 | 4.0 (韩语) | \- 说吧 | | 已贬值 | 3个 | 3.0 调用 | \- 说吧 | | 已贬值 | 2个 | 2.5 国家 | \- 说吧 | | 已贬值 | 1个 | 1.1 国家 | \- 说吧 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-header/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . * * * ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . ## 常见问题 ### @financial-times/o-header 是什么？ 财政反应 带有初级和二级导航、降下特大菜单和可折叠抽屉的时代页头 ### 如何安装 @financial-times/o-header？ 在项目目录运行 npm install @financial-times/o-header，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/math（^1\.0\.0）、@financial-times/o-brand（^4\.1\.0）、@financial-times/o-forms（^10\.0\.0）、@financial-times/o-utils（^2\.0\.0）、@financial-times/o-toggle（^3\.2\.6）、@financial-times/o-viewport（^5\.1\.2）、@financial-times/o-private-foundation（^1\.0\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @financial-times/o-header 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-header 是否存在。 ### @financial-times/o-header 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-header 可以商用吗？ @financial-times/o-header 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-header 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-header 在 2026/10/15 – 2026/11/13 这 30 天内被下载 3,476 次，日均约 116 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-header 还在维护吗？ 最新版本 15\.5\.2 发布于 2026/07/14（4 个月前）；至今共发布 91 个版本，其中过去 12 个月发布了 6 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。