14.0.0 • Published 5 months ago

material-components-web v14.0.0

Weekly downloads
36,479
License
MIT
Repository
github
Last release
5 months ago

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

@import "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'));

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

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 toggle. Simply render the necessary DOM, an attach the data-mdc-auto-init="MDCIconToggle" attribute.

<i class="mdc-icon-toggle material-icons" role="button" aria-pressed="false"
   aria-label="Add to favorites" tabindex="0"
   data-toggle-on='{"label": "Remove from favorites", "content": "favorite"}'
   data-toggle-off='{"label": "Add to favorites", "content": "favorite_border"}'
   data-mdc-auto-init="MDCIconToggle">
  favorite_border
</i>

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

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

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

libya@jfdev/webcomps-storybook@geodashboard/gd-gltgfp-uibhavyacomponents-srcs-forktheme-dartboardreact-material-design@react-material-design/react-material-designenergygo-dsneon-euneon-goneon-mmneon-ppvue-mdc-webtest-web-componentstest-web-componetsmcw-vuemdc-web-reactlogin-oversea-popup-plugin@everything-registry/sub-chunk-2137@gmahechas/common-webcomponentscss-desyredesyrelinkfly-exp-react-mdclarasati-laravel-mdcifosfieldlogik-config-componentnila.uxmicro-ui-stylesmithril-material-componentsinsyselementsinvitation-module-webcomponentjsonformsst7avsnang-vue-mdc-adaptermaterial-components-kitmaterial-components-vuematerial-components-vue-hjbweb-fixmaterial-components-web-vuematerial-components-angular2mdc-pugmdc-reactmdc-react-demomdc-sassmdc-select-reactmdc-vuemdc-web-testmaterial-maquettematerial-webcomponentsmaterialmarkoedukakaember-mdcequivalent-js-plugin-mdcflow-rdfgalway-viewerheimdall-liteomi-material-componentsonboarding-microfrontendr2-testapp-jspreact-material-componentspreact-material-components-mgrprogress-demopos-depsreact-material-sassreact-material-componentsreact-material-components-thinreact-material-components-web-thinreact-mdc-webreact-mdc-web-areact-mdcwreact-mc-litereact-mcwreact-mdw-componentsreact-mdw-starterreact-mwcreact-materialedreact-mcpaper-components@sensenet/controls-aureliapmc-viewerpmi-components-testpmi-controls-testreact-input-comp-lib-npmsemantic-search-poc@indi/materialvmdcvue-material-adaptervue-material-adapter-legacyvue-mdc-adaptervue-mdc-adapter-forkedtypescript-search@keeer/material-components-nuxt@keeer/material-components-vue@micahjones13/astro-material-dark-themewebpageplayingmaterialdesignwebiny-uitikiti@lombardini22/dev-material@lombardini22/tsc-material@lordoftheflies/plutonium-styles
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

3.2.0

5 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

3.1.1

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.1.0-alpha.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

2.3.1

5 years ago

2.3.0

5 years ago

2.2.0

5 years ago

3.0.0-0

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago

0.43.1

5 years ago

0.43.0

5 years ago

0.42.1

5 years ago

0.42.0

5 years ago

0.41.1

5 years ago

0.41.0

5 years ago

0.40.1

5 years ago

0.40.0

6 years ago

0.39.3

6 years ago

0.39.2

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.39.0-0

6 years ago

0.38.2

6 years ago

0.38.1

6 years ago

0.38.0

6 years ago

0.37.1

6 years ago

0.37.0

6 years ago

0.36.1

6 years ago

0.36.0

6 years ago

0.36.0-0

6 years ago

0.35.2

6 years ago

0.35.1

6 years ago

0.35.0

6 years ago

0.34.1

6 years ago

0.34.0

6 years ago

0.33.0

6 years ago

0.32.0

6 years ago

0.31.0

6 years ago

0.30.0

6 years ago

0.29.0

6 years ago

0.28.0

6 years ago

0.27.0

6 years ago

0.26.0

6 years ago

0.25.0

6 years ago

0.24.0

6 years ago

0.23.0

6 years ago

0.22.0

6 years ago

0.21.1

7 years ago

0.21.0

7 years ago

0.20.0

7 years ago

0.19.0

7 years ago

0.18.1

7 years ago

0.18.0

7 years ago

0.17.0

7 years ago

0.16.0

7 years ago

0.15.0

7 years ago

0.14.0

7 years ago

0.13.0

7 years ago

0.12.1

7 years ago

0.12.0

7 years ago

0.11.1

7 years ago

0.11.0

7 years ago

0.10.0

7 years ago

0.9.1

7 years ago

0.9.0

7 years ago

0.8.0

7 years ago

0.7.0

7 years ago

0.6.0

7 years ago

0.5.0

7 years ago

0.4.0

7 years ago

0.3.0

7 years ago

0.2.0

7 years ago

0.1.1

7 years ago