半导体-媒体-指标 
说明
这个 MediaIndicator 组件提供“ play” 、“ audio” 或“ camera” 图标, 以及可选择的持续时间时间戳, 取决于 type 道具 (英语). 组件默认使“ play” 图标 。 本部分既有提供期限也有不提供期限的选择。 如果不提供,它只会制作剧本、音频或相机图标.
安装
npm install @bbc/psammead-media-indicator
道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 类型 | 字符串 | 没有 | "视频" | "音乐" |
| 脚本 | 对象 | 对 | 不详 | { 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', }, }, } |
| 服务 | 字符串 | 对 | 不详 | 'news' |
| 目录 | 字符串 | 没有 | 'ltr' | 'rtl' |
| 内在 | 布尔 | 没有 | 虚假 | 真实 |
| 儿童 | 节点 | 没有 | 无效 |
支助 type编号
'video''audio''photogallery'
使用量
此组件的典型使用大小写被放在了 promos 内部的图像上,用于在页面上方包含视频资产的文章. 它向用户表示,链接是一个视频,视频的持续时间有多长.
顶级剧情片也可以有相关故事链接 Index Alsos当索引项目也是视频、音频或相机时,应当使用 MediaIndicator 组件通过 isInline 道具 (英语).
import MediaIndicator from '@bbc/psammead-media-indicator';
import { latin } from '@bbc/gel-foundations/scripts';
<MediaIndicator type="audio" script={latin} service="news" />;
使用此组件时,确保您添加相关的间隔.
举个例子.
import styled from '@emotion/styled';
import MediaIndicator from '@bbc/psammead-media-indicator';
import { latin } from '@bbc/gel-foundations/scripts';
const TimeDuration = styled.time`
margin: 0 ${GEL_SPACING_HLF};
`;
<MediaIndicator type="audio" script={latin} service="news">
<TimeDuration datetime="PT2M15S">2:15</TimeDuration>
</MediaIndicator>;
何时使用此组件
这个 MediaIndicator 组件被设计用于一个图像上方,该图像正在链接到一个基于该图像的包含视频、音频或相片的页面。 它告诉用户期望网页上有视频、音频或相片内容,如果适用,需要多长时间.
而且,它被用于Top故事 ropos into Index Alsos 媒体链接.
无障碍说明
此组件标记为 aria-hidden="true",这意味着它应该被屏幕阅读器忽略. 预计媒体 " 舞会 " 将提供有关其内容的详细信息,例如宣传标题中以可视化隐藏文字显示的长度.
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .