category

Material Web Components リスト

Web向けのマテリアルデザインフレームワークのMaterial Components for Web(MDC)をWeb ComponentsとしてリパックしたMaterial Web Components(MWC)というプロジェクトがPolymerプロジェクトから提供され始めています(2018/5/9、Google I/O2018でリリース)。

最新のコンポーネントを抜粋で紹介します。

mwc-button

ボタンです。ボタンのラベルはlabel属性またはタグ内のどちらでも指定可能です。
表示例はMDCのデモが参考になります。

<mwc-button [icon="string"] [raised/unelevated/outlined/dense] [label="string"] [disabled]></mwc-button>

※ なお、タグ中の[ ]は任意指定であることを示すもので実際のコードに記載するものではありません

mwc-icon

アイコンを単体表示するコンポーネントです(ボタンなど一部のコンポーネントはicon属性に指定すると適切にレイアウト表示できます)。

アイコンの名称はMaterial Designのアイコン一覧で確認できます。

<mwc-icon>icon_name</mwc-icon>

npm未リリースのコンポーネント

現状、開発中でnpm未リリースですが、リポジトリに存在しているコンポーネントもあります。

mwc-chip

タグなどに用いるチップです。表示例はMDCのデモが参考になります。

<mwc-chip-set [choise] [filter]>
<mwc-chip [leadingIcon="string"] [trailingIcon="string"] [active] [label="string"]></mwc-chip>
</mwc-chip-set>

mwc-card

カードです。現状では大外のカード枠のみ表示可能です。

<mwc-card [stroke]>innerHTML</mwc-card>

mwc-dialog

モーダルダイアログです。show()close()というメソッドを持っています。また、openedというプロパティのtruthy/falsy値設定でも切り替わります。

<mwc-dialog [headerLabel="String"] [acceptLabel="OK"] [declineLabel="Cancel"] [scrollable]>innerHTML</mwc-dialog>

まとめ

Material Web ComponentsはPolymerが従来提供してきたPaperElementを置き換える位置付けのコンポーネント群です。
リリース済みのコンポーネントは @material/mwc-button などの名称でnpm install可能です。
CSSなどはベースのMDC(Material Components for Web)のものを活用しているため、リリース初期段階ながら見た目は整っています。

また、Web Componentsであるため、バンドルしたJavascriptを読み込めばHTMLからも利用できます。

MDCには他にも多数のコンポーネントがあり、移植には時間がかかりそうです。
コンポーネント化にあたり、MDCが提供するadaptorインターフェースを利用しているため、自分でMWC風コンポーネントを実装することも不可能ではありません(VueJS向けアダプターの実装が先行しており参考になります)。