• Stars
    star
    214
  • Rank 184,643 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Material style image with loading animation

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'

<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.

More Repositories

1

material-ui-chip-input

A chip input field using Material-UI.
JavaScript
739
star
2

material-auto-rotating-carousel

Introduce users to your app with this Material-style carousel.
JavaScript
431
star
3

mdi-material-ui

Material-UI SvgIcon components for Material Design Icons.
JavaScript
328
star
4

material-ui-search-bar

Material design search bar
JavaScript
260
star
5

material-ui-time-picker

A time picker for Material-UI.
JavaScript
127
star
6

material-ui-rating

Rate something with style.
JavaScript
88
star
7

material-ui-snackbar-provider

A convenient way to use material-ui's snackbars.
JavaScript
81
star
8

material-ui-password-field

A password field using Material-UI.
JavaScript
58
star
9

material-ui-fullscreen-dialog

A fullscreen dialog for Material-UI.
JavaScript
58
star
10

electron-react-material-ui

Quick boilerplate for an electron react app with material ui
JavaScript
37
star
11

material-ui-toggle-icon

An animated toggle icon for Material-UI.
JavaScript
35
star
12

crypto-trading-bot

A trading bot that does what you order him to do (use at your own risk)
TypeScript
30
star
13

material-ui-bottom-sheet

Bottom sheets slide up from the bottom of the screen to reveal more content.
JavaScript
29
star
14

codify

TypeScript
17
star
15

material-ui-feature-discovery-prompt

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.
JavaScript
17
star
16

material-ui-settings-panel

A settings component in material ui style inspired by google admin console and google inbox.
JavaScript
16
star
17

material-ui-dots

Just some animated dots for pagination.
JavaScript
14
star
18

material-ui-file-dropzone

File selection components with drag'n'drop support for Material-UI.
JavaScript
11
star
19

react-hero-animation

A small react library for hero animations.
JavaScript
8
star
20

react-props-md-table

A markdown table generator for React component props.
JavaScript
6
star
21

material-ui-share

Material design web share component
JavaScript
5
star
22

materialdesign-webfont-material-ui

FontIcon components for Material Design Icons font icons.
JavaScript
4
star
23

mctext-react

A React component to display Minecraft-formatted text.
JavaScript
4
star
24

mui-styleguidist-wrapper

A wrapper of react-styleguidist for Material-UI components.
JavaScript
3
star
25

soundcloud-searcher

Search soundcloud tracks by name. Filter by genre
JavaScript
2
star
26

module-loader

High Cohesion, Loose Coupling with ease
JavaScript
2
star
27

McTextBlock

A WPF component for rendering Minecraft formatted text.
C#
1
star