# @bbc/psammead-brand 中文文档
规范地址：https://npmcn.com/package/%40bbc/psammead-brand/
版本：7\.3\.18
npm 元数据更新时间：2025-03-06T15:53:23.187Z
中文译文更新时间：2026-11-07T18:54:41.812Z
软件包许可：Apache-2\.0
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40bbc/psammead-brand
原文对照：https://npmcn.com/package/%40bbc/psammead-brand/?lang=original
项目主页：https://github.com/bbc/psammead/blob/latest/packages/components/psammead-brand/README.md
源码仓库：https://github.com/bbc/psammead/tree/latest/packages/components/psammead-brand
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：179 kB，13 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- peer 依赖：react \>=16\.9\.0，@emotion/styled ^11\.0\.0
- 首次发布：2018-12-12T10:29:30.886Z
- 最新版本发布：2022-03-30T12:44:01.064Z
- 近 30 天下载量：7339（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：170（近 12 个月 0 个）
## 中文简介
提供 BBC 新闻标志(作为 SVG),嵌入一个硬码链接 [https://www.bbc.co.uk/news (中文(简体) )](https://www.bbc.co.uk/news)
## 安装
```sh
npm install @bbc/psammead-brand
```
也可以使用：`pnpm add @bbc/psammead-brand`、`yarn add @bbc/psammead-brand`、`bun add @bbc/psammead-brand`
## README
# 沙姆米德品牌(英语: [](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-brand%2Fpackage.json) [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-brand) [](https://david-dm.org/bbc/psammead?path=packages/components/psammead-brand&type=peer) [](https://bbc.github.io/psammead/?path=/story/brand--default) [](https://github.com/bbc/psammead/blob/latest/LICENSE) [](https://www.npmjs.com/package/@bbc/psammead-brand) [](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)
## 说明
这个 `Brand` 组件提供BBC服务标志(作为SVG),嵌入于一个有样式的链接和div. 该链接目前被硬码为"https://www.bbc.co.uk/news".
`Brand` 使用一个 `product`, (中文(简体) ), `svgHeight`, (中文(简体) ), `minWidth`, (中文(简体) ), `maxWidth`, (中文(简体) ), `url`, (中文(简体) ), `serviceLocalisedName`, (中文(简体) ), `backgroundColour`, (中文(简体) ), `logoColour` 财务报告和审定财务报表 `svg` 作为道具.
这个 `product` 转至 [视觉 隐藏文字](https://github.com/bbc/psammead/tree/latest/packages/components/psammead-visually-hidden-text) 组件,嵌入 Brand 内.
这个 `serviceLocalisedName` 是一个可选的道克, 指的是服务 eg 的本地名称 `Yoruba`。它也传递给 [视觉 隐藏文字](https://github.com/bbc/psammead/tree/latest/packages/components/psammead-visually-hidden-text) 在品牌组件中.
这个 `svg` 道具必须包含 `group`, (中文(简体) ), `viewbox` 价值和a `ratio`中,用于 `svg` 键。 实例 `svg` 对象可见于 [@bbc/psammead-资产](https://github.com/bbc/psammead/blob/latest/packages/utilities/psammead-assets/README.md#service-svgs)。 。 。 .
这个 `minWidth` 财务报告和审定财务报表 `maxWidth` 需要数值,以便实现 `svg` 随着取景口变得非常小的EG:功能手机,元素到动态尺度.
这个 `svgHeight` 值充当 `svg` 元素 表示整体横幅高度不会随着动态缩放而变化,同时也是 `height` 允许打开 `svg` 元素在旗帜中始终保持垂直中心.
这个 `backgroundColour` 是背景颜色,并且 `logoColour` 是SVG的颜色和在品牌上徘徊/聚焦时的下划线.
这个 `url` 值是链接,指向与该值相关的服务首页 `svg`。 。 。 .
这个 `scriptLink` 可用于渲染 [脚本链接](https://github.com/bbc/psammead/tree/latest/packages/components/psammead-script-link) 组件,它是与服务变体的链接.
## 出口
`/skip-link` - 使用跳过链接组件帮助键盘用户跳到页面上的主要内容.
## 安装
`npm install @bbc/psammead-brand`
## 道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 产品 | 字符串 | 对 | 不详 | `'BBC News'` |
| svg 宽度 | 数目 | 对 | 不详 | `24` |
| 微风 | 数目 | 对 | 不详 | `240` |
| 最大宽度 | 数目 | 对 | 不详 | `380` |
| 常规 | 对象 | 对 | 不详 | {组 : `()`,收视框:{高:24,宽:167.95},比例:6.9979} |
| 背景颜色 | 字符串 | 对 | 不详 | `${C_POSTBOX}` 或相关的字符串六进制码 |
| 标志颜色 | 字符串 | 对 | 不详 | `${C_WHITE}` 或相关的字符串六进制码 |
| url 密码 | 字符串 | 没有 | 不详 | `https://www.bbc.co.uk/news` |
| 本地化服务Name | 字符串 | 没有 | 不详 | `'Yoruba'` |
| 边框Top | 布尔 | 没有 | `false` | `true` |
| 边框 | 布尔 | 没有 | `false` | `true` |
| 脚本链接 | 节点 | 没有 | `null` | ` Lat ` |
| 跳过链接 | 节点 | 没有 | `null` | ` Skip to content ` |
| 链接ID | 字符串 | 没有 | `null` | `'brandLink'` |
## 使用量
此组件的典型使用大小写在页的顶端 [`header` 元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)。在完成这项工作时,建议将组件包成一个 [`banner` 角色](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_role)不过,a `header` 带有 `banner` 角色只应在一页上出现一次.
使用时 `Brand` 在页眉中,您应确保 `borderBottom` 道具设定为真. 同样,当在脚印上使用品牌时,你应该设置 `borderTop` 真实的。 这保证了当在PC上的高对比度模式下,当用户在FireFox中更改色彩偏好时,该模式的上/下 `Brand` 组件可见.
`ScriptLink` 组件应传递至 `scriptLink` 仅当链接到服务变量时.
```jsx
import Brand from '@bbc/psammead-brand';
import SkipLink from '@bbc/psammead-brand/skip-link';
import { igbo } from '@bbc/psammead-assets/svgs';
import ScriptLink from '@bbc/psammead-script-link';
import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours';
import { latin } from '@bbc/gel-foundations/scripts';
const scriptLink = (
Lat
);
const skipLink = (
Skip to content
);
const Header = (product, serviceName) => (
);
```
### 何时使用此组件
这个 `Brand` 组件被设计用于需要BBC标志作为SVG时. `Brand` 用于 [品牌管理员](https://github.com/bbc/simorgh/tree/latest/src/app/containers/Brand),它使用它传递给 `Brand`。 。 。 .
### 无障碍说明
- 提供可视隐藏文本(例如供屏幕阅读器用户使用)
- `Brand` 是键盘可访问的,并提供徘徊和焦点样式
- 品牌SVG对cs被禁用或高对比模式启用的用户有支持.
### 补充说明
- `width: 100%` 两者都需要 `` 编辑 `