material-ui-image

by TeamWertarbyte

TeamWertarbyte / material-ui-image

Material style image with loading animation

142 Stars 23 Forks Last release: 22 days ago (v3.3.0) MIT License 137 Commits 26 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Material UI Image

JavaScript Style Guide Build Status

Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.

Example

Installation

npm install material-ui-image

Note: This is the version for Material-UI 1.0.0-rc.0 or later. If you are using Material-UI 1.0.0-beta, you should update to the latest version. If you are still using Material-UI 0.x, you can use our legacy version.

Usage

Use this component just like a regular img tag.

import Image from 'material-ui-image'

Material UI Image Properties

|Name |Type |Default |Description |-------------------|------------|------------------------------------------|-------------------------------- |animationDuration |

number
| 3000 | Duration of the fading animation, in milliseconds. |aspectRatio |
float
| (1/1) | Specifies the aspect ratio of the image. |cover |
bool
| false | Override the image's object fit to
cover
|color |
string
| white | 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
. |disableTransition |
bool
| false | Disables the transition if set to
true
. |errorIcon |
node
| | Override the error icon. |iconContainerStyle |
object
| | Override the inline-styles of the container that contains the loading spinner and the error icon. |imageStyle |
object
| { width: 'inherit', height: 'inherit' } | Override the inline-styles of the image. |loading |
node
| | Override the loading component. |onClick |
func
| | Fired when the user clicks on the image happened. |src* |
string
| | Specifies the URL of an image. |style |
object
| | Override the inline-styles of the root element.

* required property

All other props are passed through to the underlying

img
element after the image is loaded.

License

The files included in this repository are licensed under the MIT license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.