物料设计LinearProgress组件的工作示例

Question

为尝试制作 Linear Progress 组件的工作原型而附上的伪代码。

HTML

<script src="https://unpkg.com/material-components-web@0.42.1/dist/material-components-web.min.js"></script>
...
<div role="progressbar" class="mdc-linear-progress" id="my-progress-bar">
    <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>

JavaScript

const overallProgress = mdc.linearProgress.MDCLinearProgress.attachTo(document.getElementById('my-progress-bar'));
overallProgress.setProgress(0.5);

上述代码旨在显示50％的进度。该原型不起作用。它的哪一部分可能出了问题？以下参考文献是我从官方参考文献中可以获得的最佳参考。

参考文献

1. Linear Progress, Material Design for Web
2. Linear Progress Demo, Material Design for Web

Answer 1

TL; DR

只需替换JavaScript行overallProgress.setProgress(0.5); 进入overallProgress.progress=0.5;

详细信息

我挖了source-code of MDCLinearProgress，事实证明它是使用JavaScript function setters实现的。函数设置器的工作方式是通过在类中声明为方法，而实际上设置值的方式是将其视为属性。

因此，不要使用setProgress(value)，而要使用progress=value。