I want to know how I can use Material UI in my html project. I want know whether I can implement code from material UI's git page
3 Answers
From what I have understood and read from the web and your question is that no, unfortunately it is mainly based for javascript and it's frameworks and so on. You could, which I am assuming is not what you would want to do, is you could incorporate react within your html by plugging a cdn then writing your react code in another script tag. But, I have found a possible solution, even though it isn't Material UI, it's somewhat close:
This is material design light. For example, to create a button just add the cdn and style sources:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
Then add your button like so:
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
Hope this helps. Sorry for the almost 4 year delay.
1 Comment
ESI
Does it provide an Autocomplete input?
Copy-paste the stylesheet into your before all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
Comments
First you need to install Material ui using NPM
npm install
Install with Bower
You can also install and manage Material Bootstrap using Bower
bower install bootstrap-material-design
here is link for instruction giving how to use material ui in html
https://fezvrasta.github.io/bootstrap-material-design/#getting-started
you will need to add material.css and ripple.css file
for js file material.js material.min.js and ripples.min.js
1 Comment
Kermit_ice_tea
the op asked for how to include it in his html file... This does not answer the question
materialize.cssin your html