# @bbc/psammead-section-label 中文文档

规范地址：https://npmcn.com/package/%40bbc/psammead-section-label/

版本：7\.1\.13
npm 元数据更新时间：2026-04-16T10:54:04.252Z
中文译文更新时间：2026-11-07T18:58:03.762Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bbc/psammead-section-label
原文对照：https://npmcn.com/package/%40bbc/psammead-section-label/?lang=original
项目主页：https://github.com/bbc/psammead/blob/latest/packages/components/psammead-section-label/README.md
源码仓库：https://github.com/bbc/psammead/tree/latest/packages/components/psammead-section-label

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：243 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- peer 依赖：react \>=16\.9\.0，prop-types ^15\.6\.2，@emotion/styled ^11\.0\.0
- 首次发布：2019-05-21T11:40:49.391Z
- 最新版本发布：2022-03-30T12:45:15.133Z
- 近 30 天下载量：4714（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：115（近 12 个月 0 个）

## 中文简介

区域标签的回放样式组件

## 安装

```sh
npm install @bbc/psammead-section-label
```

也可以使用：`pnpm add @bbc/psammead-section-label`、`yarn add @bbc/psammead-section-label`、`bun add @bbc/psammead-section-label`

## README

# 光谱分节标签 - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-section-label%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-section-label%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-section-label)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-section-label) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-section-label)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-section-label&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/section-label--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-section-label.svg)](https://www.npmjs.com/package/@bbc/psammead-section-label) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)

## 说明

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

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

该节的标题应为: _字符串_,将包裹在 `<h2>` 按构成部分(见 [无障碍说明](https://npmcn.com/package/%40bbc/psammead-section-label/#readme-accessibility-notes)) (中文(简体) ).

## 安装

`npm install @bbc/psammead-section-label`

## 道具

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 栏 | 布尔 | 没有 | `true` | `false` |
| 移动潜水器 | 布尔 | 没有 | `true` | `false` |
| 视觉隐藏 | 布尔 | 没有 | `false` | `true` |
| 儿童 | 字符串 | 对 | 不详 | `'Most Read'` |
| 目录 | 字符串 | 没有 | `'ltr'` | `'rtl'` |
| 小时 | 字符串 | 没有 | `null` | `'https://www.bbc/com/igbo/egwuregwu'` |
| 编号 | 字符串 | 没有 | 不详 | `top-stories-id` |
| 标签编号 | 字符串 | 没有 | 不详 | `top-stories-label` |
| 链接文本 | 字符串 | 没有 | `null` | `'See More'` |
| 脚本 | 对象 | 对 | 不详 | {可口:{可口:{可口:{可口:\`28',行高:\`32',}可口:{可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口可口:可口:可口:可口:可口:可口:可口:可口:可口:可口:可口 |
| 服务 | 字符串 | 对 | 不详 | `'news'` |
| 背景颜色 | 字符串 | 没有 | `C_GHOST` | `C_LUNAR` |
| 覆盖标题As | 字符串 | 没有 | `null` | `strong` |

## 使用量

```jsx
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>
);
```

或者,没有水平栏:

```jsx
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`数字 :

```jsx
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` 道具 :

```jsx
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` 必须提供。 如果缺少其中之一,则不会提供链接 .

```jsx
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` 道具 (英语).

```jsx
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` 属性。 见 [实例](https://npmcn.com/package/%40bbc/psammead-section-label/#readme-usage) 见上文.

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

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

## 捐款

Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: [psammead 仓库的根](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)。 。 。 .

### [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)

我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)请稍候再读一下.

### 许可证

萨姆米德 [Apache 2.0 许可](https://github.com/bbc/psammead/blob/latest/LICENSE)。 。 。 .

## 常见问题

### @bbc/psammead-section-label 是什么？

区域标签的回放样式组件

### 如何安装 @bbc/psammead-section-label？

在项目目录运行 npm install @bbc/psammead-section-label，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.9\.0）、prop-types（^15\.6\.2）、@emotion/styled（^11\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bbc/psammead-section-label 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bbc\_\_psammead-section-label 是否存在。

### @bbc/psammead-section-label 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bbc/psammead-section-label 可以商用吗？

@bbc/psammead-section-label 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @bbc/psammead-section-label 的下载量有多少？

根据 npm 官方下载统计，@bbc/psammead-section-label 在 2026/10/08 – 2026/11/06 这 30 天内被下载 4,714 次，日均约 157 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bbc/psammead-section-label 还在维护吗？

最新版本 7\.1\.13 发布于 2022/03/30（4 年前）；至今共发布 115 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/05/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。