Material Design UI Component Library Based On Bootstrap 4

File Size: | 181 KB |
---|---|
Views Total: | 271 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Material Style is a responsive, beautifully crafted, Material Design styled UI component library built using jQuery library, Bootstrap 4 framework, and Material Icons.
Components Included:
- Alert
- Button
- Card
- Checkbox
- Drawer
- Floating Action Button
- Image List
- List
- Modal
- Navbar
- Popover
- Progress Bar
- Range Slider
- Radio
- Select Field
- Shape
- Snackbar
- Spinner
- Switch
- Tab
- Text Field
- Toast
How to use it:
1. Install the package with NPM.
# NPM $ npm i @materialstyle/materialstyle --save
2. Import the Material Style into your project.
import '@materialstyle/materialstyle'; // or import '@materialstyle/materialstyle/js/dist/util'; import '@materialstyle/materialstyle/js/dist/alert'; @import '@materialstyle/materialstyle/dist/css/materialstyle.min.css';
3. Or load the necessary JavaScript and CSS files into the document. Here is a starter template shows how to create a basic Material Style page.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Material Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- Material Style CSS --> <link rel="stylesheet" href="./dist/css/materialstyle.min.css"> <title>Material Style</title> </head> <body> <!-- Navbar --> <nav class="navbar navbar-expand-sm bg-blue navbar-dark fixed-top auto-hide"> <a class="navbar-brand" href="javascript:"> Brand </a> </nav> <!-- Root --> <section class="m-root"> <!-- Container --> <div class="m-container"> YOUR CONTENT </div> </section> <!-- Footer --> <footer class="bg-dark text-white"> Footer </footer> <!-- jQuery --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- Popper JS --> <script src="/path/to/cdn/popper.min.js"></script> <!-- Material Style JS --> <script src="./dist/js/materialstyle.min.js"></script> </body> </html>
More Previews:
This awesome jQuery plugin is developed by materialstyle. For more Advanced Usages, please check the demo page or visit the official website.