沙姆米德品牌(英语: 
说明
这个 Brand 组件提供BBC服务标志(作为SVG),嵌入于一个有样式的链接和div. 该链接目前被硬码为"https://www.bbc.co.uk/news".
Brand 使用一个 product, (中文(简体) ), svgHeight, (中文(简体) ), minWidth, (中文(简体) ), maxWidth, (中文(简体) ), url, (中文(简体) ), serviceLocalisedName, (中文(简体) ), backgroundColour, (中文(简体) ), logoColour 财务报告和审定财务报表 svg 作为道具.
这个 product 转至 视觉 隐藏文字 组件,嵌入 Brand 内.
这个 serviceLocalisedName 是一个可选的道克, 指的是服务 eg 的本地名称 Yoruba。它也传递给 视觉 隐藏文字 在品牌组件中.
这个 svg 道具必须包含 group, (中文(简体) ), viewbox 价值和a ratio中,用于 svg 键。 实例 svg 对象可见于 @bbc/psammead-资产。 。 。 .
这个 minWidth 财务报告和审定财务报表 maxWidth 需要数值,以便实现 svg 随着取景口变得非常小的EG:功能手机,元素到动态尺度.
这个 svgHeight 值充当 svg 元素 表示整体横幅高度不会随着动态缩放而变化,同时也是 height 允许打开 svg 元素在旗帜中始终保持垂直中心.
这个 backgroundColour 是背景颜色,并且 logoColour 是SVG的颜色和在品牌上徘徊/聚焦时的下划线.
这个 url 值是链接,指向与该值相关的服务首页 svg。 。 。 .
这个 scriptLink 可用于渲染 脚本链接 组件,它是与服务变体的链接.
出口
/skip-link - 使用跳过链接组件帮助键盘用户跳到页面上的主要内容.
安装
npm install @bbc/psammead-brand
道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 产品 | 字符串 | 对 | 不详 | 'BBC News' |
| svg 宽度 | 数目 | 对 | 不详 | 24 |
| 微风 | 数目 | 对 | 不详 | 240 |
| 最大宽度 | 数目 | 对 | 不详 | 380 |
| 常规 | 对象 | 对 | 不详 | {组 : (<g fillrule="evenodd"><path d="M84.32" /></g>),收视框:{高:24,宽:167.95},比例:6.9979} |
| 背景颜色 | 字符串 | 对 | 不详 | ${C_POSTBOX} 或相关的字符串六进制码 |
| 标志颜色 | 字符串 | 对 | 不详 | ${C_WHITE} 或相关的字符串六进制码 |
| url 密码 | 字符串 | 没有 | 不详 | https://www.bbc.co.uk/news |
| 本地化服务Name | 字符串 | 没有 | 不详 | 'Yoruba' |
| 边框Top | 布尔 | 没有 | false | true |
| 边框 | 布尔 | 没有 | false | true |
| 脚本链接 | 节点 | 没有 | null | <ScriptLink service='news' script={latin} href='https://www.bbc.com/serbian/lat'> Lat </ScriptLink> |
| 跳过链接 | 节点 | 没有 | null | <SkipLink service='news' script={latin} href='#content'> Skip to content </SkipLink> |
| 链接ID | 字符串 | 没有 | null | 'brandLink' |
使用量
此组件的典型使用大小写在页的顶端 header 元素。在完成这项工作时,建议将组件包成一个 banner 角色不过,a header 带有 banner 角色只应在一页上出现一次.
使用时 Brand 在页眉中,您应确保 borderBottom 道具设定为真. 同样,当在脚印上使用品牌时,你应该设置 borderTop 真实的。 这保证了当在PC上的高对比度模式下,当用户在FireFox中更改色彩偏好时,该模式的上/下 Brand 组件可见.
ScriptLink 组件应传递至 scriptLink 仅当链接到服务变量时.
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 = (
<ScriptLink
service="news"
script={latin}
href="https://www.bbc.com/serbian/lat"
>
Lat
</ScriptLink>
);
const skipLink = (
<SkipLink service="news" script={latin} href="#content">
Skip to content
</SkipLink>
);
const Header = (product, serviceName) => (
<header role="banner">
<Brand
product={product}
serviceLocalisedName={serviceName}
svgHeight={24}
maxWidth={280}
minWidth={180}
svg={igbo}
url="https://www.bbc.co.uk/news"
backgroundColour={backgroundColour}
logoColour={logoColour}
borderBottom
scriptLink={scriptLink}
skipLink={skipLink}
/>
</header>
);
何时使用此组件
这个 Brand 组件被设计用于需要BBC标志作为SVG时. Brand 用于 品牌管理员,它使用它传递给 Brand。 。 。 .
无障碍说明
- 提供可视隐藏文本(例如供屏幕阅读器用户使用)
Brand是键盘可访问的,并提供徘徊和焦点样式- 品牌SVG对cs被禁用或高对比模式启用的用户有支持.
补充说明
width: 100%两者都需要<a>编辑<svg>允许品牌在 Firefox 浏览器上动态缩放
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .