光谱分节标签 -

说明

这个 @bbc/psammead-section-label 软件包导出一个组件 - a section Label.

对于它使用的颜色和字体家族 @bbc/psammead-styles 财务报告和审定财务报表 @bbc/gel-foundations 在样式组件中执行的相距和GEL字型.

该节的标题应为: 字符串,将包裹在 <h2> 按构成部分(见 无障碍说明) (中文(简体) ).

安装

npm install @bbc/psammead-section-label

道具

使用量

import SectionLabel from '@bbc/psammead-section-label';
import { latin } from '@bbc/gel-foundations/scripts';

const WrappingComponent = () => (
  <div aria-labelledby="example-section-label">
    <SectionLabel
      script={latin}
      dir="ltr"
      labelId="example-section-label"
      service="news"
    >
      Example section
    </SectionLabel>
  </div>
);

或者,没有水平栏:

import SectionLabel from '@bbc/psammead-section-label';
import { latin } from '@bbc/gel-foundations/scripts';

const WrappingComponent = () => (
  <div aria-labelledby="example-section-label">
    <SectionLabel
      script={latin}
      dir="ltr"
      bar={false}
      labelId="example-section-label"
      service="news"
    >
      Example section
    </SectionLabel>
  </div>
);

在移动中,此组件将分界线置于标题上方。 通过设置 mobileDivider 向 false数字 :

import SectionLabel from '@bbc/psammead-section-label';
import { latin } from '@bbc/gel-foundations/scripts';

const WrappingComponent = () => (
  <div aria-labelledby="example-section-label">
    <SectionLabel
      script={latin}
      dir="ltr"
      mobileDivider={false}
      labelId="example-section-label"
      service="news"
    >
      Example section
    </SectionLabel>
  </div>
);

您也可以在视觉上隐藏所有断点的分页 visuallyHidden 道具 :

import SectionLabel from '@bbc/psammead-section-label';
import { latin } from '@bbc/gel-foundations/scripts';

const WrappingComponent = () => (
  <div aria-labelledby="example-section-label">
    <SectionLabel
      script={latin}
      dir="ltr"
      visuallyHidden={true}
      labelId="example-section-label"
      service="news"
    >
      Example section
    </SectionLabel>
  </div>
);

您甚至可以使用此组件作为链接( 通常与该部分相关的内容索引): NB. 当这样做时 两者 页:1 href 财务报告和审定财务报表 页:1 linkText 必须提供。 如果缺少其中之一,则不会提供链接 .

import SectionLabel from '@bbc/psammead-section-label';
import { latin } from '@bbc/gel-foundations/scripts';

const WrappingComponent = () => (
  <div aria-labelledby="example-section-label">
    <SectionLabel
      script={latin}
      dir="ltr"
      href="https://www.bbc.com/news/index"
      id="example-section-label"
      linkText="See More"
      service="news"
    >
      Example section
    </SectionLabel>
  </div>
);

您可以覆盖信头( R)h2)到任何符合您的相容性要求的自定义 HTML 元素,取决于您想要在您的页面中用什么用例或语义来描述 overrideHeadingAs 道具 (英语).

import SectionLabel from '@bbc/psammead-section-label';
import { latin } from '@bbc/gel-foundations/scripts';

const WrappingComponent = () => (
  <div aria-labelledby="example-section-label">
    <SectionLabel
      script={latin}
      dir="ltr"
      labelId="example-section-label"
      service="news"
      overrideHeadingAs="strong"
    >
      Example section
    </SectionLabel>
  </div>
);

何时使用此组件

这个组件应该用来表示一个故事组合的开始. 应该 没有 包装故事 promos 或包含除该部分标题( aka' strapline)以外的任何内容 .

无障碍说明

虽然这个组件具有横向规则的外观,但它没有使用 <hr> 标记,因此没有相关的语义意义.

此组件将标题字符串包入一个 <h2> 键。 这个 labelId 道具将应用于 <h2> 作为 id 属性,允许以 aria-labelledby 属性。 见 实例 见上文.

设置 visuallyHidden 道具到真视界隐藏此组件用于所有断点,然而仍然可供屏幕阅读器和其他辅助技术使用.

当提供 href 编辑 linkText,区域标签包含 <a> 链接,即 aria-labelledby 页:1 labelId 说明。 这个 linkText 仅对视觉用户有用,因此标记为 aria-hidden="true" 防止向阅读者发布公告。 这个 aria-hidden="true" 非严格要求 - 设置 aria-labelledby 属性应防止屏幕阅读器读出 linkText然而,它添加了它,让屏幕阅读者和其他开发者清楚地知道 linkText 被屏幕阅读器忽略.

捐款

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

行为守则

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

许可证

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