0

マテリアル コンポーネントから始めました。私はしようmdc-icon-toggleとしています、HTMLコード

<i class="mdc-icon-toggle material-icons" role="button" aria-pressed="false" aria-label="Add to favorites" tabindex="0"         
    data-toggle-on='{"label": "Remove from favorites", "content": "favorite"}'
    data-toggle-off='{"label": "Add to favorites", "content": "favorite_border"}' 
    data-mdc-auto-init="MDCIconToggle">
      favorite_border
 </i>

JS コード

const iconEl = document.querySelector('.mdc-icon-toggle');

iconEl.addEventListener('MDCIconToggle:change', ({detail}) => {
  alert(detail.isOn)
});

基本的な機能は正常に動作しています。イベントをリッスンすることはできますが、アイコンをクリックすると波及効果が正しく機能しません。アイコンの周りに決して去る. これはラジオボタンでもあるので、何か不足していますか？

4

1 に答える 1

0

私は今MDCを勉強しています。

次のフォームを使用して、BODY タグの最後に JavaScript コードを追加してください。

<i class="mdc-icon-toggle material-icons" role="button" aria-pressed="false" aria-label="Add to favorites" tabindex="0"         
    data-toggle-on='{"label": "Remove from favorites", "content": "favorite"}'
    data-toggle-off='{"label": "Add to favorites", "content": "favorite_border"}'>
      favorite_border
 </i>


<script type="text/javascript">
(function() {
      /* MDC Ripple for Toggle button */
      var nodes = document.querySelectorAll('.mdc-icon-toggle');
      for (var i = 0, node; node = nodes[i]; i++) {
        mdc.iconToggle.MDCIconToggle.attachTo(node);
      }
})();
</script>
于 2018-07-30T16:23:38.327 に答える