mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
Material Design Web Components
1bf8b5fbf9
PiperOrigin-RevId: 629196509 |
||
---|---|---|
.github | ||
button | ||
catalog | ||
checkbox | ||
chips | ||
color | ||
dialog | ||
divider | ||
docs | ||
elevation | ||
fab | ||
field | ||
focus | ||
icon | ||
iconbutton | ||
internal | ||
labs | ||
list | ||
menu | ||
progress | ||
radio | ||
ripple | ||
scripts | ||
select | ||
slider | ||
switch | ||
tabs | ||
testing | ||
textfield | ||
tokens | ||
typography | ||
.gitignore | ||
.release-please-manifest.json | ||
all.ts | ||
CHANGELOG.md | ||
CODE_OF_CONDUCT.md | ||
commitlint.config.js | ||
common.ts | ||
CONTRIBUTING.md | ||
LICENSE | ||
package-lock.json | ||
package.json | ||
README.md | ||
release-please-config.json | ||
SECURITY.md | ||
tsconfig.json | ||
web-test-runner.config.js |
Material Web
@material/web
is a library of
web components
that helps build beautiful and accessible web applications. It uses
Material 3, the latest version of Google's
open-source design system.
Resources
Quick start
Tip: Using Angular? We recommend using Angular Material components instead.
This code snippet is a buildless example that loads @material/web
from a CDN.
Check out the quick start guide to install and build
for production.
<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>