如何使用Material Components Web Foundation [英] How to use Material Components Web Foundations

问题描述

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

Using Material Components, I am trying to figure out how to use the methods of the Foundations of the 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);

如您所见，

我的目标是尝试使用MDCLinearProgressFoundation类中的setProgress之类的方法.虽然这不起作用，但是我也不确定自己在做什么，因为它也不会出错.

as you can see my goal is trying to use methods like setProgress from the MDCLinearProgressFoundation class. Though this isn't working and I'm unsure as to what I'm doing wrong as it gives no error either.

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

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

推荐答案

在文档上，在MDCLinearProgress上，set progress方法是一个属性设置器(该函数是在写入给定属性时调用的函数).因此，它不是函数，而是这样(其中myDiv是指向您在问题中创建的div树的指针):

Looking at the documentation, on MDCLinearProgress, the set progress method is a property setter (which is a function which is invoked when a given property is written to). As such, it isn't called as a function, but like so (where myDiv is a pointer to the div tree you created in your question):

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

希望这会有所帮助！

这篇关于如何使用Material Components Web Foundation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！