标签: material-design-lite
使用MDL动态构建的输入无法正确呈现
我有以下代码,
var loginForm = document.createElement('div');
loginForm.className = 'row';
loginForm.innerHTML = '<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo"><input class="mdl-textfield__input" type="text" id="login" /><label class="mdl-textfield__label" for="login">Username</label></div>';
document.getElementById('page-content').appendChild(loginForm);
问题是,由于javascript函数已经运行,输入未正确设置样式.
有没有人需要调用javascript函数才能使这个工作？我试过MaterialTextfield.prototype.init()但没有改变.
推荐指数
解决办法
查看次数
在MDL中更改抽屉的宽度
我刚刚开始使用Material Design Lite.我想改变抽屉的宽度.
我试过的是这些方面:
.mdl-layout__drawer {
width: 25%;
}
这导致抽屉与内容区域重叠.
我该如何解决这个问题？
推荐指数
解决办法
查看次数
想要在右上角的菜单图标按钮.在Material Design Lite中
我想在右上角移动菜单图标按钮.但它似乎在标题下.我应该添加什么样的属性或属性？
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Right aligned menu below button -->
<button id="demo-menu-lower-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
<a href="#fixed-tab-4" …推荐指数
解决办法
查看次数
Material Design Lite汉堡菜单不以标题为中心
我正在直接从getmdl.io(组件页面)和所有设备(多台PC,浏览器,电话等)上复制代码,汉堡菜单不在标题中居中.我似乎无法隔离css中的菜单图标来重新对齐它.getmdl.io上的所有组件代码都正确显示了汉堡图标.这是一个示例图像.(我没有足够的声誉直接链接到图像.) http://i.imgur.com/e9HiCP5.jpg
这是有问题的代码
推荐指数
解决办法
查看次数
使用MDL进行Chrome自动填充类型="密码"
我目前正在使用谷歌的MDL(Material Design Lite)在我的网站上工作,我有一点问题.
正如你所看到的,星星在好地方,但密码留在这里(他在点击或按键盘后移动)
我的代码非常简单:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" name="mail">
<label class="mdl-textfield__label">Adresse Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="test" class="mdl-textfield__input" type="password" name="password">
<label class="mdl-textfield__label">Password</label>
</div>
代码是通常的和基本的.问题是,在MDL(链接在这里:https://www.getmdl.io/components/index.html#textfields-section)中没有密码类型,所以我总是从以前遇到问题.
我想为我的客户端保留chrome自动填充,因此禁用它不是一个选项.有没有办法改变这个问题？
谢谢 !
html google-chrome css3 material-design material-design-lite
推荐指数
解决办法
查看次数
材料设计精简版-文本字段中的底线与彩色线之间存在细微间隙
我正在尝试使Material Design Lite文本字段正常工作，但有一个问题，即底部彩色线在灰色起始线之间存在3-4 px的细微间隙。我插入页面的任何MDL文本字段示例都得到相同的结果，是什么在本地触发问题？我也在前端上使用react.js。
我在材料设计精简版1.2.1上。
这是一张图片：
这是我的代码：
<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input className="mdl-textfield__input" type="text"/>
<label className="mdl-textfield__label" htmlFor="nameField">
Your name
</label>
</div>
推荐指数
解决办法
查看次数
材料设计精简版 - 更改抽屉图标颜色
我找不到改变抽屉汉堡包图标的方法.让代码进行讨论:
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawer icon color</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
</div>
</body>
</html>
输出
图标似乎随后动态添加,颜色设置为白色:
当我从我的铬控制台改变颜色时,一切都很好.
但是如果我尝试使用css类它不起作用:
.mdl-layout__header .mdl-layout__drawer-button {
color: #000 !important;
}
我的问题
除了通过DOM动态更改颜色或直接搞乱material.min.js,我还有其他解决方案吗？
(没有使用javascript成功更改颜色)
<script type="text/javascript">
document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red";
</script>
谢谢 !♫♪我祝你圣诞快乐♫♪♫
推荐指数
解决办法
查看次数
Material Design Lite 轮播
我正在使用 Angular 4 构建一个 Web 应用程序。在设计方面，我使用的是 Material Design lite。但是，我想使用 MDL 实现一个交互式轮播，它可以给我带来流畅的外观和感觉，并且与我的导航栏配合良好，但我在网络上找不到任何相关文档。可以这样做吗？ mynavbar-mdl
推荐指数
解决办法
查看次数
材质设计精简版（MDL）中的水平和垂直中心卡
我正在尝试将卡垂直或水平居中放置在页面中央。我可以将卡水平居中。但是无法将其垂直居中放置。我没有在MDL中找到任何可以使卡垂直居中的类。
水平居中代码
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
<!-- this is just dummy columns -->
</div>
<div class="mdl-cell mdl-cell--6-col">
<figure >
<div class="mdl-card mdl-shadow--6dp">
<div class="mdl-card__title mdl-color--primary mdl-color-text--white">
<h2 class="mdl-card__title-text ">Sign in</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="login"/>
<label class="mdl-textfield__label" for="login">User Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="password"/>
<label class="mdl-textfield__label" for="password">Password</label>
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
<div class="mdl-grid">
<button class="mdl-cell mdl-cell--12-col mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
Sign in
</button>
</div>
</div>
</div>
</figure> …推荐指数
解决办法
查看次数
在material-design-lite中,这个类"升级"了什么,它是如何设置的？
我正在React应用程序中使用Material-Design-lite实现Material Design.当我在我的顶级组件中使用带有浮动标签的TextField时,它可以工作.但是在顶级组件调用的组件上,它没有.具有浮动标签的TextField然后作为常规输入字段.
我注意到外部TextField获取了一个名为"is-upgraded"的类,但内部TextField没有.
应用结构
app.js
products.js
myTest.js (doesn't work)
myTest.js (works)
App.jsx
export default class App extends React.Component {
render() {
return(
<div>
<Products/>
<MyTest id="products" type="text"/>
</div>
)
}
}
Products.jsx
export default class Products extends React.Component {
render() {
return(
<div>
<List items={this.state.products}/>
<MyTest id="products" type="text"/>
<AddProduct/>
</div>
)
}
}
myTest.jsx
import React from "react";
export default class MyTest extends React.Component {
constructor(props) {
super(props)
}
render() {
return(
<div>
<div className="mdl-textfield
mdl-js-textfield
mdl-textfield--floating-label">
<input
className="mdl-textfield__input"
id={this.props.id} …推荐指数
解决办法
查看次数
标签 统计
html ×4
css ×3
javascript ×3
css3 ×2
frontend ×1
html5 ×1
icons ×1
jquery ×1
material-ui ×1
menu ×1