問題タブ [material-components-web]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - Material Design Components for Webでプライマリカラーとセカンダリカラーを設定するには?
詳細
私は Web 用のマテリアル コンポーネント (MDC) を調べ、CDN (ホストされた CSS および JavaScript ライブラリ) を使用することにしました。
https://unpkg.com/material-components-web@latest/dist/material-components-web.min.csshttps://unpkg.com/material-components-web@latest/dist/material-components-web.min.js
これは、[ 1 ]の Getting-started-docs-page によるものです。同様に、MDC には、テーマの色を簡単にカスタマイズできるこの前身のスラッシュ ライター ライブラリマテリアル デザイン ライト (MDL) があります。これは、カスタム CSS テーマ ビルダーを使用して行うことができます。[ 2 ]
ただし、MDC Web のテーマ ガイドによると: [ 3 ]
... 現時点では、MDC Web は Sass と CSS カスタム プロパティを使用したテーマ設定をサポートしており、そのサービスが利用可能になったら、CDN のサポートも計画しています。
現在、MDC の CDN URL を介してテーマの色を変更することはできません。
もう一度質問に戻りますが、CDN を使用して新しい MDC for Web でプライマリ カラーとセカンダリ カラーを設定するにはどうすればよいでしょうか?
参考文献
javascript - 2 つの MDC ドロワーの同期
私のページには、同じアイテムを持つマテリアル デザイン コンポーネントの引き出しが 2 つあります。1 つはデスクトップ/タブレット表示用に永続的であり、もう 1 つはモバイル表示用に非表示/モーダルです。
どちらも初期化されます:
私は、一方を他方に切り替えるJavaScriptを持っています:
残っているバグは、1 つのドロワーで項目を選択しても、他のドロワーで同じ項目が選択されないことです。あるサイズから別のサイズに移行すると、選択したアイテムがコンテンツと一致しなくなります。
2 つのドロワーをリンクして、一方を選択すると他方の状態が変わるようにすることはできますか (特に、「もう一方の」ドロワーでイベントをトリガーしたり、再帰ループのクロス通知ループに入ったりすることなく)。
編集:賞金を追加しました。完全なソース。