如何使用 Material Components Web Foundations

使用材质组件，我试图弄清楚如何使用组件基础的方法。

举个例子，我有

<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);

正如你所看到的，我的目标是尝试使用类似的方法setProgress来自MDCLinearProgressFoundation班级。虽然这不起作用，而且我不确定我做错了什么，因为它也没有给出错误。

代码笔-https://codepen.io/ErraticFox/pen/LdwYxb https://codepen.io/ErraticFox/pen/LdwYxb

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

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

希望这可以帮助！