material-web

Material Web は、material-components 組織によって管理されているウェブコンポーネントライブラリです。その目的は、美しくアクセシブルなウェブアプリケーションの構築を支援することであり、Google のオープンソースデザインシステムの最新バージョンである Material 3 を実装しています。 提供内容 - md-checkbox、md-radio、md-outlined-text-field、md-outlined-button、md-icon-button など、プレーンな HTML で使用できるカスタム要素（md- プレフィックス付き）のコレクション。 - コンポーネントセット全体をインポートする共通の "all.js" エントリポイントと、より選択的なロードのための個別のコンポーネントモジュール。 - typescale スタイルモジュール (md-typescale-styles.js) によるタイポグラフィサポート。これは document.adoptedStyleSheets にプッシュできる採用可能なスタイルシートを公開します。md-typescale-display-medium や md-typescale-body-medium などのユーティリティクラスは、Material の typescale にマッピングされています。 README には、import map とモジュールスクリプトを介して CDN からライブラリをロードし、Google Fonts から Roboto ウェブフォントをロードする、ビルド不要のクイックスタート例が示されています。ドキュメント内の別のクイックスタートガイドでは、本番環境向けのインストールとビルドについて説明しています。 ドキュメントとリソース - docs/intro.md - 導入 - docs/roadmap.md - ロードマップ - docs/components/ - コンポーネントごとのドキュメント - docs/size.md - バンドルサイズ情報 - docs/support.md - ブラウザサポートと FAQ - docs/quick-start.md - インストールと本番ビルドのガイダンス プロジェクトの状態 - README には、MWC (Material Web Components) が新しいメンテナーを待つメンテナンスモードにあることが明記されており、GitHub のディスカッションへのリンクが貼られています。長期的なプロジェクトで検討している場合は、この点に留意する必要があります。 - Angular ユーザーには、代わりに Angular Material コンポーネントの使用が推奨されています。 配布とライセンスのコンテキスト - npm に @material/web として公開されており、バージョンとダウンロード統計がバッジで表示されています。また、esm.run や jsDelivr などの CDN サービス経由でもアクセス可能です。 - 継続的インテグレーションのテストステータスは GitHub Actions ワークフローバッジを通じて公開されており、リポジトリではコミュニティサポートのために Lit Discord チャットが案内されています。 典型的な利用方法 これらは標準的なウェブコンポーネントであるため、フレームワークに依存せず、静的サイト、サーバーレンダリングページ、JavaScript フレームワークなど、カスタム要素をサポートするあらゆるページやアプリケーションに導入できます。スタイリングとテーマ設定は Material 3 の規約に従い、フォーム関連のコントロールはネイティブの HTML フォームで動作します。