material-components-web | Modular and customizable Material Design UI components | User Interface library
kandi X-RAY | material-components-web Summary
kandi X-RAY | material-components-web Summary
Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects. Material Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion. Material Components for the web is the successor to Material Design Lite. In addition to implementing the Material Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically architected for adaptability to various major web frameworks. NOTE: Material Components Web tends to release breaking changes on a monthly basis, but follows semver so you can control when you incorporate them. We typically follow a 2-week release schedule which includes one major release per month with breaking changes, and intermediate patch releases with bug fixes.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of material-components-web
material-components-web Key Features
material-components-web Examples and Code Snippets
License : Strong Copyleft (CC BY-SA 4.0)
Copynpm i
npm i node-sass sass-loader -D
npm i material-components-web -S
const mix = require('laravel-mix')
mix
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css', {
Community Discussions
Trending Discussions on material-components-web
QUESTION
Looking at the Material Components Web documentation, I see inter alia @use "material/chips/styles"
When I visit app.scss – adopt-a-pup I see @import statements such as @import "@material/chips/mdc-chips";
I understand that @use is the newer modular way. Which sass approach should I use?
Could the glitch demos be out of date? Is there an example reference anywhere that makes use of both, say, mdc-chips and mdc-select?
ANSWER
Answered 2022-Jan-11 at 12:23You definitely should use @use. adopt-a-pup is very outdated. It references MDC 0.41.0, while current version is 13.0.0.
Unfortunately MDC examples are very scarce and documentation at material.io is outdated sometimes. I recommend using docs on their github repo, it is the most current.
Also some time ago I put together these two starter kits. They might be of some help in terms of examples how to use MDC:
QUESTION
I'm trying to implement a virtual scroll in my image gallery. My problem is that the implementation doesn't work correctly. First, the elements are displayed in vertical position, when in fact they should respect the horizontal breakpoints and only then respect the vertical scroll. Second, with the scroll elements appear with huge spacing.
Does anyone know how I can solve this problem? thanks
HTML
...ANSWER
Answered 2022-Jan-11 at 12:19I updated your example here.
Your problem was mainly css and there seem to have been (at least) 2 problems:
Your are giving
.mdc-image-list__itemclassmin-height: 400pxandmax-height: 400px. That basically means that all your.mdc-image-list__itemcontainers will have 400px height (so height: auto is kind of useless). Removing this will remove the white space between your images.If you want to have scroll as well as elements on the same page you should use a flex container with
flex-wrap: wrap.
In order to do this I used the following snippet (for your case):
QUESTION
I am testing Material Components Web from their recommended CDN & some minimal simple custom Vanilla Javascript to get it work properly.
For example, I can follow the single line list example showed here like this:
...ANSWER
Answered 2022-Jan-04 at 18:07First of all, I'd recommend using docs on github repo - https://github.com/material-components/material-components-web/tree/master/packages/mdc-list:
List is currently being updated to better match the Material spec. As a result, there are two versions of List available: the deprecated old version and the new, future-proof version.
... there are differences in class names and DOM structure: the old version uses class names with a mdc-deprecated-list prefix (e.g., mdc-deprecated-list-item) whereas the new version uses the typical mdc-list prefix (e.g., mdc-list-item).
The example you referenced is related to deprecated version. You either need to add deprecated to class names, or update it according to the new docs.
Here is updated code which uses the new List version:
QUESTION
I'm creating a React Button component using Material Components Web. I've gotten the default button working which uses the Primary theme colour. I'd like to add an option for a secondary coloured button, but I'm not sure how to do this with the sass mixins.
I found this feature request but the answer is out of date as the Button styles have been refactored. Can someone point me in the right direction?
Here's my Button implementation:
Button.js
...ANSWER
Answered 2021-Aug-09 at 13:08@use './theme';
@use "~@material/button/mdc-button"; // This line injects button's core styles
@use "~@material/button"; // This line "imports" button's mixins
.ids-button-secondary {
@include button.filled-accessible(red); // This mixin sets fill color for a contained button.
}
QUESTION
I followed the standard tutorial in sveltkit to create a Typescript Project for a basic template.
I wanted to use Material Web Component Button.
I npm install @material/mwc-button.
Then I simply add the following to routes/index.svelte
ANSWER
Answered 2021-Jun-20 at 02:16Wow, that error message is very unhelpful. In a non-TS SvelteKit project, you get Error when evaluating SSR module /node_modules/lit-html/lib/template-result.js: ReferenceError: window is not defined, which is a little clearer about what is going on.
Importing Material Web Components runs code that uses window, which is not available on the server. Because of this, Vite throws an error while trying to process the imported mwc-button library. You can use a dynamic import in Svelte's onMount lifecycle function so that the library is only imported on the client. You will have to do this with any web component you import.
QUESTION
Is there a way to loop through all the children in a Svelte component?
GoalI'm working on creating a list component in Svelte with this syntax (ideally).
...ANSWER
Answered 2021-Apr-27 at 13:34I used a register function in the parent (your List component) for a pulldown menu component.
Something like:
List component:
QUESTION
i want to remove tags based on backspace keypress
Input field is need to always focus on it, so i cannot remove input filed from container
Question: i want to remove tag(s) based on each backspace keypress but focus will be always input element
ANSWER
Answered 2021-Mar-06 at 06:05This program hides the last tags when you type backspace:
QUESTION
I'm looking for a non-jQuery way of hiding & showing a Material Design icon button when toggling. Not sure if I should do it using innerHtml or something else. Let's say I'm trying to replicate jQuery's hide & show methods. Any help much is appreciated.
ANSWER
Answered 2021-Feb-14 at 16:12You can bind an event handler to toggle a class on the icons which switches which one is visible and which on is hidden like this:
QUESTION
I have used material component input in my website. I create two the same input. Here is all my code:
...ANSWER
Answered 2020-Dec-23 at 15:16It seems that mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field')); only applying to only one elament.
So i modified the code to make two of the inputs to apply the script as shown below
QUESTION
I am trying to implement material design Select Component with multiple selections from Material Components for the web. But I am unable to find any option for the same.
Code for Select. [ Documentation ]
...ANSWER
Answered 2020-Dec-01 at 02:42The documentation clearly states
MDC Select provides Material Design single-option select menus, using the MDC menu
You'll need to either:
- Use some other component.
- Change UI design. It seems that "multiple selections select" is not in Material Design guidelines. Google itself uses different approaches for situations where multiple values needs to be selected. Here are few examples which should give you an idea how to work around "multiple selections select":
Gmail: assigning multiple labels.
Gmail: multiple addressee
Google Calendar: selecting multiple event guests
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install material-components-web
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
