material-components-web

How to use Material Components Web Foundations

阅读更多关于 How to use Material Components Web Foundations

问题 Using Material Components, I am trying to figure out how to use the methods of the Foundations of the components. For an example, I have <div role="progressbar" class="mdc-linear-progress"> <div class="mdc-linear-progress__buffering-dots"></div> <div class="mdc-linear-progress__buffer"></div> <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar"> <span class="mdc-linear-progress__bar-inner"></span> </div> <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar

Sass - Setting the font family with material web components

阅读更多关于 Sass - Setting the font family with material web components

问题 I am using material web components in my project and I would like to change the font family. I was going through their documentation and I have tried to do that by setting the variable in my sass file like this: $mdc-typography-font-family: Comfortaa, sans-serif !default; But, that didn't work, in the documentation it also says that sass mixin sets the font: mdc-typography-base How can I change the mixin to use a different font-family? 回答1: I figured this out by removing !default flag: $mdc

Material Design Components select menu not rendering correctly for web

阅读更多关于 Material Design Components select menu not rendering correctly for web

问题 I'm trying to add a basic MDC select menu to my website. But it's not quite right—the right of the box shows the MDC arrow along with the normal HTML one, and the words are placed too close to the menu label (seen here). HTML part— <div class="mdc-select mdc-select--box day-select"> <select class="mdc-select__native-control" required> <option value="" disabled selected></option> <option value="grains"> Bread, Cereal, Rice, and Pasta </option> <option value="vegetables"> Vegetables </option>

MDCSnackbarFoundation Class usage

阅读更多关于 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 and I need to bind MDCSnackbarFoundation for it. logger = new MDCSnackbar($selector[0]); Thanks 回答1: At first you have to have a Node.js server. And then you have to install a package snackbar for Node.js like follows: npm install @material

How to use Material Components Web Foundations

阅读更多关于 How to use Material Components Web Foundations

Using Material Components, I am trying to figure out how to use the methods of the Foundations of the components. For an example, I have <div role="progressbar" class="mdc-linear-progress"> <div class="mdc-linear-progress__buffering-dots"></div> <div class="mdc-linear-progress__buffer"></div> <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar"> <span class="mdc-linear-progress__bar-inner"></span> </div> <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar"> <span class="mdc-linear-progress__bar-inner"></span> </div> </div> and in my JS I have const bar = $