问题：
是否有 SASS 函数/技术可以将十六进制值转换为简单的RGB 字符串。
rgb() 这里简单意味着只是一个字符串而不用?括起来。
例如：#D50000 --> "213,0,0"
为什么我需要这个：
我使用Material Design Lite作为我的 UI“框架”。更具体地说，我使用的是 SASS 版本，因此我可以根据应用程序的样式指南调整颜色变量。
由于某种原因，MDL 中的颜色变量_variables.scss采用以下格式进行颜色定义：
$color-primary: "0,0,0" !default; // supposed to be black
这真的非常非常奇怪。我最多期望的是类似的事情
$color-primary: rgba(0,0,0,1) !default;
我的颜色变量存储在另一个名为 的文件中，_globals.scss我在其中以常规十六进制格式存储变量，以便我可以轻松地在其他地方重用它们：
$brand-primary: #FA3166;
$brand-primary-dark: #E02C59;
我不想定义两倍的颜色（1 个十六进制和 1 个 MDL 兼容的 RGB 字符串），因此我需要将十六进制转换为 RGB 字符串。
我正在尝试使用Google MDL文档中的固定标签示例.这是我的代码:
码
<!-- 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>
<!-- 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>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" …所以我想让卡看起来与它在材料设计规范中应该完成的方式相同
我已经设法在一个简单的红色方块上使用jquery(参见第一个片段)我只需要给出所需的元素0高度和宽度,然后使用jquery为高度和宽度设置动画到我想要的大小.
任何MDL卡的问题是,我无法获得小于200的任何高度.您可以查看我的第二个片段,看看当我尝试将其设置为150px时会发生什么.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="Box"></p>
<button id="Start">Start</button>
<button id="Reset">Reset</button>
<script>
$(document).ready(function() {
$("#Start").click(function(){
$('#Box').animate({height: "150px", width: "150px"},{duration: 1000});
});
$("#Reset").click(function(){
$('#Box').animate({height: "0px", width: "0px"},{duration: 1000});
});
});
</script>
<style>
#Box{
width: 0px;
height: 0px;
background-color: red;
box-shadow: -3px 1px 30px 0px rgba(50,50,50,0.25);
}
</style>
</body>
</html>$(document).ready(function(){
$('.mdl-card').animate({height: "150px", width: "0px"},{duration: 1000});
$("#Start").click(function(){
$('.mdl-card').animate({height: "150px", width: "150px"},{duration: 1000});
}); …我想知道是否有办法将Material Design Lite按钮样式应用于文件选择器,即通过以下方式在HTML页面上创建的组件:
<input type="file" id="filePicker" />
我希望组件的"浏览"按钮具有凸起按钮的外观(如果可能,可以使用波纹).请参见http://www.getmdl.io/components/#buttons-section.
谢谢!
我在MDL中有以下单选按钮.我想知道如何使用jquery设置其中一个选项.我尝试过在SO或网络上发现的各种方式....但没有人工作.
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="sex-option-1">
<input type="radio" id="sex-option-1" class="mdl-radio__button" name="sex-options" value="1">
<span class="mdl-radio__label">Male</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="sex-option-2">
<input type="radio" id="sex-option-2" class="mdl-radio__button" name="sex-options" value="2">
<span class="mdl-radio__label">Female</span>
</label>
MDL版本是1.1.1
提前致谢.
有没有办法将元素上的填充添加到min-height值中而不是包含在其中？例如，您10px在元素的顶部和底部有填充，并且高度的最小高度150px应该是170px而不是元素的高度130px+20px填充。
我目前正在使用 Material Design Lite 构建一个网站，它几乎为所有内容添加了填充，因此当您想要设置最小高度值时，必须始终在某些内容上找到填充，这有点痛苦。
我想打开和关闭MDL吐司，而不是使用MDL使用指南中指出的timeout属性。原因是我希望在进行地理位置定位时保持吐司状态，这有时需要10秒钟以上，而其他时间则需要1秒。
任何想法如何做到这一点？
当我点击我的MDL保存按钮时,我正在禁用该按钮.但是,当按钮被禁用时,工具提示会卡在它下面.有没有办法用代码隐藏MDL工具提示？
<mdl.Button id="save1_Button" buttonType="mini-fab" buttonColor="primary" disabled={true}>Save</mdl.Button>
<div className="mdl-tooltip" htmlFor="save1_Button">
Save
</div>
我正在尝试构建一个简单的页面，其中包含使用材料精简版设计的卡片，但是一个问题卡住了页面的整个布局。如何将MDL卡对准 屏幕的右侧？我已经尝试过float：right; 在css中，则卡仅在同一列中向右移动，而不在屏幕上移动。帮我转移
<div class="mdl-cell mdl-cell--6-col">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>如何以受支持的方式关闭/隐藏布局抽屉？到版本 1.0.6 为止，我一直通过从中删除“is-visible”类来关闭抽屉。从版本 1.0.6 开始，此功能不再正常工作。当您关闭抽屉时，半透明混淆器 div 并不总是清除。
我试图将此作为一个错误提出，但显然团队除了点击抽屉之外根本不支持关闭抽屉。
您可以在这里看到一个非常简单的示例： http://jsbin.com/tajedahexi/edit ?html,js,output