Material Ui Image
Material Ui Image
Material style image with loading animation
Overview:
The Material UI Image is a component that enhances the loading experience of images by fading them in, following the material design image loading pattern. It is designed to be used with Material-UI 1.0.0-rc.0 or later.
Features:
- Fading Animation: The image fades in with a specified duration of the animation.
- Aspect Ratio: Allows you to specify the aspect ratio of the image.
- Cover: Overrides the image's object fit to cover the container.
- Background Color: You can override the background color of the image.
- Disable Error: Disables the error icon if set to true.
- Disable Spinner: Disables the loading spinner if set to true.
- Disable Transition: Disables the transition if set to true.
- Customization: You can override various inline-styles like image style, icon container style, and root element style.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Material UI
material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- GitHub Pages
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.