1.4.1 • Published 7 years ago
@logicline/material-ui-image v1.4.1
Material UI Image
Images are ugly until they're loaded. Materialize it with material image! It will show a random material color as background and a loading animation until it's fully loaded.
See this component in action
This package is customized to use the scoped @logicline/material-ui package. Everything stayed the same.
The original package is available from npm via material-ui-image.
Installation
npm i --save @logicline/material-ui-imageUsage
Use this component just like a regular img tag.
import Image from '@logicline/material-ui-image'
// ...
render() {
return (
<div>
<Image
src="http://loremflickr.com/300/200"
/>
</div>
)
}Material UI Image Properties
| Name | Type | Default | Description |
|---|---|---|---|
| src* | string | Specifies the URL of an image. | |
| color | string | random color | Override the background color. |
| disableError | bool | false | Disables the error icon if set to true. |
| disableSpinner | bool | false | Disables the loading spinner if set to true. |
| errorSize | integer | 48 | Set the size of the error icon. |
| imageStyle | object | { width: 'inherit', height: 'inherit' } | Override the inline-styles of the image. |
| loadingSize | integer | 40 | Set the size of the refresh indicator. |
| loadingStyle | object | { position: 'relative' } | Override the inline-styles of the refresh indicator. |
| onTouchTap | func | Fired when the user clicks on the image happened. | |
| style | object | { width: 300, height: 200 } | Override the inline-styles of the root element. |
* required property
License
The files included in this repository are licensed under the MIT license.
1.4.1
7 years ago