Have ideas to improve npm?Join in the discussion! »

    material-components-web
    TypeScript icon, indicating that this package has built-in type declarations

    11.0.0 • Public • Published

    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.

    Install

    npm i material-components-web

    DownloadsWeekly Downloads

    41,348

    Version

    11.0.0

    License

    MIT

    Unpacked Size

    6.86 MB

    Total Files

    16

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar