Thursday, March 28, 2024
HomejQueryMaterials Design UI Element Library Based mostly On Bootstrap 5/4

Materials Design UI Element Library Based mostly On Bootstrap 5/4


Materials Type is a responsive, fantastically crafted, Materials Design styled UI part library constructed utilizing jQuery library, Bootstrap 4/5 framework, and Materials Icons.

Parts Included:

  • Accordion
  • Alerts
  • Badges
  • Breakcrumb
  • Buttons
  • Playing cards
  • Carousel
  • Shut button
  • Collapse
  • Drawer
  • Dropdowns
  • Floating Motion Button
  • Kind Fields
  • Lists
  • Modal
  • Navbar
  • Pagination
  • Placeholders
  • Popovers
  • Progress Bars
  • Scrollspy
  • Snackbars
  • Spinners
  • Tables
  • Tabs
  • Textual content Subject
  • Toasts
  • Tooltips

Methods to use it:

1. Set up the bundle with NPM.

# NPM
$ npm i @materialstyle/materialstyle --save

2. Import the Materials Type into your venture.

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 mandatory JavaScript and CSS information into the doc. Here’s a starter template reveals the way to create a primary Materials Type web page.

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta title="viewport" content material="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Materials Icons -->
  <hyperlink rel="stylesheet" href="https://fonts.googleapis.com/icon?household=Materials+Icons">
  <!-- Materials Type CSS -->
  <hyperlink rel="stylesheet" href="./dist/css/materialstyle.min.css">
  <title>Materials Type</title>
</head>
<physique>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-sm bg-blue navbar-dark fixed-top auto-hide">
    <a category="navbar-brand" href="javascript:">
      Model
    </a>
  </nav>
  <!-- Root -->
  <part class="m-root">
    <!-- Container -->
    <div class="m-container">
      YOUR CONTENT
    </div>
  </part>
  <!-- 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>
  <!-- Materials Type JS -->
  <script src="./dist/js/materialstyle.min.js"></script>
</physique>
</html>

Extra Previews:

Material Style Popover

Material Style Modal

Material Style Card

Material Style Drawer Nav

Material Style Buttons

Material Style Dropdown

Material Style Snackbar

Material Style Switch

Changelog:

2022-09-09

2022-09-07

  • Updated Bootstrap 5 model

2022-07-25

  • Added Bootstrap 5 model

This superior jQuery plugin is developed by materialstyle. For extra Superior Usages, please examine the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments