闪光- 闪光- 
说明
这个 Bulletin 组件可用于渲染 Radio 或者说 TVBulletin 路过 type。 。 。 .
安装
npm install @bbc/psammead-bulletin --save
道具
公报
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
script | 对象 | 对 | 不详 | { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, } |
service | 字符串 | 对 | 不详 | 'pidgin' |
dir | 字符串 | 没有 | 'ltr' | One of ['rtl', 'ltr'] |
image | 节点 | 没有 | null | <Image src={src} alt={alt} /> |
type | 字符串 | 对 | 不详 | One of ['audio', 'video'] |
ctaText | 字符串 | 对 | 不详 | Watch |
ctaLink | 字符串 | 对 | 不详 | 'http://link.to.resource' |
summary | 字符串 | 没有 | null | 'Bulletin summary' |
headlineText | 字符串 | 对 | 不详 | 'Bulletin headline' |
isLive | 布尔 | 没有 | false | true |
liveText | 字符串 | 没有 | 'Live' | 'Localised Live' |
offScreenText | 字符串 | 对 | 不详 | 'Watch Live' |
lang | 字符串 | 没有 | null | 'en-GB' |
使用量
import Bulletin from '@bbc/psammead-bulletin';
import { Image } from '@bbc/psammead-image';
import { latin } from '@bbc/gel-foundations/scripts';
const WrappingComponent = () => {
const image = <Image src="/image.png" altText="alt text" />;
return (
<Bulletin
script={latin}
service="news"
image={image}
type="video"
ctaLink="/cta"
ctaText="Watch"
summary="This is the summary"
headlineText="This is the headline"
isLive
offScreenText="Watch LIVE"
/>
);
};
何时使用此组件
这个 Bulletin 组件用于链接用户可以播放广播或电视内容的页面.
无障碍说明
此组件使用完整的语义标记 BulletinHeading, (中文(简体) ), BulletinSummary,以及 BulletinHeadingLink,使用 h3, (中文(简体) ), p 财务报告和审定财务报表 a 页:1 其他无障碍因素,如图像替代文本和时间元素作为道具传入,未在此组件中明确设置.
连结在地上 h3 与Voice Over Mac和Safari合作提供更好的支持。 我们使用 faux block link 使整个块可以点击,同时使该块内嵌入的链接也能被点击.
"呼吁行动"从屏幕阅读器中隐藏,以防止标题中重复. 作为道具传递的被隐藏的文字被用在头条前来表示给屏幕阅读器用户的是什么样的内容.
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .