活页标签

说明
这个 LiveLabel 组件执行用于活性内容的跨度.
安装
npm install @bbc/psammead-live-label --save
道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 服务 | 字符串 | 对 | 不详 | 'news' |
| 目录 | 字符串 | 没有 | 'ltr' | 'rtl' |
| 隐蔽 | 嘘 | 没有 | false | true |
| 实况文本 | 字符串 | 没有 | 'LIVE' | 'Localised Live' |
| 关闭文本 | 字符串 | 没有 | null | 'Live' |
| 朗语 | 字符串 | 没有 | 'en-GB' | 'en-GB' |
| 儿童 | 节点 | 没有 | null | <span>Headline</span> |
使用量
import LiveLabel from '@bbc/psammead-live-label';
import { Headline, Link } from '@bbc/psammead-story-promo';
import { latin } from '@bbc/gel-foundations/scripts';
<Headline script={latin} service="news">
<Link href="https://www.bbc.co.uk/news">
<LiveLabel service={service} dir={dir} ariaHidden offScreenText="Live">
The headline of the live promo
</LiveLabel>
</Link>
</Headline>;
何时使用此组件
这个 LiveLabel 组件可在 a 内使用 Link 在索引页面中显示Live页面的促销.
无障碍说明
这个 LiveLabel 上方示例显示,此组件被隐藏用于屏幕阅读器,并同时显示隐藏的视觉文本。 这是为了确保屏幕阅读器正确宣布"活"字. 无需用其他语文说明.
这个 ariaHidden 需要道具,因为样式化的组件在服务器渲染时会剥去aria标记.
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .