angularjs – Angular-Material：什么是md-tile-left和md-tile-c

发布时间：2020-12-17 17:14:24 所属栏目：安全来源：网络整理

导读：我正在阅读Angular-Material-site上的 example for md-list(和md-item).在源代码中我看到了这个html： div ng-controller="AppCtrl" md-content md-list md-item ng-repeat="item in todos" md-item-content div class="md-tile-left" img ng-src="{{item.fa

我正在阅读Angular-Material-site上的 example for md-list(和md-item).在源代码中我看到了这个html：

<div ng-controller="AppCtrl">
  <md-content>
    <md-list>
      <md-item ng-repeat="item in todos">
        <md-item-content>
          <div class="md-tile-left">
              <img ng-src="{{item.face}}" class="face" alt="{{item.who}}">
          </div>
          <div class="md-tile-content">
            <h3>{{item.what}}</h3>
            <h4>{{item.who}}</h4>
            <p>
              {{item.notes}}
            </p>
          </div>
        </md-item-content>
      </md-item>
    </md-list>
  </md-content>
</div>

但是我没看到什么是md-tile-left和md-tile-content,我在lists-example的源代码的docs或CSS中找不到这些.我在哪里可以找到有关这些课程的信息？

解决方法

通过检查源代码,我在docs.css中找到了这些类

/** * The left tile for a list item. */

.md-tile-left {
  min-width: 56px;
  margin-right: -16px; }

/** * The center content tile for a list item. */

.md-tile-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 16px;
  text-overflow: ellipsis; }
  .md-tile-content h3 {
    margin: 0 0 3px 0;
    font-weight: 400;
    font-size: 1.1em; }
  .md-tile-content h4 {
    margin: 0 0 3px 0;
    font-weight: 400;
    font-size: 0.9em; }
  .md-tile-content p {
    margin: 0 0 3px 0;
    font-size: 0.75em; }

见 – List css file on github

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!