o-标题服务

这个标题是金融时报建造的工具和服务.

• 使用量
• 标记
  • 标题部分
  • 主导航
  • 抽屉的核心经验
  • 降下主导航
  • 二级导航
  • 主题
  • 流血头
• 萨斯
  • 自定义
• Java 脚本
• 移徙指南
• 联系人
• 许可证

使用量

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

标记

一个 o-header-services 标题分为三个主要部分:标题部分 (必须),主导航 (可选)和二次导航 (可选)。每个部分置于 header 元素 :

<header class="o-header-services" data-o-component="o-header-services">
    <!-- Markup specific to the needs of your product. Options detailed below. -->
</header>

标题部分

标题一节是 所需经费 每个标题和标题部分 必须 包括标志和产品标题. 标志默认为 FT 标志—— 如果您没有使用构建服务, 您可以自定义它 oHeaderServices() 混音。 。 。 .

您可以选择包含一个产品标记线来简洁地描述您的产品, 并有额外内容的空间, 如标题的这一节中的“ Sign In” 链接 .

注:如果有"Sign in"选项,它应该与其他FT产品一致,通过向右对齐,并避免"Log in"或"Login"等不同措辞.

举例和标记,见 origami 登记簿中仅标题的标题标题。 。 。 .

主导航

主导航是 选项 增加标题部分。 这对高层次的导航最有用.

这个片头有具体的行为,因为它在较小的取景口尺寸(740px下)会变成抽屉. 它要求在标题节中添加一个额外的元素来支持汉堡扣.

如果您正在使用额外内容( 如“ 签名在” 链接) , 也会被拖入抽屉 。 (这种行为可以通过增加课来压制) .o-header-services__related-content--always-visible(中文(简体) )

举例和标记,见 origami 登记处的主要导航。 。 。 .

抽取器的核心经验

小屏幕用户即使其浏览器没有访问抽屉内容,仍应能够访问 切芥子酱 或 JavaScript 无法装入 。 在此情况下,我们建议你把页底的抽屉内容放在一个页脚上,这个页脚只有在身体有外形时才能看到 .core 课。 在核心体验中,汉堡菜单链接到页面下方的锚.

以下放方式进行主导航

主导航还可以处理下放菜单. 这些菜单被隐藏在它相关的导航项目旁边的按钮后.

下放菜单也会被拉入较小的取景口的抽屉.

举例和标记,见 origami 登记册中下降的主要导航。 。 。 .

如果从上述实例复制标记,则更新下拉导航项目的以下属性:

• aria-label: 在标签中包含您的导航项目的标题, 用于您的下拉按钮 .
• aria-controls: 将下拉按钮链接到 id 会 议 日 程 和 议 程 ul 它所控制的导航列表

以下示例显示了"文档"下放的正确标记: 1

<li data-o-header-services-level="1">
    <a href>Documentation</a
    ><!--
    --><button
        class="o-header-services__drop-down-button"
        aria-controls="documentation-dropdown"
        aria-label="Toggle documentation dropdown menu"
    ></button>
    <ul
        id="documentation-dropdown"
        data-o-header-services-level="2"
        aria-hidden="true"
    >
        <!-- dropdown navigation list items -->
    </ul>
</li>

二次导航

二次导航也是 选项 加上头,但是它与主导航一起更有意义,因为它服务于更复杂的产品.

它包括了导航的两个部分:"祖先"和"孩子". "先祖"一行以面包屑为活口,子孙与先祖相对.

在较小的取景口,它确实 没有 倒入抽屉,但可以滚动.

举例和标记,见 origami 登记处二级导航。 。 。 .

主题

o-header-services 为使用核心品牌的FT.com产品提供B2B或B2C产品. 它们旨在影响标题部分和主导航.

要在标题中添加一个主题,在标题元素中添加相应的类. 例如,对于B2B,将:

+<header class='o-header-services o-header-services--b2b' data-o-component='o-header'>
-<header class='o-header-services' data-o-component='o-header'>
    <!-- Your header markup -->
</header>

举例和标记,见 Origami登记处的B2B和B2C头。 。 。 .

布莱德信头

如果你的应用程序需要一个出血头,你需要添加 o-header-services--bleed 变种到您的标题 .

+<header class='o-header-services o-header-services--bleed' data-o-component='o-header'>
-<header class='o-header-services' data-o-component='o-header'>
    <!-- Your header markup -->
</header>

萨斯

为了输出每一种类型 o-header-services 样式,需要包括以下内容:

@import '@financial-times/o-header-services/main';

@include oHeaderServices();

通过使用一个 $opts 地图。 它接受以下选择:

类型

• 'primary-nav'
• 'secondary-nav'
• 'bleed'
• 'b2b'
• 'b2c'

标志

• 在标题中显示的标志图像 。 画作必须来自红外线 图像集。指定图像集和图像名称为字符串 [imageset]:[image] (例如 ftlogo-v1:origami。 FT 标志的默认值.

抽屉断点

• 把主导航移入抽屉的断点. 我们建议 rem 值或布局大小从 电网 例如"M",默认为中网格大小"M".

要使用标志 没有 fT徽标,该徽标可以通过两种方式之一修改:

• 通过使用从标识图像集( 如 “ origami ” ) 中的标志名称
• 通过在一个完整的url或数据url中传递,在SVG上指向您想要用作标志(例如. 'https://www.example.com/logo.svg') (中文(简体) ). 记住,您也可以通过 图像服务的 URL 构建器,它将优化图像,并为它提供一个URL.

在这个例子中,我们只包括一个 主导航 与 血液修饰器我们选择使用Origami标志 标志图像集。 。 。 .

    @import '@financial-times/o-header-services/main';

    @include oHeaderServices($opts: (
        'types': ('primary-nav', 'bleed');
        'logo': 'origami'
    ));

    // Will output styles for a bleed header with a primary navigation and the Origami logo

自定义

o-header-services 提供自定义选项 whitelabel 商标。 如果你使用这个品牌,你可以修改特定品牌变量,在地图中将其凌驾于 oHeaderServicesCustomize。 。 。 .

$o-brand: whitelabel;
@import '@financial-times/o-header-services/main';

@include oHeaderServicesCustomize(
        (
            'nav-hover-background': hotpink
                // will apply to background colors on hover, where appropriate,,,,
        )
    ) @include oHeaderServices(
        $opts: (
            'types': (
                'primary-nav',
            ),
            'features': (
                'drop-down',
            ),
        )
    );

我们建议定制以下品牌变量:

• 上图
• 顶部背景
• 导航文本
• 导航背景
• 导航边境
• 导航背景
• 导航下行颜色
• 箭头-虹色
• 箭头-虹-上色
• 按钮-上色

此外,下列品牌变量也可自定义:

• 文本覆盖- 颜色
• 抽屉背景
• 抽屉按钮背景
• 抽屉- 文本- 覆盖- 颜色
• 抽屉导航背景
• 一级导航-项目横向绘图

Java 脚本

没有代码会自动运行, 除非你正在使用构建服务 。 您必须构建一个 o-header-services 物体或起火 o.DOMContentLoaded 事件,哪个 o-header-services 听着.

您需要以 JavaScript 的形式公开设置您的标题 o-header-services 已经 没有 为你建造它.

JavaScript负责生成抽屉并允许在二次导航上滚动. 您可通过以下方式实施此规定:

import oHeaderServices from '@financial-times/o-header-services';

oHeaderServices.init();

移徙指南

联系人

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

许可证

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