material-components-web

How do I use MDCSlider in JavaScript?

由 寵の児 提交于 2020-12-15 05:21:48
问题 I have created an DOM element for an MDC slider (https://material.io/develop/web/components/sliders). It looks nice (except for the colors). And it works, but I really have no idea how to initialize it. I import MDC from the CDN. I can't understand from the documentation how to do the initialization. This is one version that works: setTimeout(() => { slider = new mdc.slider.MDCSlider(eltSlider) }); Without setTimeout it does not work. I have tried using a Promise instead and wait a second.

“Cannot read property 'MDCSwitch' of undefined” error when importing an MDC Switch component

由 你离开我真会死。 提交于 2020-08-10 23:08:48
问题 I'm writing a Node app using express and material-components-web and I'm having a problem where TextField works but Switch does not. Here's the code I'm using to attach the relevant JS to the elements: [].slice.call(document.querySelectorAll('.mdc-text-field')).forEach( function(ele) { mdc.textField.MDCTextField.attachTo(ele); }); [].slice.call(document.querySelectorAll('.mdc-switch')).forEach( function(ele) { mdc.switch.MDCSwitch.attachTo(ele); }); When I comment out the code for the

Setting up webpack 4.0 to use Google material design SASS with ExtractTextPlugin

由 …衆ロ難τιáo~ 提交于 2020-02-02 06:28:25
问题 I'm struggling to get Webpack 4.0 to compile my SASS which I want to use Google material design SASS files with. I think it is an issue with not being able to access the SASS files in the node_modules folder. var ExtractTextPlugin = require('extract-text-webpack-plugin'); const path = require('path'); module.exports = { //entry: path.resolve(__dirname, 'react/test/index.js'), entry: [path.resolve(__dirname, 'react/test/index.js'), path.resolve(__dirname, 'styles/main.scss')], output: { path

Typing in TextField doesn't make label float

由 被刻印的时光 ゝ 提交于 2020-01-25 06:09:51
问题 I have made a form with Material Design components. My TextField floating labels float when AutoFill fills the inputs, but not when a user types in them. function fillFields() { $("#passwordTextField").val("test"); $("#usernameTextField").val("test"); } p.highlight-red-on-error { transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1); } div.mdc-text-field--invalid~p.highlight-red-on-error { color: #b00020; } <head> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256

Typing in TextField doesn't make label float

由 徘徊边缘 提交于 2020-01-25 06:08:44
问题 I have made a form with Material Design components. My TextField floating labels float when AutoFill fills the inputs, but not when a user types in them. function fillFields() { $("#passwordTextField").val("test"); $("#usernameTextField").val("test"); } p.highlight-red-on-error { transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1); } div.mdc-text-field--invalid~p.highlight-red-on-error { color: #b00020; } <head> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256

Typing in TextField doesn't make label float

由 人盡茶涼 提交于 2020-01-25 06:08:25
问题 I have made a form with Material Design components. My TextField floating labels float when AutoFill fills the inputs, but not when a user types in them. function fillFields() { $("#passwordTextField").val("test"); $("#usernameTextField").val("test"); } p.highlight-red-on-error { transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1); } div.mdc-text-field--invalid~p.highlight-red-on-error { color: #b00020; } <head> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256

window.autoInit in Rails using material-components-web and webpacker

由 可紊 提交于 2020-01-06 07:01:44
问题 I'm using Rails 5.1.4 with the code below. I have confirmed that the material.js file is being processed and the material-components-web module is downloaded and discovered. Why is mdc undefined when calling window.mdc.autoInit() ? // app/javascript/packs/material.js import 'material-components-web' // app/views/layouts/application.html.eeb <html> <head> <%= javascript_pack_tag 'material' %> </head> <body> <script>window.mdc.autoInit();</script> </body> </html> I have tried importing

Configure Webpack to resolve relative paths

由 两盒软妹~` 提交于 2020-01-05 08:52:42
问题 I am trying to implement Material Web Components into my Web App as per Material Component Web's Getting Started Guide. I was able to successfully set up Webpack (V3) to load the SASS for a web component. This was after running into a problem with the include path. I was able to resolve this by adding this line to my webpack.config.js . { loader: 'sass-loader', options: { includePaths: ['./node_modules'] } } However, I wasn't as successful compiling the JS. The component in question is

Material Components for the web modal drawer example using CDNs

由 你离开我真会死。 提交于 2020-01-02 05:36:07
问题 Examples on using Material Components for Web CDNs for front-end design are not that helpful. I found this demo of a modal drawer but it doesn't seem to use the published CSS and JavaScript CDNs. Demo : Modal drawer demo How to implement a modal drawer using Material Components' CDNs? 回答1: It is a bit difficult to get going with MDC using unpkg bundles instead of consuming individual components via webpack. The Getting Started documentation helps a bit but it can still be difficult to

Use Material Design Components with ember-cli-sass

由 拥有回忆 提交于 2019-12-24 07:06:53
问题 I'm trying to use Material Components Web(MDC-Web) sass functionality with ember-cli-sass. I've installed MDC-Web with Yarn In my ember-cli-build.js file I've set my sass includePaths as so: sassOptions: { includePaths: ['node_modules/material-components-web','node_modules/@material'] } and then in my app.scss file attempted to import the full component library like so: @import "material-components-web"; However I'm getting the error: Error: Error: File to import not found or unreadable:
订阅 material-components-web