Рабочий пример компонента Material Design LinearProgress - PullRequest
Новая
       27

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

0 голосов
/ 27 декабря 2018

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

1 Ответ

0 голосов
/ 27 декабря 2018

TL; DR

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

Подробности

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

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

...