Блог

md-list В md-card не настраивается на разные размеры экрана, несмотря на flex атрибут. Я полагаю, что это может быть из-за ng-href внутренней части md-list-item .

Это настройка, которая у меня есть:

 <md-content layout="row" layout-align="space-around stretch">
    <md-content layout="column" layout-align="start stretch" flex="90">
        <div></div>
    </md-content>

    <md-content flex>
        <md-card>
            <md-card-content>
                <md-list>
                    <md-list-item ng-href="" ng-repeat="">
                        <md-icon></md-icon>
                        <p></p>
                    </md-list-item>
                </md-list>
            </md-card-content>
        </md-card>
    </md-content>
</md-content>
  

Ваш фрагмент кода правильный, позвольте мне дать вам некоторые спецификации :

Компонент md-list-item автоматически определяет, должен ли элемент списка быть интерактивным.

Если элемент md-list доступен для просмотра, мы помещаем все содержимое внутрь и создаем накладывающуюся кнопку, которая будет выполнять указанные действия (например, ng-href, ng-click)

Мы создаем накладывающуюся кнопку вместо того, чтобы оборачивать все содержимое внутри кнопки, потому что в противном случае некоторые элементы могут быть недоступны для просмотра внутри кнопки.

При использовании дополнительного элемента внутри вашего элемента списка компонент md-list-item автоматически создаст дополнительный контейнер в конце элемента md-list-item, который содержит все дополнительные элементы.

Контейнер вторичного элемента не является статическим, потому что в противном случае переполнение не будет работать должным образом с элементом списка.

Вот пример формы официального сайта material angular :

  <md-list>
  <md-list-item class="md-2-line" ng-repeat="item in allTask">
    <md-checkbox ng-model="item.done"></md-checkbox>
    <div class="md-list-item-text">
      <h3>{{item.title}}</h3>
      <p>{{item.description}}</p>
    </div>
  </md-list-item>
</md-list>