Modular and customizable Material Design UI components (for the web).
Questions tagged [material-components-web]
121 questions
22
votes
2 answers
How to set primary and secondary colors in Material Design Components for Web?
Details
I went looking into Material Components (MDC) for Web and landed to using CDN (hosted CSS and JavaScript…
Abel Callejo
- 13,779
- 10
- 69
- 84
10
votes
2 answers
Material Web Components vs Material Components Web
Is there any difference between Material Web Components (link) and Material Components Web (link)?
Material Web Components doesn't have much of an explanation other than
Built on top of the Material Components Web project and LitElement,
the…
I should change my Username
- 406
- 4
- 19
10
votes
1 answer
MDCSnackbarFoundation Class usage
How do I use MDCSnackbarFoundation ? with MDCSnackbar
This documentation is not clear enough to get an idea.
https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar#using-the-foundation-class
This is my code…
Dhanan
- 207
- 4
- 12
9
votes
1 answer
What is the difference between Material Design Components & Polymer's Web Components?
Material.io
From the https://material.io/ website (the official Google spec?), I end up here when I follow the path to access "Material Design UI" web components:
https://github.com/material-components/material-components-web/
Polymer Project
From…
etipaced
- 125
- 1
- 11
8
votes
2 answers
Material Components for the web modal drawer example using CDNs
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…
Abel Callejo
- 13,779
- 10
- 69
- 84
8
votes
3 answers
How to centralize cells in Material Components Web (MDC)?
I want to have a centralized grid cells with, for example, 6 columns in desktop. In docs, it says:
The grid is by default center aligned. You can add mdc-layout-grid--align-left or mdc-layout-grid--align-right modifier class to change this…
Alexandre Thebaldi
- 4,546
- 6
- 41
- 55
7
votes
2 answers
MDC-Web Typography: Font Customization
Is the MDC typography specific to the Roboto font, or can we implement with other Google fonts and if so, is the recommended way simply to apply the font-family CSS to body?
Lastly, it appears that all header elements are tied to the
element…
Ronnie Royston
- 16,778
- 6
- 77
- 91
5
votes
2 answers
Material Image List Error: @import "@material/feature-targeting/functions";
I want to use mdc-image-list in my Angular project. I'm getting an error:
@import "@material/feature-targeting/functions";
^
Can't find stylesheet to import.
╷
21 │ @import "@material/feature-targeting/functions";
│ …
Char
- 2,073
- 8
- 28
- 45
5
votes
1 answer
How to activate focus on material design web component text field?
I have this code
this.mdc_text = mdc.textField.MDCTextField.attachTo(this.$el);
if (this.autofocus) {
this.mdc_text.activateFocus();
}
but the function activateFocus is undefined. How can I focus…
omega
- 40,311
- 81
- 251
- 474
5
votes
1 answer
Add Icon to an MDC Card
I need to add an icon before the title of an MDC card as shown in the diagram (label 2). However, I do not know the correct HTML for this according to the MDC design. This is HTML code I have so far for the card:
user3248346
5
votes
3 answers
Material Design Component Text Field's Label Does Not Float To Top Left
I'm following the Material Design Tutorials here. The tutorial follows a Node JS approach and makes use of npm to install the material design components. This is fine and I get the MDC 101 project running exactly as in the tutorial. The text box…
user3248346
4
votes
1 answer
How to unlisten MDCDialog event
I have a small function which listen to MDCDialog:closing.
The problem is, each time I run this function, it add a new listener.
So, I need to remove this same listener once I'm done using it.
So far, this is what I did:
function confirm() {
…
Preciel
- 2,666
- 3
- 20
- 45
4
votes
2 answers
How to configure material components web with laravel-mix?
I use mdc with laravel-mix but it's not loading scss files from node modules.
I tried some other solutions about giving includepaths in mix.sass, but they are not working.
I tried code in webpack.mix.js
const path = require('path');
let mix =…
kei nagae
- 200
- 1
- 15
4
votes
1 answer
Working example of Material Design LinearProgress component
Attached are the pseudo-codes for an attempt to make a working prototype of a Linear Progress component.
HTML
...
Abel Callejo
- 13,779
- 10
- 69
- 84
4
votes
2 answers
How to include Material.io outlined textfield in non-Node.js app
I use Material Design with my non-Node.js app. I need to use the Material outlined textfield (with leading icon) in my HTML project. Material.io website shows JavaScript code for some components but does not show it for others. How can I add the…
user9850863
- 93
- 1
- 6