# mdcweb-extension

> Extension with additional Material Components for the Web

Latest version **0.3.3** (published 2018-05-09) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install mdcweb-extension
pnpm add mdcweb-extension
yarn add mdcweb-extension
bun add mdcweb-extension
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2018-05-09 |
| First published | 2018-05-09 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 543.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | marioavs |
| Keywords | material components extension, material design |

## Links

- npm: https://www.npmjs.com/package/mdcweb-extension
- Repository: https://github.com/marioavs/mdcweb-extension
- Homepage: https://github.com/marioavs/mdcweb-extension#readme
- Issues: https://github.com/marioavs/mdcweb-extension/issues
- npm.io page: https://npm.io/package/mdcweb-extension

## Dependencies (7)

- [@mdcext/treeview](https://npm.io/package/@mdcext/treeview.md) ^0.3.1
- [@mdcext/data-table](https://npm.io/package/@mdcext/data-table.md) ^0.3.1
- [@mdcext/pagination](https://npm.io/package/@mdcext/pagination.md) ^0.3.1
- [@material/auto-init](https://npm.io/package/@material/auto-init.md) ^0.35.0
- [@mdcext/date-picker](https://npm.io/package/@mdcext/date-picker.md) ^0.3.1
- [@mdcext/multiselect](https://npm.io/package/@mdcext/multiselect.md) ^0.3.1
- [@mdcext/input-dialog](https://npm.io/package/@mdcext/input-dialog.md) ^0.3.1

## Recent versions

- 0.3.3 (latest) — 2018-05-09
- 0.3.2 — 2018-05-09
- 0.3.1 — 2018-05-09
- 0.3.0 — 2018-05-09

## README

# Extension with additional Material Components for the Web (MDCWeb-Ext)

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

## Installation

```
npm install --save mdcweb-extension
```

## Usage

### Including the Sass

```scss
@import "mdcweb-extension/mdcweb-extension";
```

### Including the Javascript

```js
import * as mdcext from 'mdcweb-extension';
const multiselect = new mdcext.multiselect.MDCExtMultiselect(document.querySelector('.mdc-ext-multiselect'));
// OR
import { multiselect } from 'mdcweb-extension';
const multiselectControl = new multiselect.MDCExtMultiselect(document.querySelector('.mdc-ext-multiselect'));
```

### Auto-initialization of components

The `material-components-web` package automatically registers all MDC-Web components with
[mdc-auto-init](https://github.com/material-components/material-components-web/tree/master/packages/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 [input dialog](../mdc-ext-input-dialog). Simply render the necessary
DOM, an attach the `data-mdc-auto-init="MDCExtInputDialog"` attribute.

```html
<aside id="js-input-dialog" class="mdc-ext-input-dialog" data-mdc-auto-init="MDCExtInputDialog">
  <div class="mdc-ext-input-dialog__surface">
    <header class="mdc-ext-input-dialog__header">
      <h2 class="mdc-ext-input-dialog__header__title">
        Additional input value
      </h2>
    </header>
    <section class="mdc-ext-input-dialog__body">
      <div class="mdc-text-field mdc-text-field--fullwidth">
        <input type="text" class="mdc-text-field__input" placeholder="Additional Value">
        <div class="mdc-line-ripple"></div>
      </div>
    </section>
    <footer class="mdc-ext-input-dialog__footer">
      <button type="button" class="mdc-button mdc-ext-input-dialog__button mdc-ext-input-dialog__button--cancel">Cancel</button>
      <button type="button" class="mdc-button mdc-ext-input-dialog__button mdc-ext-input-dialog__button--accept">Add</button>
    </footer>
  </div>
  <div class="mdc-ext-input-dialog__backdrop"></div>
</aside>
```

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

```html
<script>
  mdc.autoInit.register('MDCExtDatePicker', mdcext.datePicker.MDCExtDatePicker);
  mdc.autoInit()
</script>
```

This will automatically initialize the input dialog, as well as any other components marked with the
auto init data attribute. See [mdc-auto-init](https://github.com/material-components/material-components-web/tree/master/packages/mdc-auto-init)
for more info.

---
_Source: https://npm.io/package/mdcweb-extension · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._