open-index/open-npm huggingface dataset:
npm package: @maicol07/material-web-additions
Description: Material Web Components Additions
Latest version: 1.8.0

# Material Web Additions

[![GitHub issues by-label](https://img.shields.io/github/issues-raw/maicol07/material-web-additions/Type:%20Bug)](https://github.com/maicol07/material-web-additions/issues?q=is%3Aissue+is%3Aopen+label%3A%22Type%3A+Bug%22)

> IMPORTANT: Material Web & Material Web Additions are work in progress and subject to major changes until 1.0
> release.

Material Web Additions is a collection of additional components
to [Material Web](https://github.com/material-components/material-web)
components: Google’s UI toolkit for building beautiful, accessible web applications. Material Web & Material Web
Additions are implemented as a collection
of [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components).

## Installation
[![See it on NPM!](https://img.shields.io/npm/v/@maicol07/material-web-additions?style=for-the-badge)](https://www.npmjs.com/package/@maicol07/material-web-additions)

| Package Manager | Command                                        |
|-----------------|------------------------------------------------|
| npm             | `npm install @maicol07/material-web-additions` |
| yarn            | `yarn add @maicol07/material-web-additions`    |
| pnpm            | `pnpm add @maicol07/material-web-additions`    |

> NOTE: The Material Web Components are distributed as ES2020 JavaScript Modules, and use the Custom Elements API. They
> are compatible with all modern browsers including Chrome, Firefox, Safari and Edge.

## Usage & Docs

Read the full docs on Storybook:

<div style="text-align: center;">
    <a href="https://main--625eadb22bf40d003a32215a.chromatic.com">
<img src="https://user-images.githubusercontent.com/263385/44539334-ef6bdf80-a6d1-11e8-9423-2912fd8197e9.png" alt="Storybook"/>
    </a>
</div>
npm package: @maicol07/mwa-card
Description: Material compoments web components implementation of MDC Card
Latest version: 0.26.1
Deprecated: Upgraded to M3 version. New package: @maicol07/material-web-additions

# `<mwa-card>` [![Published on npm](https://img.shields.io/npm/v/@maicol07/mwa-card.svg)](https://www.npmjs.com/package/@maicol07/mwa-card)
A [Material Components](https://material.io/develop/) card implementation using [Web Components](https://www.webcomponents.org/introduction)

[Cards](https://material.io/components/cards/) contain content and actions about a single subject.

For additional information, see the [API](#api--example-usage).

MWC Card encapsulates [MDC Card](https://material.io/components/cards/web#using-cards).

![Card](https://raw.githubusercontent.com/material-components/material-components-web/master/packages/mdc-card/images/card-elevated.png)

## Installation
[![See it on NPM!](https://img.shields.io/npm/v/@maicol07/mwa-card?style=for-the-badge)](https://www.npmjs.com/package/@maicol07/mwa-card)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@maicol07/mwa-card?style=for-the-badge)](https://bundlephobia.com/result?p=@maicol07/mwa-card)

| Package Manager | Command                          |
|-----------------|----------------------------------|
| npm             | `npm install @maicol07/mwa-card` |
| yarn            | `yarn add @maicol07/mwa-card`    |
| pnpm            | `pnpm add @maicol07/mwa-card`    |

## API & Example Usage
If you don't see anything else below, click this button to see the API and the example usage:

[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://main--625eadb22bf40d003a32215a.chromatic.com/?path=/docs/card--basic)
npm package: @maicol07/mwa-data-table
Description: Material compoments web components implementation of MDC Data Table
Latest version: 0.26.1
Deprecated: Upgraded to M3 version. New package: @maicol07/material-web-additions

# `<mwa-data-table>` [![Published on npm](https://img.shields.io/npm/v/@maicol07/mwa-data-table.svg)](https://www.npmjs.com/package/@maicol07/mwa-data-table)
[Data tables](https://material.io/components/data-tables/) display sets of data across rows and columns.

They organize information in a way that’s easy to scan, so that users can look for patterns and insights.

Data tables can contain:
- Interactive components (such as chips, buttons, or menus)
- Non-interactive elements (such as badges)
- Tools to query and manipulate data

For additional information, see the [API](#API--usage).

MWC Data table encapsulates [MDC Data Table](https://material.io/components/data-tables).

![DataTable](https://github.com/material-components/material-components-web/raw/master/packages/mdc-data-table/images/data-table-hero.png)

## Installation
[![See it on NPM!](https://img.shields.io/npm/v/@maicol07/mwa-data-table?style=for-the-badge)](https://www.npmjs.com/package/@maicol07/mwa-data-table)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@maicol07/mwa-data-table?style=for-the-badge)](https://bundlephobia.com/result?p=@maicol07/mwa-data-table)

| Package Manager | Command                                |
|-----------------|----------------------------------------|
| npm             | `npm install @maicol07/mwa-data-table` |
| yarn            | `yarn add @maicol07/mwa-data-table`    |
| pnpm            | `pnpm add @maicol07/mwa-data-table`    |

> NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve *bare module specifiers*, as well as transpilation and polyfills for Edge and IE11. See [here](https://github.com/material-components/material-components-web-components#quick-start) for detailed instructions.

## API & Example Usage
If you don't see anything else below, click this button to see the API and the example usage:

[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://main--625eadb22bf40d003a32215a.chromatic.com/?path=/docs/data-table--standard)
npm package: @maicol07/mwa-icon-button
Description: An extension of MWC Icon Button
Latest version: 0.26.0
Deprecated: Use official M3 version since it can be sized

# `<mwa-icon-button>` [![Published on npm](https://img.shields.io/npm/v/@maicol07/mwa-icon-button.svg)](https://www.npmjs.com/package/@maicol07/mwa-layout-grid)

This is just an extension of the official [`<mwc-icon-button>` component](https://github.com/material-components/material-web/tree/master/packages/icon-button) supporting densities.
## Installation
[![See it on NPM!](https://img.shields.io/npm/v/@maicol07/mwa-icon-button?style=for-the-badge)](https://www.npmjs.com/package/@maicol07/mwa-layout-grid)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@maicol07/mwa-icon-button?style=for-the-badge)](https://bundlephobia.com/result?p=@maicol07/mwa-layout-grid)

| Package Manager | Command                        |
|-----------------|--------------------------------|
| npm             | `npm install @maicol07/mwa-icon-button` |
| yarn            | `yarn add @maicol07/mwa-icon-button`    |
| pnpm            | `pnpm add @maicol07/mwa-icon-button`    |

> NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve *bare module specifiers*, as well as transpilation and polyfills for Edge and IE11. See [here](https://github.com/material-components/material-components-web-components#quick-start) for detailed instructions.

## API & Example Usage
If you don't see anything else below, click this button to see the API and the example usage:

[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://master--625eadb22bf40d003a32215a.chromatic.com/?path=/docs/iconbutton)
npm package: @maicol07/mwa-layout-grid
Description: material compoments web components implementation of MDC Layout Grid
Latest version: 0.26.1
Deprecated: Upgraded to M3 version. New package: @maicol07/material-web-additions

# `<mwa-layout-grid>` [![Published on npm](https://img.shields.io/npm/v/@maicol07/mwa-layout-grid.svg)](https://www.npmjs.com/package/@maicol07/mwa-layout-grid)
A [Material Components](https://material.io/develop/) layout grid implementation using [Web Components](https://www.webcomponents.org/introduction)

Material design’s responsive UI is based on a 12-column grid layout. It has 12 columns on desktop, 8 columns on
tablet and 4 columns on phone.

MWC Layout Grid encapsulates [MDC Layout Grid](https://material.io/develop/web/components/layout-grid).

## Installation
[![See it on NPM!](https://img.shields.io/npm/v/@maicol07/mwa-layout-grid?style=for-the-badge)](https://www.npmjs.com/package/@maicol07/mwa-layout-grid)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@maicol07/mwa-layout-grid?style=for-the-badge)](https://bundlephobia.com/result?p=@maicol07/mwa-layout-grid)

| Package Manager | Command                                 |
|-----------------|-----------------------------------------|
| npm             | `npm install @maicol07/mwa-layout-grid` |
| yarn            | `yarn add @maicol07/mwa-layout-grid`    |
| pnpm            | `pnpm add @maicol07/mwa-layout-grid`    |

> NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve *bare module specifiers*, as well as transpilation and polyfills for Edge and IE11. See [here](https://github.com/material-components/material-components-web-components#quick-start) for detailed instructions.

## API & Example Usage
If you don't see anything else below, click this button to see the API and the example usage:

[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://main--625eadb22bf40d003a32215a.chromatic.com/?path=/docs/layoutgrid--basic)