Components-cli-jojo-image NPM

#组件 ~

##作者:jojo

组件描述:~

title: Image 图片 nav: title: 移动端组件

path: /components

Image 图片

基本使用:

import React from 'react';
import JoJoImage from './demo/index.tsx';

export default () => <JoJoImage />;

基本使用

配置图片的width宽和height高，以及src路径即可使用。

填充模式

通过mode参数配置填充模式属性 | 说明 | 尝试一下 ----|-----|------ | fill |默认，不保证保持原有的比例，内容拉伸填充整个内容容器。|尝试一下 | |contain|保持原有尺寸比例。内容被缩放。|尝试一下 | |cover|保持原有尺寸比例。但部分内容可能被剪切。|尝试一下 | |none| 保留原有元素内容的长度和宽度，也就是说内容不会被重置。|尝试一下| |scale-down|保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。|尝试一下| |initial|设置为默认值| - | |inherit| 从该元素的父元素继承属性| - |

API

Image 属性

属性	说明	类型	默认值
src	图片地址，强烈建议使用绝对或者网络路径	String	-
mode	裁剪模式，见上方说明	boolean	false
width	宽度，单位任意，如果为数值，则为 px 单位	String or Number	100%
height	高度，单位任意，如果为数值，则为 px 单位	String or Number	auto
shape	图片形状，circle-圆形，square-方形	String	'square'
border-radius	圆角值，单位任意，如果为数值，则为 px 单位	String or Number	0
lazy-load	是否懒加载	Boolean	true
loading-icon	加载中的图标，或者小图片	string or ReactNode	-(暂不支持自定义)
error-icon	加载失败的图标，或者小图片	string or ReactNode	-(暂不支持自定义)
how-loading	是否显示加载中的图标或者自定义	string or ReactNode	true(暂不支持自定义)
fade	是否需要淡入效果	Boolean	true
duration	搭配 fade 参数的过渡时间，单位 ms	String or Number	500
bg-color	背景颜色	String	#f3f4f6

##安装

npm installc omponents-cli-jojo-image 
yarn add components-cli-jojo-image

##示例

@infinitebrahmanuniverse/nolb-components @everything-registry/sub-chunk-1367 @zalastax/nolb-components

0.0.2

4 years ago