material-web README

The project's README from github.com/material-components/material-web. As one markdown file: README.md.

Material Web

A collection of Material web components

Published on npm Join our Discord Test status npm Downloads jsDelivr hits (npm)

@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.

Note: MWC is in maintenance mode pending new maintainers.

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>

material-web (material-components/material-web)

Searching Database…

11.3K ·GitHub
Material-web
Что это такое?Material Web (@material/web) — это библиотека веб-компонентов от Google, которая реализует Material 3, последнюю версию их дизайн-системы с открытым исходным кодом, для создания доступных веб-интерфейсов.
Это фреймворк или набор готовых компонентов для подключения?Это библиотека веб-компонентов на основе стандартов, построенная на Lit, а не полноценный фреймворк, поэтому отдельные компоненты можно просто подключить к любой веб-странице или приложению.
Как начать пользоваться компонентами?Самый быстрый старт — пример без сборки, который загружает @material/web напрямую из CDN; для продакшена следуйте руководству по быстрому старту, чтобы правильно установить и собрать компоненты.
От чего это зависит?Компоненты построены на Lit, а также на вспомогательных пакетах вроде @lit/context, safevalues и tslib, поэтому Lit — основная зависимость времени выполнения.
Проект активно поддерживается?Нет — в README указано, что проект находится в режиме поддержки, пока не найдутся новые мейнтейнеры, так что стоит ожидать медленной разработки новых функций или её отсутствия.
Стоит ли использовать это, если я делаю проект на Angular?Мейнтейнеры прямо рекомендуют для Angular использовать компоненты Angular Material вместо этой библиотеки.
Где это работает?Это веб-компоненты, не привязанные к фреймворку, которые работают в браузере и подходят для любого веб-приложения независимо от JS-фреймворка (кроме Angular, где предпочтителен Angular Material).
Что такое Material 3?Это последняя дизайн-система Google с открытым исходным кодом, а эта библиотека — официальная реализация её компонентов и стилей в виде веб-компонентов.
Можно ли узнать размер компонента до его подключения?Да, в проекте есть документация по размеру сборки, так что можно увидеть, сколько весит каждый компонент, прежде чем его подключать.
Работает ли это во всех браузерах?В README есть ссылки на отдельные документы о поддержке браузеров и FAQ, что подразумевает, что поддержка различается и её стоит проверить для браузеров, которые вам нужны.
What are similar projects?mdb-ui-kit, material-design-lite, lit, material, pwa-install, material-components-web, semi-design, vuetify
Which topics is it in?material-you, material, material3, web-components, scss, material-design, design-system, google, accessibility, component-library, css, ui
Creator
material-components
Size
51.6 MB
Stars
11.3K
Updated
CommitOct 16Releasev2.5.0Jul 15
Age
8y
Commits · 90 Days