https://github.com/nicolabello/material-components-web
Modular and customizable Material Design UI components for the web
https://github.com/nicolabello/material-components-web
material-components material-components-web material-design material-design-components
Last synced: 5 months ago
JSON representation
Modular and customizable Material Design UI components for the web
- Host: GitHub
- URL: https://github.com/nicolabello/material-components-web
- Owner: nicolabello
- Created: 2020-03-31T23:02:31.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-17T08:39:11.000Z (over 3 years ago)
- Last Synced: 2025-11-01T13:24:27.379Z (8 months ago)
- Topics: material-components, material-components-web, material-design, material-design-components
- Language: SCSS
- Size: 2.96 MB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Material Components Web (MDC Web)
This package has been forked from the original Google project [material-components-web](https://github.com/material-components/material-components-web).
All the internal imports have been transformed to relative to make importing the library easier, without the need of adding `includePath` to the SASS compiler options.
## Installation
```bash
npm install @nicolabello/material-components-web
```
or
```bash
yarn add @nicolabello/material-components-web
```
## Usage
### Including the Sass
The default icons and typography require to include [Material Design Icons](https://material.io/resources/icons) and [Roboto font](https://fonts.google.com/specimen/Roboto)
```scss
// Material design icons
@import "https://fonts.googleapis.com/icon?family=Material+Icons";
// Roboto font
@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500";
```
To import the style for all the available components do as following
```scss
// All components
@use "~@nicolabello/material-components-web/styles";
```
To import only the style for specific components do as following
```scss
// Button
@use "~@nicolabello/material-components-web/button/mdc-button";
// Chips
@use "~@nicolabello/material-components-web/chips/mdc-chips";
```
To access variables, mixins and functions do as following
```scss
// All components variables, mixins and functions
@use "~@nicolabello/material-components-web/members";
// Button variables, mixins and functions
@use "~@nicolabello/material-components-web/button";
.my-class {
height: members.$button-height;
// Equivalent to
height: button.$height;
}
.my-other-clss{
@include members.button-ink-color(red);
// Equivalent to
@include button.ink-color(red);
}
```
If you are unfamiliar with the syntax, read about [Sass Modules](https://sass-lang.com/blog/the-module-system-is-launched).
Please note: the `~` at the start of the imports paths tells the Webpack loader to resolve the import from the `node_modules` path.
### Including the JavaScript
```js
import { MDCCheckbox } from '@nicolabello/material-components-web';
const checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));
```
## Documentation
- [Original repo documentation](https://github.com/material-components/material-components-web#readme).
- [Material design documentation](https://material.io/develop/web/getting-started).
Please note that the imports in the documentation must be replaced as following:
- `@material/` -> `~@nicolabello/material-components-web/` for Sass imports
- `@material/` -> `@nicolabello/material-components-web/` for JavaScript and TypeScript imports