2015-03-16 12 views
7

मैं जैसे कोणीय सामग्री लेआउट के साथ एक लेआउट डिजाइन कैसे कर सकते हैं: enter image description hereकोणीय सामग्री डिज़ाइन लेआउट

मैं material design से एक उदाहरण ले लिया

विवरण: एक md- पर मँडरा ड्रॉप छाया के साथ एक md-सामग्री बॉक्स उपकरण पट्टी।

उत्तर

16

मुझे नहीं लगता कि आप इसे पूरी तरह से कोणीय सामग्री में कर सकते हैं, लेकिन आप इसे ज्यादातर सामग्री में कर सकते हैं और फिर एक साधारण सीएसएस कक्षा में जोड़ सकते हैं। मान लिया जाये कि आप सभी आवश्यक स्क्रिप्ट और सीएसएस निर्भरता है, अपने html इस तरह दिखेगा:

<body ng-app="materialDesignApp" ng-controller="MainCtrl" layout="column"> 

    <md-toolbar flex="33"> 

    </md-toolbar> 

    <div layout-align="center start" layout="row"> 
     <md-content class="md-whiteframe-z2 move-up" flex="66"> 
     <p layout-margin> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis varius nibh, eget fringilla massa. Phasellus sollicitudin, tellus vel hendrerit commodo, eros purus placerat mi, a tristique orci lacus egestas lectus. Aenean congue rutrum suscipit. Aliquam erat volutpat. Sed sollicitudin dui sit amet sapien luctus tincidunt. In eu ipsum lectus. Duis bibendum auctor lorem hendrerit tempor. Aenean rhoncus, dui in mattis interdum, ex erat ultricies libero, ut tincidunt lectus ex finibus lacus. Integer iaculis, nunc tempus finibus cursus, elit eros dictum dolor, et dapibus lectus sapien at risus. Quisque ac metus in turpis malesuada rutrum sed quis quam. Mauris pulvinar dignissim nunc a laoreet. Nam a arcu at sem imperdiet iaculis. 
     </p> 
     </md-content> 
    </div> 

    </body> 

और की तरह अपने सीएसएस दिखेगा:

.move-up { 
    position: relative; 
    top: -60px; 
    z-index: 99; 
} 

यहाँ एक काम कर अंगुलियों से छूना है:

http://plnkr.co/edit/6lHVbV?p=preview

यहां कुंजियां layout-align="center start" का उपयोग कर रही हैं, जो पृष्ठ पर क्षैतिज रूप से div को केन्द्रित करती है (flexbox का उपयोग करके) और स्थान I टी सिर्फ एमडी-टूलबार के नीचे। layout="row" यह सुनिश्चित करने के लिए भी आवश्यक है कि हम div की सामग्री पर एक फ्लेक्सबॉक्स लेआउट का उपयोग करें।

वहाँ से, flex="66" बॉक्स 66% की चौड़ाई देता है, .md-whiteframe-z2 पृष्ठभूमि कहते हैं, और फिर हमारे .move-up वर्ग बस इसे position: relative; top: -60px का उपयोग कर 60 पिक्सल से ऊपर ले जाता है और उपकरण पट्टी z-index का उपयोग करके उपरोक्त यह देता है।

+0

@zero_coding: क्या आप कृपया अपने प्रश्न में छवि का विवरण जोड़ सकते हैं ताकि लोग भविष्य में इसे आसानी से ढूंढ सकें? –

+0

बेशक, मैं इसे आज़माउंगा। कभी-कभी खुद को प्रभावित करना मुश्किल होता है। मदद के लिए बहुत बहुत धन्यवाद। –

+0

मुझे खुशी है कि मैं मदद कर सकता हूं –

संबंधित मुद्दे