标签: materialize
Material Design 图标不适用于 IE 11
我在我的应用程序上使用MaterialDesign图标，但是它不适用于 IE 11（版本 11.576.14393.0）。
在我的 HTML 代码中，我有以下元素：
<i class="material-icons"></i>
不过，我也尝试了正常的图标名称，例如：
<i class="material-icons">account_circle</i>
它可以在其他浏览器上运行，所有 .css 功能都来自我在 Material Design 页面上获得的样板文件。
我的页面上什么也没有出现。
我尝试设置以下样式：
text-rendering: optimizeLegibility;
font-feature-settings: 'liga';
ms-font-feature-settings:'liga'
然而，什么都不起作用。
推荐指数
解决办法
查看次数
如何离线托管 Material Design 图标？
我想为我的离线 Web 开发项目离线托管 Material Icons（我部署的计算机上没有互联网）。从我的谷歌搜索中，我找到了这个答案。但这对我不起作用。我的问题是如何让它发挥作用。如何为我的离线项目离线托管材料设计图标？
我已在此处附加了 SSCCE 项目的 .zip 文件，该文件重现了该问题。
基本上我从这里下载了MaterialIcons-Regular.eot、MaterialIcons-Regular.ttf、MaterialIcons-Regular.woff和MaterialIcons-Regular.woff2将它们放在我的项目目录中。
这是我的索引文件：
<!DOCTYPE html>
<html>
<head>
<title>MaterializeTest</title>
<link rel="stylesheet" href="material-fonts.css" />
<link type="text/css" rel="stylesheet" href="materialize.min.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1"/>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<a href="#!"><i class="material-icons">chevron_left</i></a>
</body>
</html>
这是 CSS 文件。
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'), …推荐指数
解决办法
查看次数
如何在materializecss中更改颜色主题
我已经创建了 nodejs 项目。这是package.json
{
"name": "materializecssdemo",
"version": "1.0.0",
"description": "Use of material design components",
"main": "index.js",
"scripts": {
"prestart": "node-sass ./scss/theme.scss ./css/materialize-theme.css",
"start": "lite-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Sunil Kumar",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.3.0"
},
"dependencies": {
"materialize-css": "^0.100.2",
"node-sass": "^4.7.2"
}
}
我只想将我的应用程序的颜色从默认颜色更改为蓝色。所以我创建了theme.scss文件并使用node-sass模块尝试生成 CSS 文件。这是我的theme.scss
$primary-color: color("blue", "lighten-2") !default;
@import "../node_modules/materialize-css/sass/materialize";
但这是显示
{
"status": 1,
"file": "D:/SK/Study/MaterializeCSSDemo/node_modules/materialize-css/sass/components/_variables.scss",
"line": 39,
"column": 23,
"message": "argument `$color` …推荐指数
解决办法
查看次数
如何在 Materialise 卡操作中右对齐按钮
我正在使用 Materialise，我需要在卡片操作中将按钮与卡片的右侧对齐。
这是代码：
<div class="card-action">
<a href="#" class="right">This is a link</a>
</div>
这是结果：
如果我删除class="right"然后我得到这个结果：
我想要第二张图像的结果，但按钮应向右对齐。我是否遗漏了有关实体化卡牌行动的一些内容？我应该如何获得这种行为？
推荐指数
解决办法
查看次数
在Materialise CSS中使用文本覆盖图像
我尝试了多种方法用文本覆盖背景图像,但无济于事.materializeCSS网站上提供的模板涉及视差,我不想要.
目的是让一张"卡片"位于横跨浏览器窗口的大图像上方.我实际上的目的是分别为几张卡片做这件事.
这是我的代码(针对特定卡片):
<div class="row center">
<div class="col s12 l6 offset-l6">
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
</div>
</div>
</div>
</div>
我知道图片标签是:
<img src="URL">
但无论我把它放在哪里,它都不会在卡片后面放置图像.我已经尝试了所有明显的东西,比如添加一个新的div类,但也许我添加了错误的类.真的在这个问题上绞尽脑汁.
如何在卡片后面放置图像(跨越浏览器的宽度和高度约700像素)？
推荐指数
解决办法
查看次数
使用materializecss和aurelia
我想询问是否有一步一步的方法来使用或配置与Aurelia的materializecss.我目前能够运行我的Aurelia应用程序,直到我的index.html看起来像这样的教程:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="jspm_packages/github/dogfalo/materialize@0.97.0/dist/css/materialize.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title></title>
</head>
<body aurelia-app>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
我目前正在使用ASP .NET 5 Preview空模板和jspm来安装Aurelia.我已经安装了materializecss jspm install github:dogfalo/materialize并从这个链接复制了一些HTML代码来测试它是否有效.
这段代码进入了我的app.html文件
<template>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>
</template>
而我的app.html文件有这个测试
export …推荐指数
解决办法
查看次数
MaterialiseCSS - 如何关闭移动菜单
我使用框架CSS Materialize,但我有一个问题.点击链接后,如何关闭左侧移动菜单？默认情况下,只有在菜单外单击时菜单才会关闭.所以我尝试使用函数removeMenu()但它不起作用.有人有解决方案吗？这是我的菜单:
<div class="navbar-fixed">
<nav class="orange darken-4" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo"><img id="class" src="img/logo.png" class="nav_logo"></a>
<ul class="right hide-on-med-and-down">
<li><a>test</a></li>
<li ><a>test2</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a>test</a></li>
<li><a>test2</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse" id="burger_menu"><i class="material-icons">menu</i></a>
</div>
</nav>
</div>
推荐指数
解决办法
查看次数
材料设计图标,如何将它们作为文本居中？
我一直在尝试使用带有3个链接的MaterialiseCSS进行某种导航,每个链接的宽度为33%,我希望将文本置于链接中心(甚至是图标)
如果我没有放左或右类,文本和图标不会保持在同一行...但是如果我把左类放到图标然后它浮动到左边,因此假设导航栏是宽度:100%,图标和文字之间的空间太大.
这是HTML
<div id="secondary-navbar"><nav>
<div class="nav-wrapper">
<ul>
<li>
<a href="#!">
<i class="material-icons left">event</i>Calendario
</a>
</li>
<li>
<a href="#!">
<i class="material-icons left">location_on</i>Mapa
</a>
</li>
<li>
<a href="#!">
<i class="material-icons left">apps</i>Galería
</a>
</li>
</ul>
</div>
</nav></div>
和CSS
#secondary-navbar nav
{
background:#ffffff;
}
#secondary-navbar nav .nav-wrapper ul li a
{
font-size:1.2em;
}
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
font-size:1.2em;
margin-right:0.2em;
}
#secondary-navbar nav .nav-wrapper ul li a,
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
color:#06207d;
}
#secondary-navbar nav .nav-wrapper …推荐指数
解决办法
查看次数
Materialize模态覆盖整个页面(模态弹出窗口未被带到前台)
由于机密原因,我无法上传我的网页用户界面的屏幕截图.
Materialize模态应该像这里一样,但不幸的是,我网上发生的事情是整个页面包括模态是"黑暗背景"的一部分.模态应该叠加在背景的顶部(变暗),模态应该是一个活动页面.我的模态的z-index是1003(默认值).
在UI方面,无论我点击什么都会关闭模态甚至是模态中的按钮(实际上我甚至无法点击按钮,因为它们都是深色背景的一部分).知道这里可能会发生什么吗？
这是我的代码供参考:
<button data-target="modal1" class="btn waves-effect waves-light modal-trigger" type="submit">Save
<i class="material-icons right">send</i>
<!-- Modal Structure -->
</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat" name="action">Submit</a>
{{ form.submit }}
</div>
</div>
(我希望模态是表单提交确认,但这里忽略了详细信息.)
推荐指数
解决办法
查看次数
打开卡片显示内容,将激活器悬停在materializecss中
我尝试通过鼠标悬停激活器内容以几种不同的方式打开卡片显示内容,但它们都没有工作.以下是我在下面的代码段中的代码的工作示例.
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="https://s19.postimg.org/rs95dw3b7/beautiful-flower-pictures-and-wallpapers-2.jpg">
</div>
<!-- card text content -->
<div class="card-content">
<span class="card-title activator">
<p>Name of the listing</p>
</span>
<p>$10.00</p>
<div class="card-content">
<a href="#" class="waves-effect waves-light btn right bottom">view item</a>
</div>
</div>
<!-- card reveal content -->
<div class="card-reveal">
<span class="card-title">
<i class="fa fa-times right"></i>
<div>Name</div>
</span>
<p>this is the data in the card reveal content</p>
<div>
<a href="#" class="waves-effect …推荐指数
解决办法
查看次数
标签 统计
materialize ×10
css ×6
html ×4
jquery ×3
javascript ×2
aurelia ×1
css3 ×1
google-fonts ×1
html5 ×1
icons ×1
node.js ×1