Eğik Materyal Tasarımı düzeni

ben gibi açısal malzeme düzeni olan bir düzen tasarlayabilir nasıl

: enter image description here Eğik Materyal Tasarımı düzeni

Açıklama: Bir md- üzerine gelerek gölge düşen bir md-içerik kutu araç çubuğu.

2015-03-16 zero_coding

Sana tamamen Açısal Malzeme yapabilirsiniz sanmıyorum ama çoğunlukla Malzeme bunu ve daha sonra basit bir css sınıfı ekleyebilir.

<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>

Ve gibi CSS görünecektir:: Gerekli tüm komut ve css bağımlılıkları varsayarsak, html aşağıdaki gibi görünecektir Burada bir çalışma plunk var

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

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

burada

tuşları (flexbox kullanarak) sayfada yatay div merkezleri layout-align="center start" ve yerleri i kullanıyor Sadece md araç çubuğunun altında. Divanın içeriği üzerinde bir flexbox düzeni kullandığımızdan emin olmak için layout="row" da gereklidir.

Oradan flex="66".md-whiteframe-z2 zemin ekler kutusu% 66 oranında bir genişliği verir ve sonra bizim .move-up sınıf sadece position: relative; top: -60px kullanarak 60 piksel o kadar taşır ve z-index kullanarak araç çubuğunun üzerindeki yerleştirir.

kaynak

2015-03-16 17:53:20

@zero_coding: insanların daha ileride kolay bulabilmesi için Sorunuzun görüntünün bir açıklama eklemek misiniz? –

Elbette, deneyeceğim. Bazen kendimi etkilemek zor. yardım için çok teşekkürler. –

Yardım edebileceğime sevindim –

Eğik Materyal Tasarımı düzeni

cevap

İlgili konular