कोणीय सामग्री

Question

के साथ कार्ड का ग्रिड रखने का प्रयास कर रहा हूं, मैं कोणीय-सामग्री का उपयोग करके कार्ड का ग्रिड रखने की कोशिश कर रहा हूं। तो मैं निर्देश एमडी-ग्रिड-सूची और एमडी कार्ड का उपयोग कर रहा हूं। लेकिन परिणाम बहुत बदसूरत है, और मुझे यह समझने की ज़रूरत नहीं है कि एमडी-पंक्ति-ऊंचा (अनुपात) कैसे काम करता है, मेरे पास प्रलेखन है, लेकिन यह बहुत कुछ नहीं कहता है।

यहां मैं अब तक क्या कर रहा हूं: http://codepen.io/stunaz/pen/qdQwbq, मैं कार्ड का उत्तरदायी ग्रिड रखने की कोशिश कर रहा हूं, यहां तक ​​कि यह भी सुनिश्चित नहीं है कि एमडी-ग्रिड-सूची यहां उचित है या नहीं।

<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height="300px" md-gutter="12px" md-gutter-gt-sm="8px"> 

<md-grid-tile class="gray" ng-repeat="user in users"> 
    <md-card> 
    <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar"> 
    <md-card-content> 
     <h2>{{user}}</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
    </md-card-content> 
    <div class="md-actions" layout="row" layout-align="end center"> 
     <md-button>Save</md-button> 
     <md-button>View</md-button> 
    </div> 
    </md-card> 
</md-grid-tile> 

मैं मदद के किसी भी प्रकार के लिए खुला रहा हूँ।

Answer 1

आप एमडी-ग्रिड-सूची के बजाय Flex Box का उपयोग उसी प्रभाव के लिए कर सकते हैं।

<div class='md-padding' layout="row" flex> 
    <div layout="row" flex> 
     <div class="parent" layout="column" ng-repeat="user in users" flex> 
      ... Your content here 
     </div> 
    </div> 
    </div> 

एक पंक्ति में ताश के पत्तों की निश्चित संख्या के साथ इस उदाहरण पर एक नज़र डालें:

http://codepen.io/anon/pen/bdQJxy

और एक संवेदनशील उदाहरण, Wrap layout

http://codepen.io/anon/pen/MwzRde

आशा यह है का उपयोग करते हुए आप क्या चाहते थे।

Answer 2

इस HTML मार्कअप का उपयोग करें और अपनी आवश्यकता को पूरा करने के लिए एमडी कार्ड में फ्लेक्स नंबर बदलें।

<div class='md-padding' layout="row" layout-wrap> 
        <md-card flex="15" ng-repeat ="n in [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]"> 
         <img ng-src="http://i2.wp.com/celebsbios.com/wp-content/uploads/2015/12/Halsey-Singer-3.jpg?resize=150%2C150" class="md-card-image" alt="Washed Out"> 
         <md-card-title> 
          <md-card-title-text> 
           <span class="md-headline">Action buttons</span> 
          </md-card-title-text> 
         </md-card-title> 
         <md-card-content> 
          <p> 
           The titles of Washed Out's breakthrough song and the first single from Paracosm share the 
           two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... 
          </p> 
          <p> 
           The titles of Washed Out's breakthrough song and the first single from Paracosm share the 
           two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... 
          </p> 
          <p> 
           The titles of Washed Out's breakthrough song and the first single from Paracosm share the 
           two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... 
          </p> 
         </md-card-content> 
         <md-card-actions layout="row" layout-align="end center"> 
          <md-button>Action 1</md-button> 
          <md-button>Action 2</md-button> 
         </md-card-actions> 
        </md-card> 
       </div>