#angularjs #angularjs-material
#angularjs #angularjs-material
Вопрос:
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>
Комментарии:
1. Почему вы используете и
md-content
внутри другогоmd-content
?
Ответ №1:
Ваш фрагмент кода правильный, позвольте мне дать вам некоторые спецификации :
Компонент 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>