psammead 图形 -

说明

这个 psammead-figure 组件为样式 <figure> 键。 它具有相同的语义意义——它应该被用来包围图像,表格或代码片段.

安装

npm install @bbc/psammead-figure

道具

使用量

以下例子显示: psammead-figure 包装

• psammead-image-places 持有者页:1 <div> 带有背景图像
• psammead 图像,一个 <img>
• 封装页:1 <figcaption>
• 缩写为右页:1 <p>
• 暗影-隐藏文字,隐藏 <span> 仅用于辅助技术

import Caption from '@bbc/psammead-caption';
import Copyright from '@bbc/psammead-copyright';
import Figure from '@bbc/psammead-figure';
import Image from '@bbc/psammead-image';
import ImagePlaceholder from '@bbc/psammead-image-placeholder';
import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';

const Wrapper = ({ alt, captionText, ratio, src, width }) => (
  <Figure>
    <ImagePlaceholder ratio={ratio}>
      <Image alt={alt} src={src} width={width} />
      <Copyright>
        <VisuallyHiddenText>Image copyright, </VisuallyHiddenText>
        {copyrightOwner}
      </Copyright>
    </ImagePlaceholder>
    <Caption>
      <VisuallyHiddenText>Image caption, </VisuallyHiddenText>
      {captionText}
    </Caption>
  </Figure>
);

何时使用此组件

当一个 <figure> 元素,它代表经常有标题的自成一体的内容。 平面图通常会包裹一幅图像.

无障碍说明

这个 psammead-figure 是一个 <figure> 带有相关样式的元素。 当您使用此组件时, 它具有与常态相同的语义意义 图 键.

捐款

Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .

行为守则

我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.

许可证

萨姆米德 Apache 2.0 许可。 。 。 .