标签: materialize

将MaterialiseCSS与Webpack一起使用 - 无法解析模块'hammerjs'

我正在用webpack构建一个项目.该项目使用materializecss.当我添加materialize.js到条目文件时,它会抱怨下面的错误 Cannot resolve module 'hammerjs'

当我打开文件时,我可以看到那里的定义,但似乎webpack无法识别它.与knockout-es6中的weakmap相同.我的解决方案是添加对hammer.min.jsin 的引用,resolve.alias但不确定这是否正确.

如何webpack将这些依赖项与相关库捆绑在一起时识别这些依赖项 - 在这种情况下materialize.js

materialize hammer.js webpack

5
推荐指数
2
解决办法
1万
查看次数

如何使用materializecss自己的材料设计图标?

我需要知道如何在自定义类中添加自己的mdi图标.提供的mdi课程不符合我的期望.

我如何添加它们并像默认一样使用它们

<i class="mdi-image-facebook"></i>
<i class="mdi-image-linkedin"></i>
Run Code Online (Sandbox Code Playgroud)

提前致谢

css materialize material-design

5
推荐指数
1
解决办法
2万
查看次数

尝试显示json数据时,实现崩溃无法正常工作

这是折叠的代码,我使用的是物化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代码中没有语法错误。我仔细检查了一下。请给我一些解决问题的想法。

json materialize angularjs

5
推荐指数
1
解决办法
5883
查看次数

Materialize图标如何工作?

使用Materilize Icon有两种方法:

  1. <i class="mdi-action-settings"></i>
  2. <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

css sass css3 materialize

5
推荐指数
1
解决办法
1747
查看次数

什么是最好的Material Design UI框架

我开始构建一个用于HR管理的Web应用程序,并考虑将Material Design概念应用于界面.当我搜索时,发现它有很多框架,例如

  1. 角度材料
  2. 物质化
  3. 聚合物

我想为我的项目选择其中一个材料设计框架.我对这些框架有几个担忧.

  1. 框架的稳定性和未来可维护性是什么?
  2. 根据我们的新要求和组件定制框架是多么容易
  3. 其他人是否使用该框架
  4. 其中有大部分功能

通过考虑上述问题,有人可以建议我使用什么作为材料设计框架?

user-interface materialize polymer material-design angular-material

5
推荐指数
1
解决办法
1025
查看次数

实现Css工具提示

我想知道是否有可能在materialize.css框架中为每个工具提示提供不同的背景颜色?

激活工具提示时,我在检查器中看不到任何其他标记,因此无法使用CSS进行定位.

css3 materialize

5
推荐指数
3
解决办法
2万
查看次数

如何验证Materialize下拉列表的选择选项?

我有一个使用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如果用户没有选择选项,我怎样才能显示标签?

html materialize

5
推荐指数
3
解决办法
1万
查看次数

无法使用Materialise CSS在导航栏中更改突出显示悬停颜色

我想使用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)

在Jsbin这里:)

css materialize

5
推荐指数
1
解决办法
1万
查看次数

m未定义具体化css

我总是得到错误"M未定义"el未定义

codepen示例

如果你打开控制台,你会看到错误

我首先加载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)

materialize

5
推荐指数
1
解决办法
1万
查看次数

物化CSS导航栏菜单下拉菜单不会低于原点

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

jquery materialize

5
推荐指数
1
解决办法
2445
查看次数