TeamWertarbyte / Material Ui Image
Licence: mit
Material style image with loading animation
Stars: ✭ 178
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Material Ui Image
React Image
React.js <img> tag rendering with multiple fallback & loader support
Stars: ✭ 917 (+415.17%)
Mutual labels: image, loader
Imaginary
🦄 Remote images, as easy as one, two, three.
Stars: ✭ 557 (+212.92%)
Mutual labels: image, loader
Tensorflow input image by tfrecord
Feed your own image data to a pre-trained network by tensorflow
Stars: ✭ 166 (-6.74%)
Mutual labels: image
React Native Loading Placeholder
React Native Loading Placeholder
Stars: ✭ 176 (-1.12%)
Mutual labels: loader
Http Loader
A loader for ngx-translate that loads translations with http calls
Stars: ✭ 170 (-4.49%)
Mutual labels: loader
Mediapy
This Python library makes it easy to display images and videos in a notebook.
Stars: ✭ 128 (-28.09%)
Mutual labels: image
Loader
Pure css loading animations. As long as only one element!
Stars: ✭ 174 (-2.25%)
Mutual labels: loader
Webpack Config Handbook
Minimum Webpack config handbook & examples
Stars: ✭ 165 (-7.3%)
Mutual labels: loader
Media Watermark
GPU/CPU-based iOS Watermark Library for Image and Video Overlay
Stars: ✭ 170 (-4.49%)
Mutual labels: image
React Hot Loader Loader
A Webpack Loader that automatically inserts react-hot-loader to your App 👨🔬
Stars: ✭ 176 (-1.12%)
Mutual labels: loader
Material floating search bar
A Flutter implementation of an expandable and animated floating search bar, also known as persistent search.
Stars: ✭ 169 (-5.06%)
Mutual labels: material-ui
Materialnavigationview Android
📱 Android Library to implement Rich, Beautiful, Stylish 😍 Material Navigation View for your project with Material Design Guidelines. Easy to use.
Stars: ✭ 168 (-5.62%)
Mutual labels: material-ui
Sinn
a blog based on of react,webpack3,dva,redux,material-ui,fetch,generator,markdown,nodejs,koa2,mongoose,docker,shell,and async/await 基于react+koa2技术栈的个人开源博客系统
Stars: ✭ 175 (-1.69%)
Mutual labels: material-ui
Croperino
📷 A simple image cropping tool that provides gallery or camera help for Native Android (Java)
Stars: ✭ 176 (-1.12%)
Mutual labels: image
Slidingsquareloaderview
Marvelous sliding square loader view
Stars: ✭ 166 (-6.74%)
Mutual labels: loader
React Native Image Marker
Add text or icon watermark to your images
Stars: ✭ 170 (-4.49%)
Mutual labels: image
React Ui Roundup
A one-stop-shop for comparing the features of all the best React frameworks. Useful for designers and engineers alike!
Stars: ✭ 177 (-0.56%)
Mutual labels: material-ui
Material UI Image
Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
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'
<Image
src="http://loremflickr.com/300/200"
/>
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].