使用 md-list-item 设计 angular material 联系表单

Question

我正在尝试创建一个应该类似于下图的联系信息表单，但是我遇到了一些困难：

为此，我想到了以下几点：

     <div layout-gt-sm="row" tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
  <div flex-gt-sm="50">
    <md-card>
      <md-list>
        <md-list-item>
          <div class="md-list-item-text">

            Name

          </div>

          <div>
            <p>
              <strong>John Smith</strong>
            </p>
          </div>

          <button md-button (click)="doNothing()"><md-icon md-font-set="material-icons" aria-label="view">navigate_next</md-icon></button>
        </md-list-item>
        <md-divider></md-divider>

        <md-list-item>
          <div class="md-list-item-text">
            <p>
              Email
            </p>
          </div>

          <div>
            <p>
              <strong>test@test.com</strong>
            </p>
          </div>
          <button md-button (click)="doNothing()"><md-icon md-font-set="material-icons" aria-label="view">navigate_next</md-icon></button>
        </md-list-item>
        <md-divider></md-divider>

        <md-list-item (click)="doNothing()">
          <div class="md-list-item-text">
            <p>
              Phone
            </p>
          </div>

          <div>
            <p>
              <strong>0123456789</strong>
            </p>
          </div>
          <button md-button (click)="doNothing()"><md-icon md-font-set="material-icons" aria-label="view">navigate_next</md-icon></button>
        </md-list-item>
        <md-divider></md-divider>

        <md-list-item>
          <div class="md-list-item-text">
            <p>
              Birhtday
            </p>
          </div>

          <div>
            <p>
              <strong>10-10-1980</strong>
            </p>
          </div>
          <button md-button (click)="doNothing()"><md-icon md-font-set="material-icons" aria-label="view">navigate_next</md-icon></button>
        </md-list-item>
        <md-divider></md-divider>
        <md-list-item>
          <div class="md-list-item-text">
            <p>
              Gender
            </p>
          </div>

          <div>
            <p>
              <strong>Male</strong>
            </p>
          </div>
          <button md-button (click)="doNothing()"><md-icon md-font-set="material-icons" aria-label="view">navigate_next</md-icon></button>
        </md-list-item>
        <md-divider></md-divider>
      </md-list>
    </md-card>
  </div>
</div>

上图如下所示：

如何将与第一张图片相似的列表项分成 3 份，以便名称出现在左侧，数据出现在中间，下一个箭头图标出现在右侧？
如何将其置于屏幕中央而不是左侧？
当我将鼠标悬停在 md-icons 上时，它的背景变为灰色。我如何保持白色背景而不更改它？
如何增加类似于初始表单的md-list-item的高度？

供您参考，这是一个 Angular 4 项目，我使用以下包：

  "dependencies": {
    "@angular/animations": "^4.2.0",
    "@angular/common": "^4.2.0",
    "@angular/compiler": "^4.2.0",
    "@angular/core": "^4.2.0",
    "@angular/flex-layout": "2.0.0-beta.8",
    "@angular/forms": "^4.2.0",
    "@angular/http": "^4.2.0",
    "@angular/material": "2.0.0-beta.6",
    "@angular/platform-browser": "^4.2.0",
    "@angular/platform-browser-dynamic": "^4.2.0",
    "@angular/platform-server": "^4.2.0",
    "@angular/router": "^4.2.0",
    "@covalent/core": "1.0.0-beta.5",
    "@covalent/dynamic-forms": "1.0.0-beta.5",
    "@covalent/highlight": "1.0.0-beta.5",
    "@covalent/http": "1.0.0-beta.5",
    "@covalent/markdown": "1.0.0-beta.5",
    "@ngx-translate/core": "^7.1.0",
    "@ngx-translate/http-loader": "^0.1.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "ionicons": "^3.0.0",
    "moment": "^2.18.1",
    "ng2-charts": "^1.6.0",
    "ng2-datetime-picker": "^0.15.1",
    "ng2-file-upload": "^1.2.1",
    "oidc-client": "^1.3.0",
    "rxjs": "^5.4.2",
    "showdown": "^1.7.1",
    "zone.js": "^0.8.16"
  },

更新 1：

现在输出占据屏幕的整个宽度，类似于下面，但我希望它显示为屏幕顶部中央的固定大小的框：

Answer 1

在 <md-list-item > 中使用 fxLayout="row" 并使用 fxFlex.

width

在<md-list-item>内使用fxLayoutAlign=" center"。
如果你不想要按钮效果，根本就不要使用按钮。我将其替换为 span 并添加了一个 class 以使光标 pointer 这将为跨度提供悬停效果。
md-list-item {min-height: 70px !important;}

完整 html:

<div class="big-box"> 
  <span><h1>This is a test for the width of the big Box</h1></span>
  <div flex-gt-sm="50">
    <md-card style="padding-left: 0; padding-right: 0">
      <md-list>

        <md-list-item   fxLayout="row" fxLayoutAlign=" center">

          <span fxFlex="35" class="md-list-item-text">Name</span>

          <span fxFlex="55">
              <strong>John Smith</strong>
          </span>

          <span fxFlex="20" (click)="doNothing()" fxLayoutAlign="center center" class="nav-button">
            <md-icon md-font-set="material-icons" aria-label="view">
              navigate_next
           </md-icon>
          </span>

        </md-list-item>

        <md-divider></md-divider>

        <md-list-item fxLayout="row" fxLayoutAlign=" center">
          <span fxFlex="35" class="md-list-item-text">Email</span>

          <span fxFlex="55">
              <strong>test@test.com</strong>
          </span>

          <span fxFlex="20" (click)="doNothing()" fxLayoutAlign="center center" class="nav-button">
            <md-icon md-font-set="material-icons" aria-label="view">
              navigate_next
           </md-icon>
          </span>

        </md-list-item>

        <md-divider></md-divider>

        <md-list-item fxLayout="row" (click)="doNothing()" fxLayoutAlign=" center">
          <span fxFlex="35" class="md-list-item-text">Phone</span>

          <span fxFlex="55">
              <strong>0123456789</strong>
          </span>

          <span fxFlex="20" (click)="doNothing()" fxLayoutAlign="center center" class="nav-button">
            <md-icon md-font-set="material-icons" aria-label="view">
              navigate_next
           </md-icon>
          </span>

        </md-list-item>

        <md-divider></md-divider>

        <md-list-item fxLayout="row" fxLayoutAlign=" center">
          <span fxFlex="35" class="md-list-item-text">Birthday</span>

          <span fxFlex="55">
              <strong>10-10-1980</strong>
          </span>

          <span fxFlex="20" (click)="doNothing()" fxLayoutAlign="center center" class="nav-button">
            <md-icon md-font-set="material-icons" aria-label="view">
              navigate_next
           </md-icon>
          </span>
        </md-list-item>

        <md-divider></md-divider>

        <md-list-item fxLayout="row" fxLayoutAlign=" center">
          <span fxFlex="35" class="md-list-item-text">Gender</span>

          <span fxFlex="55">
              <strong>Male</strong>
          </span>

          <span fxFlex="20" (click)="doNothing()" fxLayoutAlign="center center" class="nav-button">
            <md-icon md-font-set="material-icons" aria-label="view">
              navigate_next
           </md-icon>
          </span>

        </md-list-item>

        <md-divider></md-divider>

      </md-list>

    </md-card>

  </div>

</div>

css:

md-card {
  padding: 0 0 0 0;

}

md-list-item {
    min-height: 70px !important;

}

::ng-deep .mat-list .mat-list-item .mat-list-item-content, .mat-nav-list .mat-list-item .mat-list-item-content {
    width: 99vw;
}

.nav-button{
  cursor: pointer;
}

.big-box{
  width: 70%;
  margin: 0 auto;
}

Plunker demo

使用 md-list-item 设计 angular material 联系表单

Styling an angular material contact form using md-list-item

angular-directive

angular-material2

angular-flex-layout