我正在使用物流与流星。我一直在使用meteor add materialize:materialize
命令进行安装。这有效,但我希望能够在编译成css文件之前编辑sass文件(这样我就可以改变原色等等)。到目前为止我所做的是:从http://materializecss.com/getting-started.html#download下载sass源文件并将它们复制到客户端文件夹中。我还添加了一个scss编译器meteor add fourseven:scss
。即使在一个新的流星项目中所有这些都是正确的,我想知道我是否错过了一个关键的实现工具包?我相信我可能只是缺少一些包或库以获得某些功能。
使用下面提到的设置后到目前为止的问题经验:(可能会有更多问题)
问题1:波浪效果不会消失 - 单击按钮后会出现波形,但之后不会清除透明效果。
问题2:元素在表单提交时消失 - 提交表单后,表单输入字段消失,页面上的其他按钮消失。
问题3:无法使用实体图标 - 使用实体图标时,它不会显示或使用不同的图标。如果您想知道图标应该是什么样子,请点击此处:http://materializecss.com/icons.html
设定:
$ meteor create test
$ cd test
$ rm test.html test.css test.js
$ meteor add fourseven:scss
$ mkdir client
copied materialize-src into test/client/
created client/main.html
main.html中:
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<nav class="blue darken-3">
<div class="nav-wrapper">
<a href="#" class="brand-logo center">
Logo
</a>
<!-- EXAMPLE ICONS (in navbar) -->
<ul class="right">
<li><a href="#" class="tooltipped" data-position="bottom" data-delay="1000" data-tooltip="Map"><i class="mdi-social-public"></i></a></li>
<li><a href="#" class="tooltipped" data-position="bottom" data-delay="1000" data-tooltip="List"><i class="mdi-action-view-list"></i></a></li>
<li><a href="#" class="tooltipped" data-position="left" data-delay="1000" data-tooltip="Logout"><i class="mdi-content-clear"></i></a></li>
</ul>
</div>
</nav>
<!-- EXAMPLE FORM -->
<form>
<div class="row">
<div class="input-field">
<input id="email" type="email">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field">
<input id="password" type="password">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<button class="btn-large col s12 blue darken-3 waves-effect waves-light" type="submit" name="">Log In</button>
</div>
</form>
<div class="row center-align">
<a class="btn-flat waves-effect waves-teal">Create Account</a>
</div>
<div class="row center-align">
<a class="btn-flat waves-effect waves-teal">Forgot Password</a>
</div>
</body>
感谢您的帮助!
答案 0 :(得分:3)
我在使用流星的sass源文件时遇到了类似的问题。
发送的链接sokki有一行代码帮助我解决了图标问题 https://github.com/Dogfalo/materialize/issues/1018
解决问题有两个部分。
在您的client / sass / components / _icons-material-design.scss文件中,您需要替换
@each $mdi-icon-name, $mdi-icon-value in $mdi-list-icons {
.#{$mdi-prefix}#{$mdi-icon-name}:before {
content: unicode($mdi-icon-value);
}
}
与
@each $mdi-icon-name, $mdi-icon-value in $mdi-list-icons {
.#{$mdi-prefix}#{$mdi-icon-name}:before {
content: "\"" + $mdi-icon-value + "\"";
}
}
这应该添加你的图标所在的块,但图像不在那里。
将/ font文件夹移动到/ public文件夹,这样就可以使用/ public / font / material-design-icons和/ public / font / roboto
(我刚开始写SO所以请原谅任何编辑问题。)
答案 1 :(得分:1)
您可以加入github上的相关问题:https://github.com/Dogfalo/materialize/issues/1018