标签: material-design-lite
重新渲染MDL抽屉菜单使抽屉按钮消失
我正在将MDL集成到React应用程序中.
我刚刚尝试用固定页眉布局(http://www.getmdl.io/components/index.html#layout-section)制作一个组件,并注意到如果我在html中对布局进行硬编码,它就像预期.但是如果我在运行时用JS生成那个html,那么汉堡包图标就会丢失.
我该怎么做才能解决这个问题？
推荐指数
解决办法
查看次数
在电话屏幕大小上隐藏网格单元格
似乎mdl-cell-0-col-phone会做到这一点,但没有运气......任何人都知道<div>在手机屏幕尺寸上查看时隐藏/不显示内部HTML 的最简单方法？
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--0-col-phone">2 (0 phone)</div>
</div>
推荐指数
解决办法
查看次数
使用React.js呈现MDL文本字段时出现问题
我正在使用Google的Material Design Lite Web框架构建一个简单的登录页面,并使用React.js来处理我的UI逻辑.
我遇到了一个非常奇怪的问题:当我在没有React的情况下渲染它时,带有浮动标签的输入文本框完全正常,但在通过React类渲染时不起作用.
我的代码看起来像:
var Login = React.createClass({
render: function(){
return(
<div className="mdl-grid">
<div className="mdl-cell mdl-cell--2-col"></div>
<div className="mdl-cell mdl-cell--8-col">
<form>
<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input className="mdl-textfield__input" type="text" id="sample3" />
<label className="mdl-textfield__label" htmlFor="sample3">Text...</label>
</div>
</form>
</div>
</div>
);
}
});
我已经确定我代替class用className和for用htmlFor.但它不起作用,预期的标签,从不"浮动"意味着它保持在文本框内.
当我复制相同的代码并将其粘贴到HTML中时,它可以正常工作.(Ofcourse我改变className和htmlFor).
可能是什么问题？有帮助吗？这让我疯了.
推荐指数
解决办法
查看次数
Material Design Lite响应式CSS无法在Mobile/Tablets或Chrome DevTools模拟器中运行
在尝试使用Google Material Design Lite的响应功能时,此代码会在调整浏览器窗口大小时按预期隐藏消息,但当我在Chrome DevTools设备模拟器或实际设备上查看我的页面时,它只会显示"桌面"版本.如何修复HTML？
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.indigo-pink.min.css">
</head>
<body>
<div class="mdl-cell--hide-phone mdl-cell--hide-tablet">
You are on a desktop
</div>
<div class="mdl-cell--hide-desktop mdl-cell--hide-tablet">
You are on a phone
</div>
<div class="mdl-cell--hide-desktop mdl-cell--hide-phone">
You are on a tablet
</div>
</body>
</html>
推荐指数
解决办法
查看次数
来自JavaScript的MDL Checkbox复选框
以下是我试图取消/选中MDL复选框的代码和小提琴。取消/检查后，状态/ UI /设计不会更新。尝试过这种SO解决方案，但是没有用。
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" value='0' />
<span class="mdl-checkbox__label">Check Me</span>
</label>
<input type='button' value='check/uncheck' id='btn' />
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" value='0' />
<span class="mdl-checkbox__label">Check Me</span>
</label>
<input type='button' value='check/uncheck' id='btn' />
推荐指数
解决办法
查看次数
带ReactJS的Material Design Lite(导入/需要问题)
我正在尝试使用Google的Material Design Lite和ReactJS.我正在使用MDL库的Spinner Loading和Text Field Component.
但是,当我使用React Router切换路由时,动画不会发生,当我刷新页面时,它工作正常.我想,这可能是因为MDL组件没有升级.然后,我正在尝试使用componentHandler.upgradeDom(),但是Console会抛出错误app.js:27160 Uncaught TypeError: Cannot read property 'upgradeDom' of undefined.
这是代码,
var React = require('react');
var ReactDOM = require('react-dom');
var PropTypes = React.PropTypes;
var MDLite = require('material-design-lite');
var componentHandler = MDLite.componentHandler;
var styles = {
loader: {
marginTop: '70px',
}
}
var Loading = React.createClass({
render: function() {
return (
<div className="mdl-spinner mdl-js-spinner is-active" style={styles.loader}></div>
);
},
componentDidMount: function() {
componentHandler.upgradeDom();
},
});
module.exports = …推荐指数
解决办法
查看次数
MDL：改变不确定进度条的颜色？
如何更改 Material Design Lite 中不确定进度条的颜色？
我希望栏使用我调用时选择的强调色（粉红色）
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
这是当前进度条的行：
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate" style="width: 100%"></div>
我曾尝试将 mdl-color--pink-500 和 mdl-color-text--pink-500 添加到课程中，但无济于事。
推荐指数
解决办法
查看次数
在 scss 中更改 Material Design Lite 的主题颜色
我通过 npm 安装了 Material Design lite 模块，但我想用其他颜色来改变它，最好是用 Material Design Color Pallete 中没有的颜色。
我在这里阅读了GitHub 上的如何操作。
但这对我不起作用，当我尝试更改颜色时，我会看到白色/黑色。
我在我的主要 scss 中有
@import 'colors';
@import '../../../node_modules/material-design-lite/src/material-design-lite'; `
我的 _colors.scss 包含：
$golden: #c6a259;
$brown: #240000;
$color-primary: #c6a259 !default;
$color-primary-dark: #c6a259 !default;
$color-accent: #240000 !default;
$color-primary-contrast: #240000 !default;
$color-accent-contrast: #240000 !default;
您可以在下图中看到的差异（在我更改颜色变量值之前和之后）。
推荐指数
解决办法
查看次数
Material Design Lite动态改变颜色
我正在使用Material Design Lite(getmdl.io)作为我的网络应用程序.我有一个漂浮的文本框label;
我想将文本字段的下划线颜色更改为自定义颜色,而不是我定义为主要颜色的颜色(聚焦文本框时显示的行).
如何通过CSS或Javascript更改此颜色？
编辑:
这是MDL文本字段的实现方式,但是一些JS用于在底部执行动态下划线.
您还可以在此处查看动态示例
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
推荐指数
解决办法
查看次数
使用JQuery动态更改MDL文本字段文本
我正在尝试使用JQuery更改MDL文本字段文本.但是,存在一些问题,首先标签不是动画UP,对于基本文本字段,占位符文本不会消失.其次,如果文本字段被标记为required,在通过JQuery设置它的值之后,该字段保持红色,就像没有放置在那里一样.的jsfiddle
HTML:
<dialog id="adicionar-editar-campista" class="mdl-dialog" style="text-align: center">
<div class="mdl-dialog__content">
<h4>Ficha de Cadastro</h4>
<p style="color: red">Campos em vermelho são obrigatórios.</p>
<form action="#">
<div id="cadastro-numero-ficha" class="mdl-textfield mdl-js-textfield">
<input id="numero-ficha" class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
<label class="mdl-textfield__label" for="numero-ficha">Nº Ficha</label>
<span class="mdl-textfield__error">Apenas numeros!</span>
</div>
<div id="cadastro-nome-ficha" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="nome-ficha" class="mdl-textfield__input" type="text" required>
<label class="mdl-textfield__label" for="nome-ficha">Nome Completo</label>
</div>
</form>
</div>
</dialog>
使用Javascript:
//Do something
$("#numero-ficha").val(value.number);
$("#nome-ficha").val(value.username);
//Do something
推荐指数
解决办法
查看次数