psammead-inline-link - 页面存档备份,存于互联网档案馆 
说明
这个 @bbc/psammead-inline-link 软件包导出一个单一的Inline Link组件。 它使用一个 a HTML 元素和颜色来自 @bbc/psammead-styles。 。 。 .
安装
npm install @bbc/psammead-inline-link
道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 小时 | 字符串 | 对 | 不详 | www.bbc.co.uk |
使用量
import InlineLink from '@bbc/psammead-inline-link';
const WrappingComponent = () => (
<InlineLink href="https://www.bbc.com/news">Text here</InlineLink>
);
我们没有将任何打字风格列入这一部分。 因此,它可以在多种情况下重复使用。 例如,你可以使用 InlineLink 在我们现有的 psammead-paragraph 复制和复制 psammead-headings 标题和分标题h1s 和 h2页:1.
段落中的示例内含链接:
import InlineLink from '@bbc/psammead-inline-link';
import Paragraph from '@bbc/psammead-paragraph';
const WrapperComponent = () => (
<Paragraph>I am a paragraph that has a link to <InlineLink href="https://www.bbc.com/news">the BBC News front page</InlineLink>.<Paragraph>
);
标题或子标题中的示例内置链接 :
import InlineLink from '@bbc/psammead-inline-link';
import { Headline, SubHeading } from '@bbc/psammead-headings';
const HeadlineWithALink = () => (
<InlineLink href="https://www.bbc.com/news"><Headline>Headline</Headline></InlineLink>
const SubHeadingWithALink = () => (
<InlineLink href="https://www.bbc.com/news"><SubHeading>SubHeading</SubHeading></InlineLink>
);
或者,如果想要与其他 GEL 类型学组一起扩展现有的样式,您可以做以下工作:
import InlineLink from '@bbc/psammead-inline-link';
import { GEL_PARAGON } from '@bbc/gel-foundations';
const GelParagonLink = styled(InlineLink)`
${GEL_PARAGON};
`;
const WrapperComponent = () => (
<GelParagonLink href="https://www.bbc.com/news">
Link with GEL Paragon typography
</GelParagonLink>
);
何时使用此组件
此组件可以在页面的任意点使用.
无障碍说明
因为这只是一个 <a> 标记带有相关样式,当您使用此组件时,它具有与正则锚定元素相同的语义意义.
每个悬浮/聚焦/访问/默认状态的字体和背景-颜色选择符合WCAG AA颜色对比准则. 另外,边框宽度在徘徊和聚焦上会增加,而这种变化不取决于高相位模式的颜色,而往往会超越颜色/风格.
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .