Skip to content
TopicTracker
出典 HackerNews原文を表示
翻訳言語翻訳言語

Show HN: Material 3 Expressive Web Components

完全にネイティブのWeb Componentsとして実装されたMaterial Design 3コンポーネントライブラリ。フレームワーク非依存で、公式トークンシステムに準拠し、ダイナミックカラーやアクセシビリティ標準を内蔵。表現力豊かな拡張機能も備えた、仕様に忠実なMaterial Design 3の実装を提供する。

背景メモ

- Googleの「Material Design 3」(通称Material You)は、Android 12以降のUIデザインシステム。従来のMaterial Design 2から刷新され、**動的カラー**(端末の壁紙からテーマカラーを自動抽出)や**Expressive(表現的)なタイポグラフィ・アイコン**が特徴。<br> - 本記事で紹介されている「M3E」は、このMaterial 3を**Web Components**(ブラウザ標準のカスタム要素API)でフル実装したライブラリ。ReactやVueといった特定のフレームワークに依存せず、どんなWebアプリでも利用できる。<br> - Web Componentsは近年、Web標準ベースのUIコンポーネント共有手段として再注目されている。Google公式のMaterial Web Components(MWC)も存在するが、M3Eはより正確なスペック準拠とExpressive要素のサポートを掲げている。<br> - この手のライブラリが「Show HN」(Hacker News上で自作プロジェクトを披露する場)に投稿されるのはよくあるパターンだが、Google自身のMaterial実装が複数乱立している状況への一つの代替案として、コミュニティの関心を集めている。

関連記事