用md-list项目设计角质材料接触面的造型

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>

上面的内容如下：

​

​

1. 我如何划分我的列表项目，类似于第一张图片3，使名称出现在左边，数据显示在中间和下一个箭头图标在右边？
2. 我将如何将它定位在屏幕的中心而不是左边？
3. 当我悬停在md图标上时，它的背景变成灰色。我如何保持白色背景而不改变它？
4. 如何增加md-列表项目的高度，类似于最初的形式？

关于您的信息，这是一个Range4项目，我使用以下软件包：

  "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

1. 在fxLayout="row"中使用<md-list-item >，并使用fxFlex拆分width的3项。
2. 在fxLayoutAlign=" center"内部使用<md-list-item>。
3. 如果你不想要按钮效果，就不要使用按钮。我用span替换了它，并添加了一个类来使游标pointer，这将给span带来悬停效应。
4. 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;
}

柱塞演示

​

​