如何使用 Material Components Web Foundations答案

【问题标题】：How to use Material Components Web Foundations如何使用 Material Components Web Foundations
【发布时间】：2018-09-25 18:32:26
【问题描述】：

使用材料组件，我正在尝试弄清楚如何使用组件的基础方法。

举个例子，我有

<div role="progressbar" class="mdc-linear-progress">
  <div class="mdc-linear-progress__buffering-dots"></div>
  <div class="mdc-linear-progress__buffer"></div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
</div>

在我的 JS 中有

const bar = $('.mdc-linear-progress')[0];

const MDCLinearProgress = mdc.linearProgress.MDCLinearProgress;
const MDCLinearProgressFoundation = mdc.linearProgress.MDCLinearProgressFoundation;

const progress = new MDCLinearProgress(bar);
const progressFoundation = new MDCLinearProgressFoundation(bar);

progressFoundation.setProgress(0.5);

如您所见，我的目标是尝试使用 MDCLinearProgressFoundation 类中的 setProgress 之类的方法。虽然这不起作用，我不确定我做错了什么，因为它也没有出错。

Codepen - https://codepen.io/ErraticFox/pen/LdwYxb

【问题讨论】：

标签： javascript html material-components-web

【解决方案1】：

查看文档，在 MDCLinearProgress 上，设置进度方法是一个属性设置器（这是一个在写入给定属性时调用的函数）。因此，它不是作为函数调用的，而是像这样（其中 myDiv 是指向您在问题中创建的 div 树的指针）：

var mlp = new mdc.linearProgress.MDCLinearProgress(myDiv);
mlp.progress = 0.5;

希望这会有所帮助！

【讨论】：