我正在用webpack构建一个项目.该项目使用materializecss.当我添加materialize.js到条目文件时,它会抱怨下面的错误
Cannot resolve module 'hammerjs'
当我打开文件时,我可以看到那里的定义,但似乎webpack无法识别它.与knockout-es6中的weakmap相同.我的解决方案是添加对hammer.min.jsin 的引用,resolve.alias但不确定这是否正确.
如何webpack将这些依赖项与相关库捆绑在一起时识别这些依赖项 - 在这种情况下materialize.js?
我需要知道如何在自定义类中添加自己的mdi图标.提供的mdi课程不符合我的期望.
我如何添加它们并像默认一样使用它们
<i class="mdi-image-facebook"></i>
<i class="mdi-image-linkedin"></i>
Run Code Online (Sandbox Code Playgroud)
提前致谢
这是折叠的代码,我使用的是物化CSS。
<ul id="ulcollapse" class="collapsible">
<li id="licollapse" ng-repeat="single in packageNames">
<div class="collapsible-header">{{single.name}}</div>
<div class="collapsible-body"><p>{{single.name}}</p></div>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
在这里,我正在编写我的有角度的js代码,用于从json检索数据并尝试显示上述html代码。
$scope.packageNames = [];
$http.get('data.json').then(function(res){
$scope.packagesData = res.data;
angular.forEach($scope.packagesData.Packages,function(value, key) {
$scope.packageNames.push({name:value.Name,content:value.Content});
});
});
Run Code Online (Sandbox Code Playgroud)
我能够在html代码中显示数据。但是它并没有崩溃。我能够完美地检索json数据,并且html代码中没有语法错误。我仔细检查了一下。请给我一些解决问题的想法。
使用Materilize Icon有两种方法:
<i class="mdi-action-settings"></i><i class="material-icons">settings</i><i class="mdi-action-settings"></i>我理解第一种方法是如何工作的.这适用于css定义如下:
.mdi-action-settings:before {
content: "\e672";
}
Run Code Online (Sandbox Code Playgroud)
现在我的问题是第二种方法是如何<i class="material-icons">settings</i>工作的?
以下是查看Materialise Icons的URL
我开始构建一个用于HR管理的Web应用程序,并考虑将Material Design概念应用于界面.当我搜索时,发现它有很多框架,例如
我想为我的项目选择其中一个材料设计框架.我对这些框架有几个担忧.
通过考虑上述问题,有人可以建议我使用什么作为材料设计框架?
user-interface materialize polymer material-design angular-material
我想知道是否有可能在materialize.css框架中为每个工具提示提供不同的背景颜色?
激活工具提示时,我在检查器中看不到任何其他标记,因此无法使用CSS进行定位.
我有一个使用materializecss的基本选择框.
<select id="type" name="type" required="required" class="validate">
<option value="" disabled="true" selected="selected">Choose your option</option>
<option value="general">General</option>
<option value="tech">Tech</option>
<option value="person">Personnel</option>
<option value="resource">Resourcing</option>
</select>
<label data-error="Select an option">Type of Question</label>
Run Code Online (Sandbox Code Playgroud)
我希望用户在能够提交表单之前选择一个选项.
data-error如果用户没有选择选项,我怎样才能显示标签?
我想使用MaterialiseCSS将导航栏中的悬停bg颜色更改为另一个颜色,默认效果只是使突出显示更暗,我需要将该突出显示更改为另一种颜色,如白色.
当导航栏颜色为黑色时,没有高亮或悬停效果.
我可以改变导航栏颜色的bg,文字颜色但我不能改变背景高亮颜色,任何想法?
先感谢您
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<style>
nav ul li a{
color: orange;
}
</style>
</head>
<body>
<header class="top-nav">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper black blue-text">
<a href="#!" class="brand-logo center">Logo</a>
<ul class="left hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li class="active"><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main></main>
<footer></footer>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我总是得到错误"M未定义"el未定义
如果你打开控制台,你会看到错误
我首先加载jquery.min.js然后加载materialize.min.js .css
然后在下面加载我的script.js.
M不被认可,它应该被认可
为什么?
// init materialize tab
var instance = M.Tabs.init(el, options);
// Or with jQuery
$(document).ready(function(){
$('.tabs').tabs();
});
Run Code Online (Sandbox Code Playgroud)
这是HTML
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
<li class="tab col s3"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div> …Run Code Online (Sandbox Code Playgroud) 我是MaterializeCSS和jQuery的新手,我一生都无法弄清楚为什么以下来源无法在此下拉菜单上使用。我不确定是否与菜单li的设置有关,但是我看到了下拉按钮工作的示例,但是没有下拉菜单的例子。如何使它正常工作的任何见解或清晰性都将很棒。谢谢
HTML:
<nav class="navbar-fixed">
<div class="nav-wrapper" id="nav">
<a href="#" class="brand-logo center">Nav Dropdown Help</a>
<ul class="left hide-on-med-and-down">
<li class="active"><a href="#home">Home</a></li>
<li><a class="dropdown-trigger" data-target="dropdown1" href="#plan">Test<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
<ul id="dropdown1" class="dropdown-content nested">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
链接到演示笔如何操作https://codepen.io/anon/pen/xJXezp