角度材料:我如何在块之间定位md按钮?

时间:2016-09-16 16:44:16

标签: angularjs angular-material

我如何定位md-button组件如下图所示:

button positioned between image card and info

我试过但没有成功,我在角质材料文档中搜索这样的东西,但我一无所获。

这是我的傻瓜:https://plnkr.co/edit/V4UEjEB0PVFSWqsMeF7q?p=preview

<body ng-controller="MainCtrl">
   <md-content>
     <md-toolbar class="md-hue-2">
      <div class="md-toolbar-tools">
        <md-button class="md-icon-button" aria-label="Back" ng-disabled="false">
          <md-icon class="material-icons">arrow_back</md-icon>
        </md-button>
        <span flex></span>
        <md-button class="md-icon-button" aria-label="More">
          <md-icon class="material-icons">more_vert</md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <div class="card-image" flex>
      <img src="https://image.freepik.com/free-vector/landscape-with-mounstains-in-flat-design_23-2147540322.jpg" alt="">
    </div>
    <md-list>
      <md-list-item class="md-3-line">
        <md-icon class="material-icons">phone</md-icon>
        <div class="md-list-item-text">
          <h3>+55 (11) 9999-9999</h3>
          <p>Home</p>
        </div>
        <md-icon class="material-icons md-secondary" ng-click="openChat()" aria-label="chat">chat</md-icon>
      </md-list-item>
      <md-list-item class="md-2-line">
        <md-icon class="material-icons">phone</md-icon>
        <div class="md-list-item-text">
          <h3>+55 (11) 99999-9999</h3>
          <p>Cellphone</p>
        </div>
        <md-icon class="material-icons md-secondary" ng-click="openChat()" aria-label="chat">chat</md-icon>
      </md-list-item>
      <md-divider md-inset></md-divider>
      <md-list-item class="md-2-line">
        <md-icon class="material-icons">email</md-icon>
        <div class="md-list-item-text">
          <h3>foo@foo.com</h3>
          <p>Work</p>
        </div>
      </md-list-item>
      <md-list-item class="md-2-line">
        <md-icon class="material-icons">email</md-icon>
        <div class="md-list-item-text">
          <h3>jhon.doe@foo.com</h3>
          <p>Personal</p>
        </div>
      </md-list-item>
      <md-divider md-inset></md-divider>
    </md-list>
   </md-content>
  </body>

app.js:

(function() {
  'use strict';

  angular
  .module('myapp', ['ngMaterial', 'ngAria', 'ngMessages'])
  .controller('MainCtrl', function() {

  });

}());

1 个答案:

答案 0 :(得分:0)

你去了 - CodePen

标记

longPress