Question

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

举个例子，我有

<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等方法。虽然这不起作用，但我不确定我做错了什么，因为它没有给出任何错误。

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

Answer 1

查看文档，在MDCLinearProgress上，set progress方法是一个属性setter（这是一个在写入给定属性时调用的函数）。因此，它不被称为函数，但是像这样（其中myDiv是指向你在问题中创建的div树的指针）：

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

希望这有帮助！

如何使用Material Components Web Foundations

1 个答案: