Рабочий пример компонента Material Design LinearProgress

Прилагаются псевдокоды для попытки создать рабочий прототип компонента 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. Линейный прогресс, материальный дизайн для веба
  2. Linear Progress Demo, Дизайн материалов для Web
Источник

1 ответ

TL;DR

Просто замените строку JavaScript overallProgress.setProgress(0.5);в overallProgress.progress=0.5;

подробности

Я копаю исходный код MDCLinearProgress, и оказывается, что он был реализован с использованием установщиков функций JavaScript. Работа функции-установщика заключается в объявлении класса как метода, но на самом деле установить значение, обрабатывая его как свойство.

Поэтому вместо использования setProgress(value)замените его на progress=value,

Источник
Другие вопросы по тегам