mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
1.9 KiB
1.9 KiB
Quick start
Install
Install Material web components using npm and node.
npm install @material/web
Import
Import element definitions from
@material/web/<component>/<component-variant>.js
.
// index.js
import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/checkbox/checkbox.js';
Usage
Use the <component-name>
tag in HTML markup. Refer to the
component docs for more guidance on using each component.
<script type="module" src="./index.js"></script>
<label>
Material 3
<md-checkbox checked></md-checkbox>
</label>
<md-outlined-button>Back</md-outlined-button>
<md-filled-button>Next</md-filled-button>
Building
Material web components uses bare module specifiers that must be resolved with tools until import maps are adopted.
We recommend following lit.dev's modern build for production for a more in-depth build guide.
Rollup quick start
For a quick start, we recommend using Rollup to resolve bare module specifiers into a bundled file.
Install Rollup and a plugin to resolve bare module specifiers.
npm install rollup @rollup/plugin-node-resolve
Create a bundle from an entrypoint index.js
file and use it in a <script>
"src"
attribute.
npx rollup -p @rollup/plugin-node-resolve index.js > bundle.js
<script src="./bundle.js"></script>