material-design-lite | 易学教程

Register model changes to MDL input elements

阅读更多关于 Register model changes to MDL input elements

问题 When integrating MDL with a framework, the framework will set the values for inputs directly, but the changes won't get noticed by the MDL libraries, as those are likely bound to click and change events. For example, if I have: <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="joke" pattern="-?[0-9]*(\.[0-9]+)?"> <label class="mdl-textfield__label" for="joke">Joke...</label> <span class="mdl-textfield__error">Input

Material Design Lite not fully working with Angular2

阅读更多关于 Material Design Lite not fully working with Angular2

问题 I have a simple HTML template built with MDL. When I place the template into Angular2 App. Elements' actions and clicks are not working E.g : Showing dropdowns or clicking tabs etc are not working. I cant see any errors in Developer Console and would like clarification on why this error is happening. 回答1: Call componentHandler.upgradeDom(); in ngAfterViewInit() and each time later when the DOM was modified: ngAfterViewInit() { componentHandler.upgradeDom(); } See also Material Design Lite

Material Design Lite Menu not working in Card Design

阅读更多关于 Material Design Lite Menu not working in Card Design

问题 I am using the material design lite to create a menu from the tutorial - https://getmdl.io/components/ here is the code <div class="mdl-card__actions mdl-card--border"> <button id="share-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect pull-left"> <i class="material-icons">share</i> </button> <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="share-menu"> <li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item mdl-menu_

Dynamically add items to an mdl menu

阅读更多关于 Dynamically add items to an mdl menu

问题 I want to dynamically add menu items to an mdl menu. However, I have not figured out how to register the new items with mdl so that they work properly. Here is a codepen showing the different behavior. Notably, the dynamic item does not have a ripple effect, or close the menu on click. That code pen uses componentHandler.upgradeElement on both the newly created item, and the original menu element to no effect. I've noticed that the properly created menu items also have another class ( mdl-js

Handling button mdl-js styling with dynamic innerHTML change

阅读更多关于 Handling button mdl-js styling with dynamic innerHTML change

问题 Changing <button> innerHTML seems to deactivate mdl-js-ripple-effect. Use the method mentioned here to dynamically build a new element as the workaround or report this as a bug? <body> <button id="myButton" class="mdl-button mdl-js-button mdl-js-ripple-effect">OLD VALUE </button> </body> JS: window.addEventListener("load", () => { document.getElementById("myButton").innerHTML = "new value"; }); http://codepen.io/anon/pen/KVvMOE Tried the componentHandler.upgradeElement(button) on the existing

mdl-stepper javascript and HTML

阅读更多关于 mdl-stepper javascript and HTML

问题 I copied and pasted the code I found here. When I try and step (press continue) it does not want to move, in fact it does nothing. I am using Smarty PHP and putting the JavaScript and CSS in the header area of the site - jQuery I am using I have that at the bottom. {literal} <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>  <style> @-webkit-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 100; } } @-moz-keyframes FadeIn { 0% {

Modifying CSS and finding ID of a google charts table

阅读更多关于 Modifying CSS and finding ID of a google charts table

问题 I have two questions. I am trying to create a google charts table. A) I need the ID of the actual table element being created so I can make some modifications. So, how can I set/get the table ID? B) How can I add custom CSS class to the table tag? I basically want to add css from material-design-lite to these tables. Thank You so much! 回答1: First, you can assign cssClassNames to specific areas of the chart, using the Configuration Options. Such as... headerRow - Assigns a class name to the

Material-Design-Lite, Override styleguide property without !important

阅读更多关于 Material-Design-Lite, Override styleguide property without !important

问题 I'm playing with Material-Design-Lite and I want to override a style but it won't work. Let say that I woudl like to change the padding on mdl-navigation__link which is actually 16px 40px to 0px . I have overrided the property on my custom style sheet but without success. However some other styles are applied : .my-navigation .mdl-navigation__link { padding: 0px; border: 1px solid red; } The border is applied but not the padding. And into teh web develope tools I see that my padding property

Material Design Lite Table - Adding Rows Dynamically Breaks Format

阅读更多关于 Material Design Lite Table - Adding Rows Dynamically Breaks Format

问题 This is the markup for the checkbox using material-design-lite: <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox"> <input type="checkbox" id="checkbox" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Checkbox</span> </label> Problem is, that the labels for is connected to the inputs id . So when I add dynamically a new checkbox, I have to also add an id. But how do I find out which Id to add? Wouldn't it be a problem, when I am later going to add

How can I programmatically mark text field as invalid?

阅读更多关于 How can I programmatically mark text field as invalid?

问题 How can I programmatically mark text field as invalid in Material Design Light? My HTML code: <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input id="email" type="email" class="mdl-textfield__input"> <label for="email" class="mdl-textfield__label">Email</label> <span class="mdl-textfield__error">Email is invalid or already taken!!!</span> </div> I added is-invalid class in JavaScript but it displays badly: 来源： https://stackoverflow.com/questions/44528717/how-can