头部

FT品牌网站响应头. 见 折纸导航服务 要填充 o-header 以真实导航数据标记.

• 使用量
• 标记
• Java 脚本
• 萨斯
• 浏览器支持
• 移徙指南
• 联系人
• 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-header。 。 。 .

标记

由于标题有不同之处,而且每个标题的加分都具体和比较广泛,我们建议访问 组件页 在故事书中找到最适合你的产品的标记。 组件页面上的演示不会使用真实的导航数据,因为它可能会过时. 见 折纸导航服务 要填充 o-header 以真实导航数据标记。 Origami导航服务是一个JSON API,它提供导航结构,供跨FT网站使用.

我们无意在客户端这么做 故意在输入和输出之间不设课 这个留给产品处理.

信头内部的一些元素需要特定的数据属性,所以JavaScript可以正确添加一些行为. 它们是:

• data-o-header-no-js:应用于根元素. 当 JavaScript 通知时此数据属性被删除
• 数据-o-header-sticky:应用于标题的粘性变异
• 数据-o-header-mega:应用于根 <div> 大菜单
• 数据-o-header-搜索:应用于根 <div> 会 议 日 程 和 议 程 增强 搜索行。 有两个搜索行,一个用于增强,另一个用于核心
• 数据-o-header-绘图器:应用于根 <div> 抽屉
• data-o-header-subnav: 应用到根上 div 子导航菜单
• 数据-o-header-subnav-wrapper: 应用到内包装器 div 让JS能处理滚动
• data-o-header-search-state:可选,可以是"打开"或"关闭"来表示搜索栏的默认能见度.

子导航头可以使用modifer类 o-header__subnav--primary 实现符合主导航的样式,其中项目链接为粗体并大写,背景颜色为 paper。 。 。 .

Java 脚本

必须为每个 <header> 您的页面中含有使用此组件的内容.

import oHeader from '@financial-times/o-header';
const headerEl = document.querySelector('.o-header');
const header = new oHeader(headerEl);

O-header 构建器接受一个可选选项对象,用于控制某些行为:

• searchState:可能是"打开"或"关闭",以确定信头的搜索栏是否立即可见. 默认情况下,搜索栏会被隐藏.

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" 属性 :

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,你会打电话:

@include oHeader(('sticky', 'simple', 'anon', 'search', 'nav', 'megamenu'));

浏览器支持

用于 o-header 设置一个 核心和增强的经验 在你的项目. o-header 取决于 o--if-js 财务报告和审定财务报表 o--if-no-js 课程.

移徙指南

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .