代码之家 › 专栏 › 技术社区 › MHOOS

使用md列表项设置角度材质接触表单的样式

angular-flex-layout angular-material2 angular-directive

MHOOS · 技术社区 · 7 年前

我正在尝试创建一个类似下图的联系信息表单,但我面临一些困难:

为此,我提出了以下建议:

     <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>

上图如下所示:

我该如何将其放置在屏幕中央而不是左侧?
如何增加md列表项的高度(类似于初始表单)?

供您参考,这是一个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:

1 回复 | 直到 7 年前

Nehal 7 年前

使用 fxLayout="row" 在…内 <md-list-item > width 使用 fxFlex .
fxLayoutAlign=" center" 在…内 <md-list-item> .
span pointer 这将给跨度带来悬停效果。
md-list-item {min-height: 70px !important;}

<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