(原始内容存档于2013-10-12). psammead-image-places - - 
说明
这个 psammead-image-placeholder 组件有两个占位符。 默认是 div 并有基础-64编码的SVG背景图像来描绘BBC的标志. 该组件接受比例为道具. 在 Psammead 组件库中,图像占位符在 psammead 图形 组件.
替代品是 AMP 支持的占位符,该占位符使用相同的基码- 64 编码的 SVG,但作为多位 amp-img 组件,根据当前屏幕大小加载。 组件与父重合 amp-img 大小和功能既是倒数,又是占位符。 见关于 倒数和占位符。 。 。 .
何时使用此组件
Psammead Image Placeworse被设计为一种临时站入,取而代之的是实际的图像,例如在懒惰地加载的情况下.
安装
npm install @bbc/psammead-image-placeholder
使用量
图像插符
ImagePlaceolders组件预计将包含作为儿童元素的图像.
import ImagePlaceholder from '@bbc/psammead-image-placeholder';
const WrapperComponent = ({
ratio,
}) => (
<ImagePlaceholder ratio={ratio}>
<img src="http://some-image.url">
</ImagePlaceholder>
);
图像平面持有人Amp
ImagePlaceopersAmp 组件预计将被用作一个 amp-img 组件。 资料 amp-img 可在 AMP文档网站
import ImagePlaceholderAmp from '@bbc/psammead-image-placeholder';
const WrapperComponent = () => (
<amp-img
src="http://some-image.url"
width="645px"
height="128px"
>
<ImagePlaceholderAmp />
</amp-img>
);
道具
图像插符
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 比率 | 数量、高度和宽度之比 | 对 | 不详 | 65.625 国家 |
| 暗号 | 布尔、真(暗)或假(正常) | 没有 | 虚假 | 虚假 |
| 前置样式 | 应用额外样式的样式对象 | 没有 | 无效 | {背景:'无'} |
图像平面持有人Amp
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 暗号 | 布尔、真(暗)或假(正常) | 没有 | 虚假 | 虚假 |
无障碍说明
作为一名 div 带有背景图像或作为背景图像 amp-img 因为它的AMP对应,Psammead Image Placewides是一个没有语义意义的演示元素. 因此,它不需要满足颜色对比要求.
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .