psammead - 同意 - 班纳 - 
说明
这个 psammead-consent-banner 组件为样式 div 包含关于隐私和饼干政策的信息 该部分还有两种选择,用户可以接受这一政策或被引导到一个网页上,并提供有关数据政策的补充资料.
安装
npm install @bbc/psammead-consent-banner
道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 标题 | 字符串 | 对 | 不详 | We've updated our Privacy and Cookies Policy |
| 文本 | 元素 | 对 | 不详 | <ConsentBannerText script={script}> This is some text</ConsentBannerText> |
| 接受 | 元素 | 对 | 不详 | <button type="button">Accept</button> |
| 拒绝 | 元素 | 对 | 不详 | <a href="https://www.bbc.co.uk/usingthebbc/your-data-matters">Find out what's changed</a> |
| 编号 | 字符串 | 没有 | 无 | ConsentBanner |
| 隐藏 | 嘘 | 没有 | 无 | false |
| 目录 | 字符串 | 没有 | 'ltr' | 一个 'rtl' 'ltr' |
| 脚本 | 脚本 | 对 | 不详 | {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: |
| 服务 | 字符串 | 对 | 不详 | 'news' |
| 注释 | 参考文献 | 没有 | null | useRef(null) |
使用量
此组件的典型用例位于所有页面类型的网页上. 它对新用户来说是可见的.
这个 headingRef 使用道具是为了使同意横幅的标题能够出于无障碍的原因在方案上得到重点。 此校正将指定为 HTML 标题元素, 该标题元素可以使用 DOM API 聚焦 : headingRef.current.focus()。 。 。 .
import { ConsentBanner, ConsentBannerText } from '@bbc/psammead-consent-banner';
import { latin } from '@bbc/gel-foundations/scripts';
const Accept = (
<button onClick={() => {}} type="button">
OK
</button>
);
const Reject = (
<a href="https://www.bbc.co.uk/usingthebbc/your-data-matters">
Find out what's changed
</a>
);
const Text = (
<ConsentBannerText dir="ltr" script={latin} service="news">
This is some text with <a href="https://www.bbc.com/news">a link</a> inside
the consent banner. We have made some important changes to our Privacy and
Cookie Policy.
</ConsentBannerText>
);
const props = {
dir: 'ltr',
title: 'We have updated our Privacy and Cookies Policy',
text: Text,
accept: Accept,
reject: Reject,
id: null,
hidden: false,
script: latin,
service: 'news',
};
<ConsentBanner {...props} />;
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .