trimox / angular-mdc-web

Angular wrapper for Material Design (Web) Components
https://trimox.github.io/angular-mdc-web
MIT License
517 stars 87 forks source link

[data-table]: Add component for in progress state #2176

Open trimox opened 4 years ago

trimox commented 4 years ago

reference https://github.com/material-components/material-components-web/pull/5732

Update documentation to include:

@use "@material/checkbox/mdc-checkbox"; // Required only for data table with row selection.
@use "@material/linear-progress/mdc-linear-progress"; // Required only if data table has progress state.
@use "@material/data-table/mdc-data-table";

Create optional table progress indicator component based on upstream spec:

 <div class="mdc-data-table__progress-indicator">
    <div class="mdc-data-table__scrim"></div>
    <div class="mdc-linear-progress mdc-linear-progress--indeterminate" role="progressbar" aria-label="Data is being loaded...">
      <div class="mdc-linear-progress__buffer">
        <div class="mdc-linear-progress__buffer-bar"></div>
        <div class="mdc-linear-progress__buffer-dots"></div>
      </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>
  </div>