Socket
Socket
Sign inDemoInstall

material-components-web

Package Overview
Dependencies
51
Maintainers
15
Versions
1698
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

material-components-web

Modular and customizable Material Design UI components for the web


Version published
Maintainers
15
Weekly downloads
32,512
decreased by-17.46%
Bundle size
68.6 kB
Minified + gzipped

Weekly downloads

Readme

Source

Material Components Web (MDC Web)

This package contains the master library for Material Components Web. It simply wraps all of its sibling packages up into one comprehensive library for convenience.

Installation

npm install material-components-web

Usage

Including the Sass

@use "material-components-web/material-components-web";

Including the Javascript

import * as mdc from 'material-components-web';
const checkbox = new mdc.checkbox.MDCCheckbox(document.querySelector('.mdc-checkbox'));
// OR
import {checkbox} from 'material-components-web';
const checkbox = new checkbox.MDCCheckbox(document.querySelector('.mdc-checkbox'));

See Importing the JS component for more information on how to import JavaScript.

NOTE: Since switch is a reserved word in JS, switch is instead named switchControl.

NOTE: Built CSS files as well as UMD JS bundles will be available as part of the package.

Auto-initialization of components

The material-components-web package automatically registers all MDC Web components with mdc-auto-init, making it dead simple to create and initialize components with zero configuration or manual work.

For example, say you want to use an icon button toggle. Simply render the necessary DOM, and attach the data-mdc-auto-init="MDCIconButtonToggle" attribute.

<button class="mdc-icon-button" 
   aria-label="Add to favorites"
   aria-pressed="false"
   data-mdc-auto-init="MDCIconButtonToggle">
  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
  <i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>

Then at the bottom of your html, insert this one-line script tag:

<script>mdc.autoInit()</script>

This will automatically initialize the icon button toggle, as well as any other components marked with the auto init data attribute. See mdc-auto-init for more info.

Keywords

FAQs

Last updated on 28 Apr 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc