I was able to get a three-line list component:

  @import "@material/list/mdc-list";
  @import "@material/feature-targeting/functions";
  @import "@material/feature-targeting/mixins";

  $query: mdc-feature-all();
  $feat-structure: mdc-feature-create-target($query, structure);

  .mdc-list--three-line .mdc-list-item__text {
    @include mdc-feature-targets($feat-structure) {
      align-self: flex-start;
    }
  }

  .mdc-list--three-line .mdc-list-item {
    @include mdc-feature-targets($feat-structure) {
      height: 92px;
    }
  }

  .mdc-list--three-line.mdc-list--dense .mdc-list-item,
  .mdc-list--avatar-list.mdc-list--dense .mdc-list-item {
    @include mdc-feature-targets($feat-structure) {
      height: 80px;
    }
  }

<ul class="mdc-list demo-list mdc-list--three-line mdc-list--avatar-list">  
  <li class="mdc-list-item" tabindex="0">
    <span class="mdc-list-item__graphic" style="size:2em;">W</span>
    <span class="mdc-list-item__text">
      <span class="mdc-list-item__primary-text">List item title</span>
      <span class="mdc-list-item__secondary-text">Secondary text</span>
      <span class="mdc-list-item__secondary-text">Secondary text</span>
    </span>
    <span class="mdc-list-item__meta">info</span>
  </li>
</ul>

DISCLAIMER: This is the first thing I did that achieved the desired effect. I didn't dig any further, read the material.io tome, or teach myself a new style sheet language. Since, I don't know Sass or SCSS, this is likely not an ideal implementation. 😅

Investigate adding Three-Line List support to List Component #31

Description

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions