4

我想知道如何在我的 html 项目中使用Material UI 。我想知道我是否可以从材料 UI 的git 页面实现代码

4

3 回答 3

2

根据我从网上了解和阅读的内容，您的问题是不，不幸的是，它主要基于 javascript 及其框架等。你可以，我假设这不是你想要做的，你可以通过插入一个 cdn 然后在另一个脚本标签中编写你的反应代码来将反应合并到你的 html 中。但是，我找到了一个可能的解决方案，即使它不是 Material UI，它也有点接近：

https://getmdl.io/

这是材料设计灯。例如，要创建一个按钮，只需添加 cdn 和样式源：

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

然后像这样添加你的按钮：

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

希望这可以帮助。很抱歉延迟了将近 4 年。

于 2019-04-07T16:24:51.133 回答
0

将样式表复制粘贴到所有其他样式表之前，以加载我们的 CSS。

<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">

我们的许多组件都需要使用 JavaScript 才能运行。具体来说，它们需要 jQuery、Popper.js 和我们自己的 JavaScript 插件。将以下 s 放在页面末尾附近，就在结束标记之前，以启用它们。jQuery 必须先出现，然后是 Popper.js，然后是我们的 JavaScript 插件。

<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/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
于 2021-02-12T22:03:14.317 回答
-4

首先你需要使用 NPM 安装 Material ui

npm 安装

使用 Bower 安装

您还可以使用 Bower 安装和管理 Material Bootstrap

凉亭安装引导材料设计

这是有关如何在 html 中使用材料 ui 的说明链接

https://fezvrasta.github.io/bootstrap-material-design/#getting-started

您将需要添加 material.css 和ipple.css 文件

对于js文件material.js material.min.js和ripples.min.js

于 2015-09-11T12:32:41.870 回答