闪电导航

说明

这个 @bbc/psammead-navigation 软件包是一组两个组件, NavigationUl 财务报告和审定财务报表 NavigationLi它们使用 ul 财务报告和审定财务报表 li 分别是HTML元素. 该包还包括一个汉堡菜单和一个下行导航,对于600px以下的断点可见.

出口

/dropdown - 在600px以下的断点上,添加带有汉堡菜单的下拉导航 /scrollable - 使导航在600px下可滚动.

安装

npm install @bbc/psammead-navigation

道具

导航

导航Ul

导航Li

可滚动导航

Canonical Dropdown (美国)

向下倾斜

滴滴下来的Li

巨型金属按钮

AMP 菜单

导航使用

import React from 'react';
import { ScrollableNavigation } from '@bbc/psammead-navigation/scrollable';
import Navigation, {
  NavigationUl,
  NavigationLi,
} from '@bbc/psammead-navigation';
import { latin } from '@bbc/gel-foundations/scripts';

<Navigation
  brandBackgroundColour='#B80000'
  brandForegroundColour='#FDFDFD'
  brandBorderColour='#EAB3B3'
  brandHighlightColour='#FFFFFF'
>
  <ScrollableNavigation
    brandBackgroundColour='#B80000'
    brandHighlightColour='#FFFFFF'
  >
    <NavigationUl>
      <NavigationLi
        url="/"
        script={latin}
        active
        currentPageText="Current Page"
        service="news"
        brandForegroundColour='#FDFDFD'
        brandBorderColour='#EAB3B3'
        brandHighlightColour='#FFFFFF'
      >
        Home
      </NavigationLi>
      <NavigationLi
        url="/sport"
        script={latin}
        service="news"
        brandForegroundColour='#FDFDFD'
        brandBorderColour='#EAB3B3'
        brandHighlightColour='#FFFFFF'
      >
        {Sport}
      </NavigationLi>
      <NavigationLi
        url="/weather"
        script={latin}
        service="news"
        brandForegroundColour='#FDFDFD'
        brandBorderColour='#EAB3B3'
        brandHighlightColour='#FFFFFF'
      >
        {Weather}
      </NavigationLi>
    </NavigationUl>
  </ScrollableNavigation>
</Navigation>;

降下导航使用

import React from 'react';
import {
  Dropdown,
  DropdownUl,
  DropdownLi,
} from '@bbc/psammead-navigation/dropdown';
import { latin } from '@bbc/gel-foundations/scripts';

<CanonicalDropdown isOpen={isOpen}>
  <DropdownUl>
    <DropdownLi
      script={latin}
      service="news"
      key="Home"
      url="/"
      active
      currentPageText="Current page"
    >
      Home
    </DropdownLi>
    <DropdownLi script={latin} service="news" key="Sport" url="/sport">
      Sport
    </DropdownLi>
  </DropdownUl>
</CanonicalDropdown>

Canonical 菜单按钮使用

import React from 'react';
import { CanonicalMenuButton } from '@bbc/psammead-navigation/dropdown';
import { latin } from '@bbc/gel-foundations/scripts';

<CanonicalMenuButton
  announcedText="Menu"
  isOpen
  dir={dir}
  onClick={() => {
    console.log('Handle onClick action');
  }}
  script={latin}
/>

Amp 菜单按钮使用

import React from 'react';
import { AmpMenuButton } from '@bbc/psammead-navigation/dropdown';
import { latin } from '@bbc/gel-foundations/scripts';

<AmpMenuButton
  announcedText="Menu"
  onToggle="menu.toggleVisibility"
  script={latin}
  dir={dir}
/>

注意: AmpMenuButton 想要正确工作,一个 id 应添加到 Navigation 组件。 这个 id 可以作为道具传递给组件. 同样, ScrollableNavigation 还要求 id 将被加入其中.

何时使用此组件

这个 Navigation 它旨在显示所有页面上的导航栏,它将显示一个站点上的所有部分。 如果一行有太多的项目适合,则项目会被包到下一行.

另一方面,与 ScrollableNavigation 我们可以把清单放在一条线上, 横向滚动, 允许访问更多链接, 低于600px.

无障碍说明

导航系统有一个 navigation 标志 以提供一种方法来识别用于导航的链接.

我们增加了这个角色 list 财务报告和审定财务报表 listitem 页:1 NavigationUl 财务报告和审定财务报表 NavigationList ,分别由于一个语音Overbug来恢复列表语义.

我们还增加了可视化隐藏文本,让用户知道在正则和下行导航中哪个项目是当前页面. 注意此处使用可视化隐藏文本是因为此时缺乏对aria-current页面属性的支持. 也注意到使用 role="text" 停止在Voice Over中分割文本.

我们增加了一个 aria-expanded 属性到菜单按钮,以指示菜单是崩溃还是扩展.

捐款

Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .

行为守则

我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.

许可证

萨姆米德 Apache 2.0 许可。 。 。 .