概要

私は友人のために Web サイト (マルチページ) に取り組んでおり、そのスタイリングのベースとして Web 用の Google の Material Design Components (MDC) を使用することにしました。Functions と Hosting を使用して、Firebase でホストしたいと考えています。

私は 1 週間強に取り組んでおり、Node.js、Express、およびEJSを使用して複数のページをレンダリングできるようになりましたが、MDC がどのように機能するようになるのか理解できないようですこの環境。

質問

この作品を見たことはありますか？もしそうなら、それはどのように行われ、どこから始めるべきですか?

サイドノート

この quideを使用して、ローカルで実行することができました。これを機能させる主なファイルは次のとおりです。

webpack.config.js

index.html

パッケージ.json

app.scss

現在、「手動インスタンス化」メソッドを使用していますが、うまく機能します。「自動インスタンス化」メソッドに気付きましたが、機能しません。この方法を使用するには正確に何が必要ですか？

コードを使用する場合:

「Uncaught ReferenceError: mdc is not defined」というエラー ログが表示されます。

ここを参照してください: https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs#automatic-instantiation

ありがとう。

Rails 5 を実行しているアプリケーションがあります。スタイリングに mdc コンポーネントを使用しています。new mdc.mdcTextFeild(.....) を呼び出す JavaScript 関数があります。

これは、ブラウザ環境では問題なく動作します。しかし、ポルターガイスト ドライバーでカピバラを使用してテストしているときに、HTML 内に application-XXXXXX.js が存在することを確認できますが、参照エラー mdc not found! がスローされます。

web-pack を使用して mdc コンポーネントをロードしています。正しくコンパイルされ、スクリプトがロードされています。ただし、ポルターガイスト内のウィンドウ オブジェクトには mdc が定義されていません。

Node.js 以外のアプリでマテリアル デザインを使用しています。HTML プロジェクトでMaterial アウトライン テキスト フィールド (先頭のアイコン付き)を使用する必要があります。Material.io Web サイトには、一部のコンポーネントの JavaScript コードが表示されますが、他のコンポーネントは表示されません。アウトライン化されたテキスト フィールド コンポーネントを HTML プロジェクトに追加するにはどうすればよいですか?

以下は私のコードです：

このコードのフィドル: jsfiddle