Açısal Malzeme md-kartı yanıt vermiyor

Question

Ürün kartı ızgarası oluşturmak için md kartını kullanmaya çalışıyorum. Büyük ekranlarda 3 kart genişliğinde, tablet boyutu 2 kart genişliğinde, 1 kart genişliğinde akıllı telefon olmasını istiyorum. Resimler aynı boyutta olmayacak olsa da, tüm kartların görüntüyü bozmadan aynı boyutta olmasını isterim.

Buna nasıl ulaşacağım konusunda bir kayıp yaşıyorum. Sert kodlama seti genişliklerini ve kartlar için yükseklikten kaçınmak ve bunların ekranın büyüklüğüyle sıvı olmasını istemelerini ciddiye almak istiyorum. Esnek özellikler kullanmam gerektiğini düşünüyorum.

İşte

kartım görünümünün yapısı şöyledir::

Bu

şimdi gibi görünüyor ne

<md-content> 
    <section class="cards" ng-if="view === 'Articles'"> 
      <div layout="row" layout-sm="column" layout-align="center" layout-wrap> 

       <md-card flex="33" ng-repeat="article in home.articles | filter:searchCard"> 
       <img ng-src="{{article.imagePath}}" alt="Test image"> 
       <div class="card_content"> 
        <a href="/article/{{article.id}}"><h3 class="md-subhead article_card_title">{{article.title}}</h3></a> 
        <div class="card_agency"> 
         <span class="agency_name">{{article.agency}}</span> 
        </div> 
       </div> 
       </md-card> 

       <h1 class="md-display-1" ng-show="(home.articles | filter:searchCard).length == 0">No results!</h1> 
      </div> 
     </section> 
</md-content> 

olurdu bu kartlar duyarlı hale konusunda herhangi bir fikir çok çok çok takdir! Aynı zamanda onlar var öğesinin boyutunu sürdürürken,

Answer 1

Sen tüm görüntüler için soruyorsunuz potansiyel olarak farklı boyutlarda olabilir.

Onu düşün. Bir dilim pizzaya sahipseniz ve tabağınız için çok büyükse, ekstra pizza nereye gider? Tabağından. Pizzalarınızı "bozmak" istemiyorsanız, katlayın, o zaman sığar! Yapabileceğin diğer şey, uygun olmayan pizza parçalarını kesiyor (ekin), o zaman işe yarayabilir! eğer pizzayı küçültürsek, bu sorunlara neden olur çünkü o zaman plakaya sığar ama plaka tamamen pizza ile dolu değildir.

Yukarıdaki örneği kullanıyorum çünkü teknik olarak sorduğunuz şeyi yapmak mümkün değil. Ne istediğinizi yanlış anlayabilirim.

Md-ızgara listesi kullanılmasını ve md kart yönergesini ızgara içine koymanızı öneririm. Izgaraya istediğiniz düzeni verin ve tüm stilleri kartlarınızdan çıkarın.

Ölçeklendirmek için md kartını kullanmaya çalışırken benzer sorunlar yaşıyordum. Bunun yerine md-grid ile kısıtlanması ile çalışmak daha kolaydır.

<md-content layout-padding> 
    <md-grid-list md-cols="2" md-gutter="0px" md-row-height="5.8:10"> 
    <md-grid-tile ng-repeat="cat in catalogs"> 
     <md-card md-ink-ripple> 
     <catalog-select type="cat"> 
     </catalog-select> 
     </md-card> 
    </md-grid-tile> 
    </md-grid-list> 
</md-content> 

not: katalog seçim özel bir yönerge, bir templateUrl başvuran, ancak bir taşıdıkları kodu yapıştırın edeceğiz: Ben kartlarını tutmak için kodumu istediğini

<md-card-content> 
    <img ng-src="{{ type.img }}"/> 
    <md-card-title> 
     <md-card-title-text> 
     <h4> {{ type.year }} </h4> 
     <h5> {{ type.title }} </h5> 
     </md-card-title-text> 
    </md-card-title> 
    </md-card-content> 

böylece üst üste (veya iki sütun) 2: md-cols = "2" istediğiniz şekilde md-grid-liste direktifi düzenini ayarlamak için nasıl iyi dokümantasyon vardır: https://material.angularjs.org/latest/api/directive/mdGridList

Umut bu en azından yardım eder. md-kartındaki flex = "33" ün kullanılması kartın işe yarayacağı gibi görünüyor, ancak md kartının birincil işlevi, düzen için değil görünümler içindir. İkinciler için ızgara listesi oluşturdular.

Umarım bu yardımcı olur.

Answer 2

Bu düşündüğünüzden daha basittir. Kartların orijinal boyutlarını korumak istediğinden (görüntüyü deforme etmediğinizden), set esnek yüzdesini ayarlamamalı, ancak ihtiyaç duydukları şekilde büyümelerine ve küçülmelerine izin verin.İstediğiniz etkiyi elde etmek için, aşağıdakileri deneyin:

<div layout="row" layout-align="center stretch" layout-wrap> 

    <md-card ng-repeat="article in home.articles | filter:searchCard"> 
    ... 
    </md-card> 

</div> 

Kartlar ihtiyaç duydukları olarak sadece fazla yer kaplar ve onlar satır taşma, onlar çünkü düzen-sarma özelliğinin sarılmış olacaktır. Bu, her zaman masaüstünde 3 kart, tablette 2 kart ve cepte 1 kart olacak, ancak kartların her zaman ekrana sığmayacak kadar fazla alana sahip olmasını sağlayacaktır. Gerçekten düzeni bu tür olmasını istiyorsanız

, yolu bu olacaktır yapmalı: kartları marjı var çünkü

<div layout="row" layout-align="center stretch" layout-wrap> 

    <md-card flex="95" flex-gt-sm="45" flex-gt-md="30" ng-repeat="article in home.articles | filter:searchCard"> 
    ... 
    </md-card> 

</div> 

, bir sonraki daha küçük esnek yüzdesini belirlemek zorunda. Bu nedenle, flex =% 33 yerine,% 30 ve% 50 yerine% 45 kullanmalısınız (veya CSS dosyanızda maks-genişlik ve flex-temelini% 47 ya da benzeri olarak ayarlayabilirsiniz).

Bu yardımcı olur umarım.