mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
docs: update readme and quick start
PiperOrigin-RevId: 623284221
This commit is contained in:
Elizabeth Mitchell
Copybara-Service
parent
7a6cf16a4e
commit
69b4e9472b
86
README.md
86
README.md
@ -1,21 +1,83 @@
|
||||
# Material Web
|
||||
|
||||
Material
|
||||
[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)<!-- {.external} -->
|
||||
is a UI toolkit to build customizable and accessible web applications.
|
||||
<img src="./docs/images/material-web.gif"
|
||||
title="Material web components"
|
||||
alt="A collection of Material web components"
|
||||
style="border-radius: 32px">
|
||||
|
||||
[Material 3](https://m3.material.io/)<!-- {.external} --> is the latest version of
|
||||
Google's open-source design system.
|
||||
[](https://www.npmjs.com/package/@material/web)
|
||||
[](https://lit.dev/discord/)
|
||||
[](https://github.com/material-components/material-web/actions/workflows/test.yml)
|
||||
[](https://npm-stat.com/charts.html?package=%40material%2Fweb)
|
||||
[](https://www.jsdelivr.com/package/npm/@material/web?tab=stats)
|
||||
|
||||
`@material/web` is a library of
|
||||
[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)<!-- {.external} -->
|
||||
that helps build beautiful and accessible web applications. It uses
|
||||
[Material 3](https://m3.material.io/)<!-- {.external} -->, the latest version of Google's
|
||||
open-source design system.
|
||||
|
||||
## Resources
|
||||
|
||||
- [Introduction](./docs/intro.md)
|
||||
- [Roadmap](./docs/roadmap.md)
|
||||
- [Component docs](./docs/components/)
|
||||
- [Bundle size](./docs/size.md)
|
||||
- [Browser support and FAQ](./docs/support.md)
|
||||
|
||||
## Quick start
|
||||
|
||||
> Tip: Using Angular? We recommend using
|
||||
> [Angular Material](https://material.angular.io/)<!-- {.external} --> components
|
||||
> instead.
|
||||
|
||||
**Resources**
|
||||
This code snippet is a buildless example that loads `@material/web` from a CDN.
|
||||
Check out the [quick start](./docs/quick-start.md) guide to install and build
|
||||
for production.
|
||||
|
||||
- [Introduction](./docs/intro.md)
|
||||
- [Roadmap](./docs/roadmap.md)
|
||||
- [Quick start](./docs/quick-start.md)
|
||||
- [Bundle sizes](./docs/size.md)
|
||||
- [Component docs](./docs/components/)
|
||||
- [Browser support and FAQ](./docs/support.md)
|
||||
<!-- LINT.IfChange -->
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"@material/web/": "https://esm.run/@material/web/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module">
|
||||
import '@material/web/all.js';
|
||||
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
|
||||
|
||||
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="md-typescale-display-medium">Hello Material!</h1>
|
||||
<form>
|
||||
<p class="md-typescale-body-medium">Check out these controls in a form!</p>
|
||||
<md-checkbox></md-checkbox>
|
||||
<div>
|
||||
<md-radio name="group"></md-radio>
|
||||
<md-radio name="group"></md-radio>
|
||||
<md-radio name="group"></md-radio>
|
||||
</div>
|
||||
|
||||
<md-outlined-text-field label="Favorite color" value="Purple"></md-outlined-text-field>
|
||||
|
||||
<md-outlined-button type="reset">Reset</md-outlined-button>
|
||||
</form>
|
||||
<style>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
```
|
||||
|
||||
<!-- LINT.ThenChange(./g3doc/docs/quick-start.md) -->
|
||||
|
||||
BIN
docs/images/material-web.gif
Normal file
BIN
docs/images/material-web.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 865 KiB |
@ -8,7 +8,7 @@ order: 2
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2024-04-01' }
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2024-04-09' }
|
||||
tag: 'docType:gettingStarted'
|
||||
*-->
|
||||
|
||||
@ -16,6 +16,60 @@ tag: 'docType:gettingStarted'
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
## CDN
|
||||
|
||||
For fast prototyping, we recommend using [esm.run](https://esm.run/)<!-- {.external} -->,
|
||||
a CDN that allows you to use `@material/web` without installing and building
|
||||
from NPM.
|
||||
|
||||
<!-- LINT.IfChange -->
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"@material/web/": "https://esm.run/@material/web/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module">
|
||||
import '@material/web/all.js';
|
||||
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
|
||||
|
||||
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="md-typescale-display-medium">Hello Material!</h1>
|
||||
<form>
|
||||
<p class="md-typescale-body-medium">Check out these controls in a form!</p>
|
||||
<md-checkbox></md-checkbox>
|
||||
<div>
|
||||
<md-radio name="group"></md-radio>
|
||||
<md-radio name="group"></md-radio>
|
||||
<md-radio name="group"></md-radio>
|
||||
</div>
|
||||
<md-outlined-text-field label="Favorite color" value="Purple"></md-outlined-text-field>
|
||||
<md-outlined-button type="reset">Reset</md-outlined-button>
|
||||
</form>
|
||||
<style>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
```
|
||||
|
||||
<!-- LINT.ThenChange(../../README.md) -->
|
||||
|
||||
For production, follow the [install](#install) and [build](#building) steps
|
||||
below.
|
||||
|
||||
## Install
|
||||
|
||||
<!--#include file="../googlers/quick-start-install.md" -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user